We Keep Coding

TypeError: TypeError: undefined is not an object (evaluating 'this.props.navigation.state.params.name')

I know there have been similar questions, but I tried anyway and still can't find the solution.
I have a login screen, registration, chat and a test screen (where I use just to try to fix this error) I want to pass the name, email and avatar data that I get there from Login / Register, but it is returned to me that the object is undefined. I only corrected the error if I put the navigation as follows: Login or Register> Chat. However, I do not want to do so, I need to click on an image and direct to this chat. Apparently it's a common mistake, but I'm frustrated with trying to fix it (I'm new to React-Native)
Chat.js
import { GiftedChat } from "react-native-gifted-chat"; // 0.3.0
import firebaseSvc from "../FirebaseSvc";
type Props = {
name?: string,
email?: string,
avatar?: string
};
class Chat extends React.Component<Props> {
constructor(props) {
super(props);
}
static navigationOptions = ({ navigation }) => ({
title: (navigation.state.params || {}).name || "Chat!"
});
state = {
messages: []
};
get user() {
return {
name: this.props.navigation.state.params.name,
email: this.props.navigation.state.params.email,
avatar: this.props.navigation.state.params.avatar,
id: firebaseSvc.uid,
_id: firebaseSvc.uid // need for gifted-chat
};
}
render() {
return (
<GiftedChat
messages={this.state.messages}
onSend={firebaseSvc.send}
user={this.user}
/>
);
}
componentDidMount() {
firebaseSvc.refOn(message =>
this.setState(previousState => ({
messages: GiftedChat.append(previousState.messages, message)
}))
);
}
componentWillUnmount() {
firebaseSvc.refOff();
}
}
export default Chat;
Login.js
import { Constants, ImagePicker, Permissions } from "expo";
import {
StyleSheet,
Text,
TextInput,
TouchableOpacity,
KeyboardAvoidingView,
View,
Button,
ImageEditor,
Image,
StatusBar,
LayoutAnimation
} from "react-native";
import firebaseSvc from "../FirebaseSvc";
import firebase from "firebase";
import { auth, initializeApp, storage } from "firebase";
import uuid from "uuid";
class Login extends React.Component {
state = {
name: "",
email: "",
password: "",
avatar: ""
};
// using Fire.js
onPressLogin = async () => {
console.log("pressing login... email:" + this.state.email);
const user = {
name: this.state.name,
email: this.state.email,
password: this.state.password,
avatar: this.state.avatar
};
const response = firebaseSvc.login(
user,
this.loginSuccess,
this.loginFailed
);
};
loginSuccess = () => {
console.log("login successful, navigate to chat.");
this.props.navigation.navigate("TelaTeste", {
name: this.state.name,
email: this.state.email,
avatar: this.state.avatar
});
};
loginFailed = () => {
console.log("login failed ***");
alert("Login failure. Please tried again.");
};
onChangeTextEmail = email => this.setState({ email });
onChangeTextPassword = password => this.setState({ password });
render() {
LayoutAnimation.easeInEaseOut();
return (
<View style={styles.container}>
<KeyboardAvoidingView behavior="padding">
<Text style={styles.titulo}>{"CUDDLE"}</Text>
<View style={styles.errorMessage}>
{this.state.errorMessage && (
<Text style={styles.error}>{this.state.errorMessage}</Text>
)}
</View>
<View style={styles.form}>
<View>
<Text style={styles.inputTitle}>Email Address</Text>
<TextInput
style={styles.input}
autoCapitalize="none"
onChangeText={this.onChangeTextEmail}
value={this.state.email}
></TextInput>
</View>
<View style={{ marginTop: 32 }}>
<Text style={styles.inputTitle}>Password</Text>
<TextInput
style={styles.input}
secureTextEntry
autoCapitalize="none"
onChangeText={this.onChangeTextPassword}
value={this.state.password}
></TextInput>
</View>
</View>
<TouchableOpacity style={styles.button} onPress={this.onPressLogin}>
<Text style={{ color: "#FFF", fontWeight: "500" }}>Sign in</Text>
</TouchableOpacity>
<TouchableOpacity
style={{ alignSelf: "center", marginTop: 32 }}
onPress={() => this.props.navigation.navigate("Register")}
>
<Text style={{ color: "#414959", fontSize: 13 }}>
New to SocialApp?{" "}
<Text style={{ fontWeight: "500", color: "#5B2B80" }}>
Sign Up
</Text>
</Text>
</TouchableOpacity>
</KeyboardAvoidingView>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1
},
titulo: {
color: "#5B2B80",
fontSize: 30,
fontWeight: "bold",
textAlign: "center",
marginTop: 150
},
errorMessage: {
height: 72,
alignItems: "center",
justifyContent: "center",
marginHorizontal: 30
},
error: {
color: "#5B2B80",
fontSize: 13,
fontWeight: "600",
textAlign: "center"
},
form: {
marginBottom: 48,
marginHorizontal: 60
},
inputTitle: {
color: "#8A8F9E",
fontSize: 10,
textTransform: "uppercase"
},
input: {
borderBottomColor: "#8A8F9E",
borderBottomWidth: StyleSheet.hairlineWidth,
height: 40,
fontSize: 15,
color: "#161F3D"
},
button: {
marginHorizontal: 60,
backgroundColor: "#5B2B80",
borderRadius: 4,
height: 52,
alignItems: "center",
justifyContent: "center"
}
});
export default Login;
App.js
import Login from "./components/Login";
import CreateAccount from "./components/CreateAccount";
import Chat from "./components/Chat";
import TelaTeste from "./components/TelaTeste";
// Import React Navigation
import { createAppContainer } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";
const AppNavigator = createStackNavigator({
Login: { screen: Login },
CreateAccount: { screen: CreateAccount },
Chat: { screen: Chat },
TelaTeste: TelaTeste
});
export default createAppContainer(AppNavigator);

Change, to use arrow function, this inside user() refers to a different thing
get user() {
return {
name: this.props.navigation.state.params.name,
email: this.props.navigation.state.params.email,
avatar: this.props.navigation.state.params.avatar,
id: firebaseSvc.uid,
_id: firebaseSvc.uid // need for gifted-chat
};
}
to
user = () => {
return {
name: this.props.navigation.state.params.name,
email: this.props.navigation.state.params.email,
avatar: this.props.navigation.state.params.avatar,
id: firebaseSvc.uid,
_id: firebaseSvc.uid // need for gifted-chat
};
}

Passing props to header component

In my react native mobile app I have a login functionality and register functionality. User is logged in using email and password using firebase authentication. After logged in I need to be able to show user's name in the header component. But in my app I am using stack navigator, drawer navigator and bottom tab navigator. So, for navigation I have created separate js file called Router.
const ThirdNavigator = createBottomTabNavigator({
LoginForm,
RegisterForm
});
const SecondNavigator = createDrawerNavigator({
Profile: {
screen: TaskList,
navigationOptions: ({ navigation }) => ({
title: 'Your Schedule'
})
}
}, {
// drawerType: 'slide',
});
const MainNavigator = createStackNavigator({
Open: { screen: OpenWindow },
Home: {
screen: ThirdNavigator,
navigationOptions: ({ navigation }) => ({
title: 'Sign In',
headerStyle: { backgroundColor: '#0680EC', height: 45 },
headerLeft: null,
headerRight: null
})
},
Profile: {
screen: SecondNavigator,
navigationOptions: ({ navigation }) => ({
title: 'Your Schedule',
headerStyle: { backgroundColor: '#0680EC', height: 45 },
headerLeft: <Toggle navigation={navigation} />,
headerRight: <Notification logOutUser={logOutUser()} />
})
}
});
const Router = createAppContainer(MainNavigator);
export default connect(null, { emailChanged, passwordChanged, loginUser, logOutUser })(Router);
As I got to know, when I am using react-redux connect function, I can't use navigation options in main UI component. So, I had to use navigation options in Router. My header is a separate component called Notification.js.
class Notification extends Component {
state = {
user_name: 'label',
loading: true,
level: ''
};
onSelectOpt(idx, value) {
this.setState({ level: value });
if (value === "Logout") {
firebase.auth().signOut();
}
}
showLogout() {
return (
<ModalDropdown options={[this.state.user_name, 'Logout']} onSelect={(idx, value) => this.onSelectOpt(idx, value)} style={{ width: '100%', height: 30, justifyContent: 'center', paddingLeft: 20 }} dropdownStyle={{ width: 100, height: 82, paddingBottom: 0 }} dropdownTextStyle={{ color: '#000', fontSize: 15 }} dropdownTextHighlightStyle={{ fontWeight: 'bold' }} >
<View style={{ height: 30, width: 60, alignItems: 'center', paddingRight: 20 }}>
<Image
source={require('../pics/logout.png')}
style={styles.downStyle}
/>
</View>
</ModalDropdown>
);
}
render() {
return (
<View style={{ flexDirection: 'row', paddingRight: 10 }}>
<View style={{ height: 30, width: 60, backgroundColor: 'transparent' }}>
{this.showLogout()}
</View>
</View>
)
}
}
const styles = {
imageStyle: {
width: 25,
height: 25
},
buttonStyle: {
marginLeft: 5,
marginRight: 7
},
spinnerStyle: {
alignSelf: 'stretch',
borderRadius: 5,
marginLeft: 20,
marginRight: 20,
borderRadius: 60,
paddingTop: 10,
paddingBottom: 10,
height: 100
},
downStyle: {
width: 25,
height: 25
}
}
export { Notification };
My problem is, after I fetched user's name from firebase database, how can I pass it as a prop to my header. I call my action creator in main UI component after logged in. But navigation options are in Router. So, I'm looking for a way to pass fetched data as a prop to Header(Notification.js).
class TaskList extends Component {
handleBackButtonClick() {
BackHandler.exitApp();
return true;
}
UNSAFE_componentWillMount() {
this.props.userFetch();
// console.log(this.props.username.name);
BackHandler.addEventListener('hardwareBackPress', this.handleBackButtonClick.bind(this));
}
componentWillUnmount() {
BackHandler.removeEventListener('hardwareBackPress', this.handleBackButtonClick.bind(this));
}
UNSAFE_componentWillReceiveProps(nextProps) {
// console.log(nextProps.username);
if (firebase.auth().currentUser == null) {
this.props.navigation.navigate('Home');
}
}
render() {
console.log(this.props);
return (
<View>
<Text>Employee</Text>
<Text>Employee</Text>
<Text>Employee</Text>
<Text>Employee</Text>
<Text>Employee</Text>
<Text>Employee</Text>
</View>
);
}
}
const mapStateToProps = state => {
const username = _.map(state.username, (val, uid) => {
return { ...val, uid };
});
return { username };
}
export default connect(mapStateToProps, { userFetch })(TaskList);
I have successfully fetched data from firebase and converted it into a array in main UI. Now I want a way to pass that data to the header Notification.js component. Please help me to figure out a way to do this.

How To navigate from createMaterialTopTabNavigatorto other screen - React Navigation?

I have some issue when navigating from top Tabnavigator to other screens
so my app navigation is
My Orders Screen from Drawer => Top TabNavigatore (Accepted/Completed) => Order Details
In Route.js
I put every single navigation I want like Drawer - Auth navigation and so on, and I put a StackNavigator contain the Orders Screen like this:
const OrdersStack = createStackNavigator({
Orders: {
screen: Orders,
navigationOptions: ({ navigation }) => ({
headerLeft: (
// <TouchableOpacity onPress={() => navigation.dispatch(DrawerActions.toggleDrawer())}>
<TouchableOpacity
onPress={() => navigation.dispatch(DrawerActions.toggleDrawer())}
>
<Icon
name="ios-menu"
size={40}
style={{ margin: 10 }}
color="#2F98AE"
/>
</TouchableOpacity>
),
headerRight: <View />,
title: "My Orders",
headerTintColor: "#2F98AE",
headerStyle: {
borderBottomColor: "white"
},
headerTitleStyle: {
color: "#2F98AE",
// textAlign: "center",
flex: 1,
elevation: 0,
fontSize: 25
// justifyContent: "center"
}
})
}
});
In the Orders.js I put these:
import React, { Component } from "react";
import { createAppContainer, createStackNavigator } from "react-navigation";
import NavTabs from "../screens/NavTabs";
import NavOrderDetails from "../screens/NavOrderDetails";
// create a component
export default class Orders extends Component {
render() {
return <MyOrdersScreen />;
}
}
export const root = createStackNavigator({
NavTabs: NavTabs,
NavOrderDetails: NavOrderDetails
});
const MyOrdersScreen = createAppContainer(root);
As I mentioned in Orders.js it Contains Tabs and Order Details
In Tabs, I'm creating a createMaterialTopTabNavigator
import { createMaterialTopTabNavigator } from "react-navigation";
import AcceptedOrders from "../screens/AcceptedOrders";
import CompletedOrders from "../screens/CompletedOrders";
const MainTabs = createMaterialTopTabNavigator(
{
Accepted: { screen: AcceptedOrders },
Completed: { screen: CompletedOrders }
},
{
tabBarOptions: {
activeTintColor: "#fff",
inactiveTintColor: "#ddd",
tabStyle: {
justifyContent: "center"
},
indicatorStyle: {
backgroundColor: "#fcc11e"
},
style: {
backgroundColor: "#2F98AE"
}
}
}
);
export default MainTabs;
and another screen is OrderDeatils.js
import { createStackNavigator } from "react-navigation";
import OrderDetails from "../screens/OrderDetails";
import React, { Component } from "react";
import { View } from "react-native";
const OrderDetailsStack = createStackNavigator({
OrderDetails: {
screen: OrderDetails,
navigationOptions: () => ({
title: "Order Details",
headerRight: <View />,
headerTintColor: "#2F98AE",
headerStyle: {
borderBottomColor: "white"
},
headerTitleStyle: {
color: "#2F98AE",
flex: 1,
elevation: 0,
fontSize: 25
}
})
}
});
export default OrderDetailsStack;
Here are a screenShots it should explain what I mean
1- My Orders
2- Order Details

If i understand, you are concerned about the blank header that appears on top of the screen under your first header.
That one is created by createStackNavigator.
A the first Stack that creates the first Header named OrdersStack.
Inside that you have the root constant (probably, as there isn't the full code) that is creating the second header.
Inside root you are then defining your createMaterialTopTabNavigator with your two screens, that's showing the topBar with the label "accepted" and "completed".
To hide that white space you have to disable your root header doing:
export const root = createStackNavigator({
NavTabs: NavTabs,
NavOrderDetails: NavOrderDetails
},
{
defaultNavigationOptions:{
header:null
}
});
UPDATE.
You have two ways to fix this and still have a backButton:
1) You can either create a parent CustomHeader that, using react-navigation's withNavigation HOC, is aware about his childrens navigation state.
2) Dinamically hide the parent header when the second one is showing. You can accomplish this using this.props.navigation.dangerouslyGetParent().dangerouslyGetParent().setParams({showHeader:false})
then your OrdersStack would be:
const OrdersStack = createStackNavigator({
Orders: {
screen: Orders,
navigationOptions: ({ navigation }) => {
var defaultHeader={
headerLeft: (
<TouchableOpacity
onPress={() => navigation.dispatch(DrawerActions.toggleDrawer())}
>
<Icon
name="ios-menu"
size={40}
style={{ margin: 10 }}
color="#2F98AE"
/>
</TouchableOpacity>
),
headerRight: <View />,
title: "My Orders",
headerTintColor: "#2F98AE",
headerStyle: {
borderBottomColor: "white"
},
headerTitleStyle: {
color: "#2F98AE",
// textAlign: "center",
flex: 1,
elevation: 0,
fontSize: 25
// justifyContent: "center"
}
}
if (navigation.state.params)
return(navigation.state.params.showHeader?{defaultHeader}:null)
else return defaultHeader
}
}
});

