Experiencing error: undefined is not an object (evaluating 'navigation.navigate') - react-native

Question

The other routes are working but this one is giving me 'undefined is not an object ('evaluating 'navigation.navigate). I've used this.props.navigation.navigate('review') but same issue.
The other routes are working but this one is giving me 'undefined is not an object ('evaluating 'navigation.navigate). I've used this.props.navigation.navigate('review') but same issue.
First file: Want to navigate to review screen.
import React, { Component } from 'react';
import { TouchableWithoutFeedback, View } from 'react-native';
import { List, ListItem, Button } from 'react-native-elements';
class Items extends Component {
onRowPress = ({ navigation }) => {
navigation.navigate('review');
}
render() {
const { name } = this.props.employee;
return (
<View>
<TouchableWithoutFeedback onPress={this.onRowPress}>
<List>
<ListItem
roundAvatar
title={name}
chevronColor='purple'
/>
</List>
</TouchableWithoutFeedback>
</View>
);
}
}
export default Items;
Second file: Items is imported here.
import React, { Component } from 'react';
import { View, Text, ActivityIndicator, ListView } from 'react-native';
import { Button, Icon } from 'react-native-elements';
import { connect } from 'react-redux';
import Items from '../components/ListItem';
import { employeesFetch } from '../actions';
class MapScreen extends Component {
static navigationOptions = {
title: 'Map',
tabBarIcon: ({ tintColor }) => {
return <Icon name='my-location' size={30} color={tintColor} />;
}
}
state = {
dataLoaded: false
}
componentWillMount() {
this.props.employeesFetch();
this.createDataSource(this.props);
}
componentWillReceiveProps(nextProps) {
this.createDataSource(nextProps);
}
createDataSource({ employees }) {
const ds = new ListView.DataSource({
rowHasChanged: (r1, r2) => r1 !== r2
});
this.dataSource = ds.cloneWithRows(employees);
}
renderRow(employee) {
return <Items employee={employee} />;
}
componentDidMount() {
this.setState({ dataLoaded: true })
}
render () {
if (!this.state.dataLoaded) {
return (
<View style={{ flex: 1, justifyContent: 'center' }}>
<ActivityIndicator size='large' />
</View>
);
}
return (
<ListView
enableEmptySections
dataSource={this.dataSource}
renderRow={this.renderRow}
/>
);
}
}
Is there a way around this? I've been debugging this forever.

Answer 1

Assuming that your MapScreen is registered in the navigator,
you need to pass the navigation prop to your Items Component
renderRow = (employee) => { // For binding with this
return <Items employee={employee} navigation={this.props.navigation} />;
}
and in your Items.js
onRowPress = () => {
const {navigation} = this.props
navigation.navigate('review');
}

Answer 2

There are actually many similar duplicates to this question already, but it'll be faster to just answer than dig up one that has the exact same error.
Your MapScreen component presumably has access to the navigation prop given that you setup your root navigator correctly and use it as a screen. However, your Items component does not have access to the navigation prop as it's not being passed into it either as a HOC or a prop. This is one reason why onRowPress is not working.
To fix this, either:
pass navigation (or navigate) down as a prop so Items has access to it. Then access it with this.props.navigation in onRowPress, or
bubble up onRowPress such that it becomes a prop that you pass down into Items. That way, you can define it in MapScreen instead where you have access to the navigation prop.
Your onRowPress needs to be fixed as well. You are attempting to destructure navigation out of thin air. You need to pass something in to be destructured or do the destructuring of props within the function.
Also, ListView has been deprecated so unless you are on an old version of React Native, you shouldn't be using it. Use FlatList or SectionList instead depending on your needs.