undefined is not an object (evaluating 'navigation.navigate') (Device) - reactjs

Question

const Home = ({navigation}) => {
const renderDiscoverItem = ({item}) => {
return (
<TouchableOpacity
onPress={() =>
navigation.navigate('Details', {
item: item,
})
}>
<ImageBackground
source={item.images}
style={[
styles.discoverItem,
{marginLeft: item.id === 'discover-1' ? 20 : 0},
]}
imageStyle={styles.discoverItemImage}>
<Text style={styles.discoverItemTitle}>{item.title}</Text>
<View style={styles.discoverItemLocationWrapper}>
<Entypo name="location-pin" size={18} color={colors.white} />
<Text style={styles.discoverItemLocationText}>{item.location}</Text>
</View>
</ImageBackground>
</TouchableOpacity>
);
};

Answer 1

There were 2 issues,
You were exporting directly Home in App.js which means Home is not wrapped inside any navigator, find below the corrected code for App.js
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import Home from './components/Home';
import Details from './components/Details';
import Liked from './components/Liked';
import Profile from './components/Profile';
import colors from './assets/colors/colors';
import Entypo from 'react-native-vector-icons/Entypo';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import {NavigationContainer} from '#react-navigation/native';
import {createStackNavigator} from '#react-navigation/stack';
import {createBottomTabNavigator} from '#react-navigation/bottom-tabs';
Entypo.loadFont();
MaterialCommunityIcons.loadFont();
const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();
const TabNavigator = () => {
return (
<Tab.Navigator
tabBarOptions={{
style: styles.tabBar,
activeTintColor: colors.orange,
inactiveTintColor: colors.gray,
showLable: false,
}}>
<Tab.Screen
name="Home"
component={Home}
options={{
tabBarIcon: ({color}) => (
<Entypo name="home" size={32} color={color} />
),
}}
/>
<Tab.Screen
name="Liked"
component={Liked}
options={{
tabBarIcon: ({color}) => (
<Entypo name="heart" size={32} color={color} />
),
}}
/>
<Tab.Screen
name="Profile"
component={Profile}
options={{
tabBarIcon: ({color}) => (
<MaterialCommunityIcons name="account" size={32} color={color} />
),
}}
/>
</Tab.Navigator>
);
};
const App = () => {
console.log('inside app')
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
name="TabNavigator"
component={TabNavigator}
options={{headerShown: false}}
/>
<Stack.Screen
name="Details"
component={Details}
options={{headerShown: false}}
/>
</Stack.Navigator>
</NavigationContainer>
);
};
const styles = StyleSheet.create({
tabBar: {
backgroundColor: colors.white,
borderTapLeftRedius: 20,
borderTopRightRadius: 20,
},
});
export default App;
Second mistake is the usage of useNavigation hook, it must be used as below in the corrected code,
import React from 'react';
import {
View,
Text,
StyleSheet,
Image,
ScrollView,
ImageBackground,
AppRegistry,
} from 'react-native';
import colors from '../assets/colors/colors';
import Feather from 'react-native-vector-icons/Feather';
import Entypo from 'react-native-vector-icons/Entypo';
import activitiesData from '../assets/data/activitiesData';
import discoverCategoriesData from '../assets/data/discoverCategoriesData';
import learnMoreData from '../assets/data/learnMoreData';
import discoverData from '../assets/data/discoverData';
import {SafeAreaView} from 'react-native-safe-area-context';
import profile from '../assets/images/profile.png';
import {FlatList, TouchableOpacity} from 'react-native-gesture-handler';
import { useNavigation } from '#react-navigation/native';
Feather.loadFont();
Entypo.loadFont();
const Home = () => {
const navigation = useNavigation();
const renderDiscoverItem = ({item}) => {
return (
<TouchableOpacity
onPress={() =>
navigation.navigate('Details', {
item: item,
})
}>
<ImageBackground
source={item.images}
style={[
styles.discoverItem,
{marginLeft: item.id === 'discover-1' ? 20 : 0},
]}
imageStyle={styles.discoverItemImage}>
<Text style={styles.discoverItemTitle}>{item.title}</Text>
<View style={styles.discoverItemLocationWrapper}>
<Entypo name="location-pin" size={18} color={colors.white} />
<Text style={styles.discoverItemLocationText}>{item.location}</Text>
</View>
</ImageBackground>
</TouchableOpacity>
);
};
const renderActivityItem = ({item}) => {
return (
<View
style={[
styles.activityItemWrapper,
{
marginLeft: item.id === 'activities-1' ? 20 : 0,
},
]}>
<Image source={item.image} style={styles.activityItemImage} />
<Text style={styles.activityItemText}>{item.title}</Text>
</View>
);
};
const renderLearnMoreItem = ({item}) => {
return (
<ImageBackground
source={item.images}
style={[
styles.learnMoreItem,
{
marginLeft: item.id === 'learnMore-1' ? 20 : 0,
},
]}
imageStyle={styles.learnMoreItemImage}>
<Text style={styles.learnMoreItemText}>{item.title}</Text>
</ImageBackground>
);
};
return (
<View style={styles.container}>
<ScrollView>
{/* Header */}
<SafeAreaView>
<View style={styles.menuWrapper}>
<Feather
name="menu"
size={32}
color={colors.black}
style={styles.menuIcon}
/>
<Image source={profile} style={styles.profileImage} />
</View>
</SafeAreaView>
{/* Discover */}
<View style={styles.discoverWrapper}>
<Text style={styles.discoverTitle}>Discover</Text>
<View style={styles.discoverCategoriesWrapper}>
<Text style={[styles.discoverCategoryText, {color: colors.orange}]}>
All
</Text>
<Text style={styles.discoverCategoryText}>Destinations</Text>
<Text style={styles.discoverCategoryText}>Cities</Text>
<Text style={styles.discoverCategoryText}>Experiences</Text>
</View>
<View style={styles.discoverItemsWrapper}>
<FlatList
data={discoverData}
renderItem={renderDiscoverItem}
keyExtractor={(item) => item.id}
horizontal
showsHorizontalScrollIndicator={false}
/>
</View>
</View>
{/* Activities */}
<View style={styles.activitiesWrapper}>
<Text style={styles.activitiesTitle}>Activities</Text>
<View style={styles.activitiesItemsWrapper}>
<FlatList
data={activitiesData}
renderItem={renderActivityItem}
keyExtractor={(item) => item.id}
horizontal
showsHorizontalScrollIndicator={false}
/>
</View>
</View>
{/* Learn More */}
<View style={styles.learnMoreWrapper}>
<Text style={styles.learnMoreTitle}>Learn More</Text>
<View style={styles.learnMoreItemsWrapper}>
<FlatList
data={learnMoreData}
renderItem={renderLearnMoreItem}
keyExtractor={(item) => item.id}
horizontal
showsHorizontalScrollIndicator={false}
/>
</View>
</View>
</ScrollView>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
color: colors.white,
},
menuWrapper: {
marginHorizontal: 20,
marginTop: 20,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
},
profileImage: {
width: 52,
height: 52,
borderRadius: 10,
},
discoverWrapper: {
// marginHorizontal: 20,
marginTop: 20,
},
discoverTitle: {
marginHorizontal: 20,
fontFamily: 'Lato-Bold',
fontSize: 32,
},
discoverCategoriesWrapper: {
marginHorizontal: 20,
flexDirection: 'row',
marginTop: 20,
},
discoverCategoryText: {
marginRight: 30,
fontFamily: 'Lato-Regular',
fontSize: 16,
color: colors.gray,
},
discoverItemsWrapper: {
paddingVertical: 20,
},
discoverItem: {
width: 170,
height: 250,
justifyContent: 'flex-end',
paddingHorizontal: 10,
paddingVertical: 15,
marginRight: 20,
},
discoverItemImage: {
borderRadius: 20,
},
discoverItemTitle: {
fontFamily: 'Lato-Bold',
fontSize: 18,
color: colors.white,
},
discoverItemLocationWrapper: {
flexDirection: 'row',
alignItems: 'center',
marginTop: 5,
},
discoverItemLocationText: {
marginLeft: 5,
fontFamily: 'Lato-Bold',
fontSize: 14,
color: colors.white,
},
activitiesWrapper: {
marginTop: 10,
},
activitiesTitle: {
marginHorizontal: 20,
fontFamily: 'Lato-Bold',
fontSize: 24,
color: colors.black,
},
activitiesItemsWrapper: {
paddingVertical: 20,
},
activityItemWrapper: {
justifyContent: 'flex-end',
alignItems: 'center',
marginRight: 20,
},
activityItemImage: {
width: 36,
},
activityItemText: {
marginTop: 5,
fontFamily: 'Lato-Bold',
fontSize: 14,
color: colors.gray,
},
learnMoreWrapper: {
marginTop: 10,
},
learnMoreTitle: {
marginHorizontal: 20,
fontFamily: 'Lato-Bold',
fontSize: 24,
color: colors.black,
},
learnMoreItemsWrapper: {
paddingVertical: 20,
},
learnMoreItem: {
width: 170,
height: 180,
justifyContent: 'flex-end',
marginRight: 20,
},
learnMoreItemImage: {
borderRadius: 20,
},
learnMoreItemText: {
fontFamily: 'Lato-Bold',
fontSize: 18,
color: colors.white,
marginHorizontal: 10,
marginVertical: 20,
},
});
export default Home;
Fully working code can be found here