How to move from one screens to another?

React Navigation is used for managing the presentation and transition between screens. Here we are discussing about the react navigation 5.X

React navigation is born from the react native community. It provides us the feature to move/navigate from one screen to another just by few lines of code.

Let’s create a new project with the name of your choice, you can skip Step 1 and 3 if you want to work on any existing project.

Create a new React Native project
```
react native init <Project name>
```

Now install react navigation

npm install --save @react-navigation/native

Install its dependencies if its a bare react native project

npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

There are many type of react navigation; here we are discussing about stack navigator. so install react-navigation stack module
```
npm install --save @react-navigation/stack
```

Now lets suppose we have two screens Login screen and Home screen. so when user will click on login screen it will lend to Home screen. Now let create stack for these two screens.

<NavigationContainer> 
    <Stack.Navigator> 
      <Stack.Screen name="Login" component={LoginScreen}/> 
      <Stack.Screen name="Home" component={HomeScreen}/> 
    </Stack.Navigator> 
 </NavigationContainer>


Here is the whole code,but i will encourage you to write it at your own.

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

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
const Stack = createStackNavigator();

function LoginScreen({navigation}){
  return (
    <View style={{paddingTop: 10, paddingLeft: 10}}>
       <TouchableHighlight onPress={()=>{ navigation.navigate('Home') }}>
         <Text> Login </Text>
       </TouchableHighlight>
    </View>
  );
}

function HomeScreen({navigation}){
  return (
   <View style={{paddingTop: 10, paddingLeft: 10}}>
     <Text> Welcome </Text>
     
     <TouchableHighlight onPress={()=>{ navigation.navigate('Login') }}>
       <Text> Signout </Text>
     </TouchableHighlight> 
   </View>
  );
}

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

export default App;

Output:

Great work guys 🙂 I hope you have learned something new today. If you want me to write on any specific topic. Please do write in comment section i will definitely try to include it. Thank you Keep Learning, Happy Learning 🙂

Leave a Reply Cancel reply