Cannot read property 'navigate' of undefined in react-navigation - react-native

Question

I have used import { StackNavigator } from 'react-navigation'; in my Router.js
import { StackNavigator } from 'react-navigation';
import LoginForm from './components/LoginForm';
import EmployeeList from './components/EmployeeList';
import EmployeeCreate from './components/EmployeeCreate';
const RouterComponent = StackNavigator(
{
LoginForm: {
screen: LoginForm,
navigationOptions: {
title: 'Please Login'
}
},
EmployeeList: {
screen: EmployeeList,
},
EmployeeCreate: {
screen: EmployeeCreate,
navigationOptions: {
title: 'Create Employee'
}
}
},
{
initialRouteName: 'LoginForm',
}
);
export default RouterComponent;
Of course i use it in my App.js
import React from 'react';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import ReduxThunk from 'redux-thunk';
import reducers from './src/reducers';
import Router from './src/Router';
export default class App extends React.Component {
render() {
const store = createStore(reducers, {}, applyMiddleware(ReduxThunk));
return (
<Provider store={store}>
<Router />
</Provider>
);
}
}
And i can use this.props.navigation in my LoginForm.js like this function:
onButtonPress() {
const { email, password, navigation } = this.props;
this.props.loginUser({ email, password, navigation });
}
I pass navigation to my Action file , i can use it to navigate another screen , like this:
const loginUserSuccess = (dispatch, user, navigation) => {
dispatch({
type: LOGIN_USER_SUCCESS,
payload: user
});
//navigation is from LoginForm.js , navigate to EmployeeList is working
navigation.navigate('EmployeeList');
};
Now i try to use this.props.navigation.navigate in my ListItem.js
My ListItem is under EmployeeList.js
Here is my EmployeeList.js
import _ from 'lodash';
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { View, Text, Button, FlatList } from 'react-native';
import { employeesFetch } from '../actions';
import ListItem from './ListItem';
class EmployeeList extends Component {
static navigationOptions = ({ navigation }) => ({
title: 'EmployeeList',
headerLeft: null,
headerRight: <Button title="Add" onPress={() => navigation.navigate('EmployeeCreate')} />,
});
componentWillMount() {
this.props.employeesFetch();
}
// Using ListItem over here
renderRow(employee) {
return <ListItem employee={employee} />;
}
render() {
console.log(this.props);
return (
<FlatList
data={this.props.employees}
renderItem={this.renderRow}
keyExtractor={employee => employee.uid}
/>
);
}
}
const mapStateToProps = state => {
const employees = _.map(state.employees, (val, uid) => {
return { ...val, uid };
});
return { employees };
};
export default connect(mapStateToProps, { employeesFetch })(EmployeeList);
Here is my problem use this.props.navigation.navigate in ListItem.js
import React, { Component } from 'react';
import { Text, View, TouchableWithoutFeedback } from 'react-native';
import { CardSection } from './common';
class ListItem extends Component {
onRowPress() {
this.props.navigation.navigate('EmployeeCreate');
}
render() {
const { item } = this.props.employee;
return (
<TouchableWithoutFeedback onPress={this.onRowPress.bind(this)}>
<View>
<CardSection>
<Text style={styles.titleSytle}>
{item.name}
</Text>
</CardSection>
</View>
</TouchableWithoutFeedback>
);
}
}
const styles = {
titleSytle: {
fontSize: 18,
paddingLeft: 15
}
};
export default ListItem;
I can use this.props.navigation in my LoginForm.js , i can't figure it out why i use it in ListItem.js navigate is undefined ?
Any help would be appreciated. Thanks in advance.

Answer 1

in file EmployeeList.js pass navigation as prop to ListItem.
renderRow(employee) {
return <ListItem employee={employee} navigation={this.props.navigation} />;
}
Now you should be able to access navigation using this.props.navigation inside ListItem.js.
Just an observation, never bind methods to context inside the render
function as it is called repeatedly and a new instance will be created
each time. Change your ListItem.js as below.
class ListItem extends Component {
constructor(props) {
super(props);
this.onRowPress = this.onRowPress.bind(this); // here we bind it
}
onRowPress() {
this.props.navigation && this.props.navigation.navigate('EmployeeCreate');
}
render() {
const { item } = this.props.employee;
return (
<TouchableWithoutFeedback onPress={this.onRowPress}>
<View>
<CardSection>
<Text style={styles.titleSytle}>
{item.name}
</Text>
</CardSection>
</View>
</TouchableWithoutFeedback>
);
}
}

Answer 2

Use withNavigation. In your ListItem.js file add import { withNavigation } from ‘react-navigation’; and replace export default ListItem; with export default withNavigation(ListItem);

Answer 3

Here is what I did (using latest react native with ES6):
Refactored the class code from this:
export default class MyComponent extends React.Component {
// content & code
}
To look like this:
import { withNavigation } from 'react-navigation';
class MyComponent extends React.Component {
// content & code
}
export default withNavigation(MyComponent);
According to the docs (withNavigation):
"withNavigation is a higher order component which passes the navigation prop into a wrapped component."