How to Handle Two navigator in react navigation?

Hello Guys,
I have some issue with React navigation V3,
In my app, I have an Authentication step to Entering to Home Screen and it doesn't have a Drawer Navigation as a default, it will be Stack Navigator
Splash => Sign-up => Sign-in => Home
And in The Home Screen must Contain a Drawer Navigation And StackNavigation at the same time.
I'm Write one file named as a Route.js contain all of my Navigations,
But Now
createAppContainer just accept on arg like this I think.
export default MyApp = createAppContainer(DrawerNavigator);
and I want to use my other StackNavigator Not Contained in a Drawer, how to solve this problem?
Here is a Route.js
import React, { Component } from 'react';
//import react in our code.
import {
StyleSheet,
Platform,
View,
Text,
Image,
TouchableOpacity,
} from 'react-native';
//Import required react-navigation component
import {
createDrawerNavigator,
createStackNavigator,
createAppContainer
} from 'react-navigation';
//Import all the screens for Drawer/ Sidebar
import Splash from "../screens/Splash";
import Home from "../screens/Home";
import SignUp from "../screens/SignUp";
import SignIn from "../screens/SignIn";
import ForgetPassword from "../screens/ForgetPassword";
import Order from "../screens/Order";
import MapApp from "../screens/MapApp";
import Icon from 'react-native-vector-icons/Ionicons';
//Navigation Drawer Structure for all screen
class NavigationDrawerStructure extends Component {
//Structure for the navigatin Drawer
toggleDrawer = () => {
//Props to open/close the drawer
this.props.navigationProps.toggleDrawer();
};
render() {
return (
<View style={{ flexDirection: 'row' }}>
<TouchableOpacity onPress={this.toggleDrawer.bind(this)}>
<Icon name="md-menu" size={30} color='#009' style={{ width: 25, height: 25, marginLeft: 5 }} />
</TouchableOpacity>
</View>
);
}
}
const Route = createStackNavigator({
//All the screen from the Screen1 will be indexed here
Splash: {
screen: Splash,
navigationOptions: {
header: null
},
},
SignUp: {
screen: SignUp,
navigationOptions: () => ({
// header: null
title: "Sign Up",
headerLeft: null,
headerTintColor: "#0496FF",
headerStyle: {
borderBottomColor: "white"
},
headerTitleStyle: {
color: "#0496FF",
textAlign: "center",
flex: 1,
elevation: 0,
fontSize: 25,
justifyContent: "center"
}
})
},
SignIn: {
screen: SignIn,
navigationOptions: {
title: "Sign In",
headerRight: <View />,
headerTintColor: "#0496FF",
headerStyle: {
borderBottomColor: "white"
},
headerTitleStyle: {
color: "#0496FF",
textAlign: "center",
flex: 1,
elevation: 0,
fontSize: 25,
justifyContent: "center"
}
}
},
ForgetPassword: {
screen: ForgetPassword,
navigationOptions: {
title: "Forget Password",
headerRight: <View />,
headerTintColor: "#0496FF",
headerStyle: {
borderBottomColor: "white"
},
headerTitleStyle: {
color: "#0496FF",
textAlign: "center",
flex: 1,
elevation: 0,
fontSize: 25,
justifyContent: "center"
}
}
},
MapApp: {
screen: MapApp,
navigationOptions: {
title: "Map",
headerRight: <View />,
headerLeft: <View />,
headerTintColor: "#0496FF",
headerStyle: {
backgroundColor: "#fafafa",
borderBottomColor: "white",
},
headerTitleStyle: {
color: "#0496FF",
textAlign: "center",
flex: 1,
elevation: 0,
fontSize: 25,
justifyContent: "center"
}
}
}
});
//Stack Navigator for First Option of Navigation Drawer
const FirstActivity_StackNavigator = createStackNavigator({
Home: {
screen: Home,
navigationOptions: ({ navigation }) => ({
title: 'Home',
headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,
headerStyle: {
backgroundColor: '#FF9800',
shadowOpacity: 0,
elevation: 0,
},
headerTintColor: '#fff',
}),
},
});
//Stack Navigator for Second Option of Navigation Drawer
const Screen2_StackNavigator = createStackNavigator({
//All the screen from the Screen2 will be indexed here
Order: {
screen: Order,
navigationOptions: ({ navigation }) => ({
title: 'Order',
headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,
headerStyle: {
backgroundColor: '#FF9800',
},
headerTintColor: '#fff',
}),
},
});
//Drawer Navigator for the Navigation Drawer / Sidebar
const DrawerNavigatorExample = createDrawerNavigator({
//Drawer Optons and indexing
Screen1: {
//Title
screen: FirstActivity_StackNavigator,
navigationOptions: {
drawerLabel: 'Home',
drawerIcon: () => (
<Icon name="ios-home" size={30} color='#009' />
),
},
},
Screen2: {
screen: Screen2_StackNavigator,
navigationOptions: {
drawerLabel: 'Order',
drawerIcon: () => (
<Icon name="ios-list-box" size={30} color='#009' />
),
},
},
});
export default MyApp = createAppContainer(DrawerNavigatorExample);
App.js
import React, { Component } from "react";
import MyApp from './src/navigations/Route'
export default class App extends Component {
render() {
return (
<MyApp />
)
}
}

