React Native
Navigations
Creating Navigation Pages Mechnism in React
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
▰
Don't worry too much about this for now, it'll become clear
soon enough!
▰
To frontload the installation work, let's also install and
configure dependencies used by most navigators, then we
can move forward with starting to write some code.
2
Installing Dependencies
▰
Install the required packages in your React Native project
npm install @react-navigation/native
▰
Installing dependencies into an Expo managed project
expo install react-native-screens react-native-safe-area-context
▰
The libraries we've installed so far are the building blocks and shared
foundations for navigators, and each navigator in React Navigation
lives in its own library. To use the native stack navigator, we need to
install
npm install @react-navigation/native-stack
3
Create Stack Navigator
Create stack Navigator:
import {NavigationContainer} from
"@react-navigation/native“
Add the a component below the importings
function HomeScreen(){
return(
<view><Text>Home Screen</Text></view>
import { createNativeStackNavigator }
from '@react-navigation/native-stack';
)
}
4
Creating a Native Stack Navigator
Let's add a second screen to our native stack navigator and configure the Home screen to render
first:
function DetailScreen(){
return(
<View><Text>Detail Screen</Text></View>
)
}
5
Creating a Native Stack Navigator
Now our stack has two routes, a Home route and a Details route. A route can be specified by using
the Screen component.
The Screen component accepts a name prop which corresponds to the name of the route we will
use to navigate, and a component prop which corresponds to the component it'll render.:
const Stack = createNativeStackNavigator()
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name=“Details" component={DetailScreen} />
</Stack.Navigator>
</NavigationContainer>
);
6
Creating a Native Stack Navigator
▰
Now let’s create a navigation button into the home screen
function HomeScreen({navigation}){
return(
<View><Text>Home Screen</Text>
<Button title="Go Detail" onPress={() => navigation.navigate('Details')} />
</View>
)
}
7
npx expo install react-native-web@~0.18.7 react-dom@18.0.0 @expo/webpack-config@^0.17.0
Command for installing react native web dependencies to run your app in a browser