1

I'm trying to use react navigation. But when I click on the button to navigate, nothing happens. I'm new to React Native.

App.js:

function App() {
  const Stack = createStackNavigator();


  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

HomeScreen.js

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

DetailScreen.js:

function DetailsScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
    </View>
  );
}

When I click in "GO TO DETAIL" nothings happends Navigation

What can be the problem?

EDIT: I think that the problem could be from the emulator, maybe I dont "click" correctly on the button

Lmao12233
  • 61
  • 1
  • 1
  • 15
mark
  • 59
  • 1
  • 6
  • It's working for me, are you sure you imported the right things? `import {createStackNavigator} from '@react-navigation/stack'` and `import {NavigationContainer} from '@react-navigation/native'` – Lmao12233 Jan 19 '21 at 12:03
  • export the functions if they are on another file – Ozan Apr 17 '21 at 19:16

2 Answers2

0

Using react-native 0.69 and emulator Pixel 4 API 33, same happened. The solution for me.

  • Close your app in the emulator: In my case, square button and swipe up the app.
  • Open again and try clicks!
  • Thumbup is it work
EdU
  • 71
  • 4
0

Button works as intended in the code so I would recommend:

  1. Close your metro instance and then your emulator
  2. npm cache clean --force
  3. npm run android or npm run ios in case you work with ios.
sorraimi.rivas
  • 46
  • 4