undefined is not an object (evaluating '_this.props.navigation') Expo React Native - react-native

Question

I am getting undefined is not an object evaluating _this.props.navigation. Here is my code. I want to use Flatlist to call the screen 'PlaceorderScreen.js' number of times from the component 'NearbyLSP.js' present in the 'HomeScreen.js'. Also I had referred many solutions for the above problem but yet I didn't get how to get through it. I am a beginner in react-native, So I had used expo for app development.
HomeScreen.js
import React from "react";
import {
View,
Text,
StyleSheet,
SafeAreaView,
TextInput,
Platform,
StatusBar,
ScrollView,
TouchableOpacity,
Dimensions,
Animated,
} from "react-native";
import Icon from 'react-native-vector-icons/Ionicons'
import Category from './Category'
import Expressmode from './Expressmode'
import { FlatList } from "react-native-gesture-handler";
import NearbyLSP from "./NearbyLSP";
const { width } = Dimensions.get('window')
const data = [
{id:'1',name:'LSP1',phone:'1234',email:'abc#gmail.com'},
{id:'2',name:'LSP2',phone:'0234',email:'abc2#gmail.com'},
{id:'3',name:'LSP3',phone:'2234',email:'abc3#gmail.com'}
]
const renderList = ((item) =>{
return <TouchableOpacity
onPress={()=> this.props.navigation.navigate('PlaceOrder')}
activeOpacity={0.7}>
<NearbyLSP name={item.name}/>
</TouchableOpacity>
})
export default class HomeScreen extends React.Component {
componentDidMount() {
this.scrollY = new Animated.Value(0)
this.startHeaderHeight = 80
this.endHeaderHeight = 50
if (Platform.OS == 'android') {
this.startHeaderHeight = 100 + StatusBar.currentHeight
this.endHeaderHeight = 70 + StatusBar.currentHeight
}
this.animatedHeaderHeight = this.scrollY.interpolate({
inputRange: [0, 50],
outputRange: [this.startHeaderHeight, this.endHeaderHeight],
extrapolate: 'clamp'
})
this.animatedOpacity = this.animatedHeaderHeight.interpolate({
inputRange: [this.endHeaderHeight, this.startHeaderHeight],
outputRange: [0, 1],
extrapolate: 'clamp'
})
this.animatedTagTop = this.animatedHeaderHeight.interpolate({
inputRange: [this.endHeaderHeight, this.startHeaderHeight],
outputRange: [-30, 10],
extrapolate: 'clamp'
})
this.animatedMarginTop = this.animatedHeaderHeight.interpolate({
inputRange: [this.endHeaderHeight, this.startHeaderHeight],
outputRange: [50, 30],
extrapolate: 'clamp'
})
}
render() {
return (
<SafeAreaView style={{ flex: 1 }}>
<View style={{ flex: 1 }}>
<Animated.View style={{ height: this.animatedHeaderHeight, backgroundColor: 'white', borderBottomWidth: 1, borderBottomColor: '#dddddd' }}>
<View style={{
flexDirection: 'row', padding: 10,
backgroundColor: 'white', marginHorizontal: 10,
shadowOffset: { width: 0, height: 0 },
shadowColor: 'black',
shadowOpacity: 0.2,
elevation: 1,
marginTop: null
}}>
<Icon name="ios-search" size={25} style={{ marginRight: 10 ,marginTop:5 , opacity:0.6}} />
<TextInput
underlineColorAndroid="transparent"
placeholder="Find LSP"
placeholderTextColor="grey"
style={{ flex: 1, fontWeight: '700', backgroundColor: 'white' }}
/>
</View>
</Animated.View>
<ScrollView
scrollEventThrottle={16}
onScroll={Animated.event(
[
{ nativeEvent: { contentOffset: { y: this.scrollY } } }
]
)}
>
<View style={{ flex: 1, backgroundColor: 'white', paddingTop: 20 }}>
<Text style={styles.text}>
Laundry Service Provider Type
</Text>
<View style={{ height: 130, marginTop: 20 }}>
<ScrollView
horizontal={true}
showsHorizontalScrollIndicator={false}
>
<TouchableOpacity onPress={()=> this.props.navigation.navigate('PlaceOrder')} activeOpacity={0.7}><Category name="Dry Clean" /></TouchableOpacity>
<TouchableOpacity onPress={()=> this.props.navigation.navigate('PlaceOrder')} activeOpacity={0.7}><Category name="Iron"/></TouchableOpacity>
<TouchableOpacity onPress={()=> this.props.navigation.navigate('PlaceOrder')} activeOpacity={0.7}><Category name="Dry Clean + Iron" /></TouchableOpacity>
</ScrollView>
</View>
<View style={{ marginTop: 40}}>
<Text style={styles.text}>
Find Nearby LSP
</Text>
<Text style={{ fontWeight: '100', marginTop: 10,paddingHorizontal: 20 }}>
Verified LSP Providers
</Text>
<View style={{ marginTop: 20, paddingHorizontal: 15
}}>
<FlatList
data={data}
renderItem={({item})=>{
return renderList(item)
}}
keyExtractor={item=>item.id}
navigation={this.props.navigation}
/>
</View>
</View>
</View>
<View style={{ marginTop: 40 }}>
<Text style={styles.text}>
Express Mode
</Text>
<View style={{ paddingHorizontal: 20, marginTop: 20, flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'space-between' }}>
<Expressmode width={width}
name="LSP1"
type="Dry Clean"
price={82}
rating={4}
/>
<Expressmode width={width}
name="LSP2"
type="Iron + Dry Clean"
price={82}
rating={4}
/>
<Expressmode width={width}
name="LSP3"
type="Iron"
price={82}
rating={4}
/>
</View>
</View>
</ScrollView>
</View>
</SafeAreaView>
);
;
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center"
},
text: {
fontSize: 24,
fontWeight:'700',
paddingHorizontal: 20
}
});
'HomeScreen.js' contains another component where I had successfully used the navigation to navigate to 'PlaceorderScreen.js'. But when I call this navigation inside Flatlist it gives the error.
NearbyLSP.js
import React from "react";
import { View, Text, StyleSheet, TouchableOpacity, Dimensions, Image } from "react-native";
import { Card } from "react-native-paper" ;
const { width } = Dimensions.get('window')
export default class NearbyLSP extends React.Component {
render() {
return (
<View>
<Card style={styles.mycard}>
<View style={{ width: width - 40, height: 200}} >
<Image
style={{ flex: 1, height: null, width: null, resizeMode: 'cover', borderRadius: 5, borderWidth: 1, borderColor: '#dddddd' }}
source={require('../assets/a.jpeg')}
/>
<Text>{this.props.name}</Text>
</View>
</Card>
</View>
);
}
}
const styles = StyleSheet.create({
mycard: {
margin: 5
}
});
App.js
import React from "react";
import { createAppContainer, createSwitchNavigator , createBottomTabNavigator } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";
import LoadingScreen from "./screens/LoadingScreen";
import LoginScreen from "./screens/LoginScreen";
import SignupScreen from "./screens/SignupScreen";
import HomeScreen from "./screens/HomeScreen";
import AboutScreen from "./screens/AboutScreen";
import PastorderScreen from "./screens/PastorderScreen";
import TrackScreen from "./screens/TrackScreen";
import ProfileScreen from "./screens/ProfileScreen";
import PlaceorderScreen from "./screens/PlaceorderScreen";
import MapsScreen from "./screens/MapsScreen";
import NearbyLSP from "./screens/NearbyLSP";
import { Ionicons , MaterialIcons } from '#expo/vector-icons';
import * as firebase from "firebase";
const firebaseConfig = {
apiKey: "AIzaSyAhwjD3jodBg6JGJ7Oo72r7-m2T5wwPaUg",
authDomain: "a4project-2d896.firebaseapp.com",
databaseURL: "https://a4project-2d896.firebaseio.com",
projectId: "a4project-2d896",
storageBucket: "a4project-2d896.appspot.com",
messagingSenderId: "181932238433",
appId: "1:181932238433:web:aa3f6fa3947976a8352c20",
measurementId: "G-SW6N6N8JYK"
};
firebase.initializeApp(firebaseConfig);
const HomeStack = createStackNavigator({
Home: HomeScreen,
NearbyLSP:NearbyLSP,
PlaceOrder:PlaceorderScreen
},
{
defaultNavigationOptions: {
title:'Home',
headerStyle: {
backgroundColor:'#12B2C2',
},
headerTintColor:'#fff',
headerTitleStyle:{
fontWeight:'bold'
}
}
})
const OrderStack = createStackNavigator({
Order: TrackScreen,
Maps: MapsScreen,
},
{
defaultNavigationOptions: {
title:'Orders',
headerStyle: {
backgroundColor:'#12B2C2',
},
headerTintColor:'#fff',
headerTitleStyle:{
fontWeight:'bold'
}
}
})
const PastorderStack = createStackNavigator({
Pastorder: PastorderScreen,
},
{
defaultNavigationOptions: {
title:'Pastorder',
headerStyle: {
backgroundColor:'#12B2C2',
},
headerTintColor:'#fff',
headerTitleStyle:{
fontWeight:'bold'
}
}
})
const ProfileStack = createStackNavigator({
Profile: ProfileScreen,
About: AboutScreen
},
{
defaultNavigationOptions: {
title:'Profile',
headerStyle: {
backgroundColor:'#12B2C2',
},
headerTintColor:'#fff',
headerTitleStyle:{
fontWeight:'bold'
}
}
})
const AuthStack = createStackNavigator({
Login: LoginScreen,
Signup: SignupScreen
},
{
defaultNavigationOptions: {
headerStyle: {
backgroundColor:'#12B2C2',
},
headerTintColor:'#fff',
headerTitleStyle:{
fontWeight:'bold'
}
}
})
const myTabs= createBottomTabNavigator({
Home:HomeStack,
Orders:OrderStack,
Profile:ProfileStack,
Pastorder:PastorderStack
},
{
defaultNavigationOptions: ({ navigation })=> {
return {
tabBarIcon:({tintColor})=>{
const { routeName } = navigation.state;
let myicon
if(routeName=="Home"){
myicon='md-home'
return <Ionicons name={myicon} size={30} color={tintColor}/>
}else if(routeName=="Profile"){
myicon='md-person'
return <Ionicons name={myicon} size={30} color={tintColor}/>
}else if(routeName=="Orders"){
myicon='md-book'
return <Ionicons name={myicon} size={30} color={tintColor}/>
}else if(routeName=="Pastorder"){
myicon='library-books'
return <MaterialIcons name={myicon} size={30} color={tintColor}/>
}
}
};
}
});
export default createAppContainer(
createSwitchNavigator(
{
Loading: LoadingScreen,
Auth: AuthStack,
App: myTabs
},
{
initialRouteName: "Loading"
},
)
);

Answer 1

Just writing navigation={this.props.navigation} in Flatlist won't let you navigate to the desired screen. You have to create a Touchable component in the Flatlist and add the navigation logic into the onPress logic of this Touchable Component.
this.props.navigation is a collection of data and methods, if you need to navigate through screens you need to use this.props.navigation.navigate('PlaceOrder')} instead, this is the method that does the navigation for you. You can console.log(this.props.navigation) to understand better.
Refer to how navigation is implemented in this answer https://stackoverflow.com/a/45407626/8851276

Answer 2

The code within FlatList of 'HomeScreen.js' is modified as follows
<FlatList
data={data}
renderItem={this.rendeList}
keyExtractor={item=>item.id}
/>
and the renderList function which was outside the class component is transferred inside and modified as
renderList = ({ item }) => {
return (
<TouchableOpacity
onPress={()=> this.props.navigation.navigate('PlaceOrder')}
activeOpacity={0.7}>
<NearbyLSP name={item.name}/>
</TouchableOpacity>
);
};
Due to transferring the renderList function inside the class component, it gets access to the this.props and it can be used for navigation to new screen.