Not sure if I understand your question so well, But what I suggest is to make each navigator in a different file like for example your StackNavigation in a file called "firstActivity_StackNavigator.js" and then you need to export the navigator as follow:
...
const FirstActivity_StackNavigator = createStackNavigator({
Home: {
screen: Home,
navigationOptions: ({ navigation }) => ({
title: 'Home',
headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,
headerStyle: {
backgroundColor: '#FF9800',
shadowOpacity: 0,
elevation: 0,
},
headerTintColor: '#fff',
}),
},
});
export default FirstActivity_StackNavigator;
Then in your main navigator you just import whatever navigators you want
import FirstActivity_StackNavigator from "./firstActivity_StackNavigator.js"
import Screen2_StackNavigator from "./screen2_StackNavigator.js"
const DrawerNavigatorExample = createDrawerNavigator({
//Drawer Optons and indexing
Screen1: {
//Title
screen: FirstActivity_StackNavigator,
navigationOptions: {
drawerLabel: 'Home',
drawerIcon: () => (
<Icon name="ios-home" size={30} color='#009' />
),
},
},
Screen2: {
screen: Screen2_StackNavigator,
navigationOptions: {
drawerLabel: 'Order',
drawerIcon: () => (
<Icon name="ios-list-box" size={30} color='#009' />
),
},
},
});
...
Hopefully this answer your question

