react native navigation example

Example 1: install react native navigation

npm install @react-navigation/stack 
npm install @react-navigation/native --save

Example 2: react navigation react native

### ISNTALATION

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

### core dependencies

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

### stack navigation
yarn add @react-navigation/stack

Example 3: navigation in react native

import { useNavigation } from '@react-navigation/native';

const navigation = useNavigation();
navigation.navigate('WallScreen')

Example 4: react native navigation

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

Example 5: Difference in push and navigate in react Navigation

The Push action adds a route on top of the stack and navigates forward to it. This differs from navigate in that navigate will pop back to earlier in the stack if a component is already mounted there. Push will always add on top, so a component can be mounted multiple times.

We can take Instagram for example;

Consider navigating to a user's profile. Then you can check user's followers and then you can navigate to their profile's too. If you do this same actions with only navigate action, when you click on an user's profile from the followers list screen will navigate to the previous profile but if you use push it will push a new screen to the stack and show the correct profile. This way you can goBack to the first screen.