React Native Navigation

You can navigate between screens using your components' navigation prop. As an example, pressing the "Go to Details" button will take you to the DetailsScreen.

Utilize yarn or npm to install react-navigation and its dependencies.

npm install @react-navigation/native @react-navigation/stack
yarn add @react-navigation/native @react-navigation/stack

Create a navigation menu in the main application file.

App.js

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './screens/HomeScreen';
import DetailsScreen from './screens/DetailsScreen';

const Stack = createStackNavigator();

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

export default App;

You can define screens (components) such as HomeScreen and DetailsScreen.

HomeScreen.js

import React from 'react';
import { View, Text, Button } from 'react-native';

const HomeScreen = ({ navigation }) => {
  return (
    <View>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
};

export default HomeScreen;

DetailsScreen.js

import React from 'react';
import { View, Text } from 'react-native';

const DetailsScreen = () => {
  return (
    <View>
      <Text>Details Screen</Text>
    </View>
  );
};

export default DetailsScreen;