React Native NavigatorIOS

I'm a newbie to ReactNative
I Crated NavigatorEX class and it renders normally the MiladView, but it's not navigating to HadiView class. what'is the problem with route or push methods.
This code written by React-Native 0.25 with ES6.
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
NavigatorIOS
} from 'react-native';
class NavigatorEX extends Component {
render() {
return (
<NavigatorIOS
style={styles.nav}
titleTextColor="#212121"
navigationBarHidden={false}
initialRoute={{
component: MiladView,
title: 'Milad',
rightButtonTitle: 'Go',
onRightButtonPress: () => {
this.props.navigator.push({
component: HadiView,
title: 'Hadi',
leftButtonTitle: 'Back',
onLeftButtonPress: () => this.props.navigator.pop(),
});
},
}}
/>
);
}
}
class HadiView extends Component {
render(){
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Hadi
</Text>
</View>
)
}
}
class MiladView extends Component {
render(){
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Milad
</Text>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#FAFAFA',
},
nav: {
flex: 1,
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
AppRegistry.registerComponent('NavigatorEX', () => NavigatorEX);

Try adding ref={navigator => this.navigator = navigator} to the NavigatorIOS, and then this.navigator.push vs this.props.navigator.push
<NavigatorIOS
ref={navigator => this.navigator = navigator}
style={styles.nav}
titleTextColor="#212121"
navigationBarHidden={false}
initialRoute={{
component: MiladView,
title: 'Milad',
rightButtonTitle: 'Go',
onRightButtonPress: () => {
this.refs.navigator.push({
component: HadiView,
title: 'Hadi',
leftButtonTitle: 'Back',
onLeftButtonPress: () => this.refs.navigator.pop(),
});
},
}}
/>