React Navigation for multiple pages

 In React Native, React Navigation is a popular library used for managing navigation in your application. It provides several navigation solutions, including Stack Navigator, Tab Navigator, Drawer Navigator, and more. Here's a basic example of setting up navigation for multiple pages using React Navigation:

1. First, make sure you have React Navigation installed in your project. You can install it via npm or yarn:

bash

npm install @react-navigation/native

or

bash

yarn add @react-navigation/native

2. Install dependencies for the navigator you want to use. For example, if you want to use Stack Navigator:

bash

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

or

bash

yarn add react-native-screens react-native-safe-area-context

3. Now, let's create some screens for navigation. For this example, let's create two screens: HomeScreen and DetailScreen.

jsx

// HomeScreen.js
import React from 'react';
import { View, Text, Button } from 'react-native';

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

export default HomeScreen;

jsx

// DetailScreen.js
import React from 'react';
import { View, Text } from 'react-native';

const DetailScreen = () => {
  return (
    <View>
      <Text>This is the Detail Screen</Text>
    </View>
  );
};

export default DetailScreen;

4. Now, let's set up the navigation structure in your main component.

jsx

// App.js
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './HomeScreen';
import DetailScreen from './DetailScreen';

const Stack = createStackNavigator();

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

export default App;

5. Finally, make sure to render your App component in your index.js file or wherever you have your root component.

jsx

// index.js
import React from 'react';
import { AppRegistry } from 'react-native';
import App from './App';
import { name as appName } from './app.json';

const Main = () => <App />;

AppRegistry.registerComponent(appName, () => Main);

Now you should have a basic navigation setup with two screens: HomeScreen and DetailScreen. When you press the button on the HomeScreen, it should navigate to the DetailScreen. You can extend this navigation structure further by adding more screens and configuring the navigator according to your app's requirements.

Browse More Articles

Tweet

Written by Ragesh

Experienced Webdesigner and SEO Consultant Specialist from Cochin, Kerala with over three years of experience in the field of Search Engine Optimization, SEO and Internet Marketing