React Native navigation doesn't render component after changing the route

Node.JS 0
Viewed 34

I created this simple React Native app from scratch but I am having trouble getting simple stacked navigation to work. I don't get any console exception but what happens is the page doesn't change. It still renders the same home component.

Setup:

export default function Index() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen
          name="Home"
          component={Home} options={{
            title: "overview"
          }} />
        <Stack.Screen name="About" component={About} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Home component:

export function Home() {
  return (
    <View style={styles.container}>
      <Text>Welcome!</Text>

      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home Screen</Text>
        <Button
          title="Go to About"
          onPress={() => {
            navigation.navigate('About')
          }}
        />
      </View>
    </View>
  );
}

Initial page:

enter image description here

After clicking on go to about page:

enter image description here

react-navigation react-native
1 Answers

try importing the navigation from props as the following and retest:

export function Home({navigation}) {
  return (
    <View style={styles.container}>
      <Text>Welcome!</Text>

      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home Screen</Text>
        <Button
          title="Go to About"
          onPress={() => {
            navigation.navigate('About')
          }}
        />
      </View>
    </View>
  );
}

And if this doesn't solve your problem or that's how you already have done it but didn't write all the code then please show all your code, as well as the About screen code

Azzam Michel0
Related