I am trying to navigate to another page using react-navigation
but it keeps displaying the same error, here is my code ,I'm using expo :
Homepage.js
import React, { useState } from 'react';
import { StyleSheet, Text, View, SafeAreaView, FlatList, TouchableOpacity } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
export default function HomePage({navigation}) {
return (
<View >
<SafeAreaView>
<TouchableOpacity onPress = {() => {
navigation.navigate('Details')}}>
</TouchableOpacity>
</SafeAreaView>
</View>
);
}
App.js
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
import { useState } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import * as React from 'react';
import Homepage from './Homepage'
import Details from './Details'
const Stack = createNativeStackNavigator();
export default function App({navigation}) {
return (
<View style={styles.container}>
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
name="Homepage"
component={Homepage}
/>
<Stack.Screen
name="Details"
component={Details}
/>
</Stack.Navigator>
</NavigationContainer>
<TouchableOpacity
style={styles.Touchable1}
onPress={({navigation}) => navigate('Home')}
>
<Text style={styles.text1}>
Home
</Text>
</TouchableOpacity>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
Touchable1: {
width: "40%",
height: "20%",
margin: 10,
backgroundColor: "gray",
marginVertical: 400,
},
text1: {
fontWeight: 'bold',
fontSize: 18,
width: 300,
marginTop: 60,
marginHorizontal: 50,
}
});
Details.js
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default function DetailsPage({navigation}) {
return (
<View>
<Text>Hello</Text>
</View>
);
}
const styles = StyleSheet.create({
});
CodePudding user response:
First - you try to navigate outside the navigation container
Second - You have screen Homepage, but try to navigate to Home screen(this screen do not exist)
I suggest you want to navigate from Details screen to HomePage
export default function App({navigation}) {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
name="Homepage"
component={Homepage}
/>
<Stack.Screen
name="Details"
component={Details}
/>
</Stack.Navigator>
</NavigationContainer>
);
}
export default function DetailsPage({navigation}) {
return (
<View>
<Text>Hello</Text>
<TouchableOpacity
style={styles.Touchable1}
onPress={({navigation}) => navigate('Homepage')}
>
<Text style={styles.text1}>
Navigate to Home
</Text>
</TouchableOpacity>
</View>
);
}