React Native Navigation

Installation

To use the navigation, we need to install the required packages in your React Native project:

npm install @react-navigation/native

React Navigation is made up of some core utilities and those are then used by navigators to create the navigation structure in your app. In addition the libraries above you also need to add some additional libraries such as

npm install react-native-screens react-native-safe-area-context

In a web browser, you can link to different pages using an anchor (<a>) tag. When the user clicks on a link, the URL is pushed to the browser history stack.

React Navigation's native stack navigator provides a way for your app to transition between screens and manage navigation history. here's the additional liblary you'll need before moving to other pages

npm install @react-navigation/native-stack

after the requirement is already installed in our project, we can start to coding.

How to use

in these case we use two page screen that called with HomeScreen and DetailScreen. both of them, have a button for navigate to each page.

example of Home Screen

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

example of Detail Screen

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

the navigation prop is passed in to every screen component in the native stack navigator, the .navigate() is a function to call name of the route. navitagion.navigate('Home') , home is name of route that we are define in stack. see the full code below