Install React Navigation: In order to use React Navigation, you need to install it. You can install it using npm or yarn.
npm install @react-navigation/native
or
yarn add @react-navigation/native
Install Dependencies:
You have to install the dependencies for the type of navigation you want to use. For example, if you want to use Stack Navigation
, you need to install the following dependencies:
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
or
yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
If you want to use Tab Navigation
, you need to install the following dependencies:
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view @react-navigation/bottom-tabs
or
yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view @react-navigation/bottom-tabs
Import necessary classes:
After installing dependencies, you need to import necessary classes from the @react-navigation/native
and react-native
modules.
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { View } from 'react-native';
Create Navigation Stack:
Now, you can create your navigation stack. You can create a stack navigator using createStackNavigator
method.
const Stack = createStackNavigator();
const NavigationStack = () => {
return (
<Stack.Navigator>
// Add Screens Here
</Stack.Navigator>
);
}
In the above code, we have created a Stack Navigator
using createStackNavigator
. We have also created a NavigationStack
component which is responsible for rendering the different screens of the app.
Create Screen Components:
Now, you can create your screen components.
const HomeScreen = () => {
return (
<View>
// Add Home Screen UI Components Here
</View>
);
}
const SettingsScreen = () => {
return (
<View>
// Add Settings Screen UI Components Here
</View>
);
}
Add Screens to Navigation Stack:
After creating the screen components, you can add them to your navigation stack.
const NavigationStack = () => {
return (
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Settings" component={SettingsScreen} />
</Stack.Navigator>
);
}
In the above code, we have added HomeScreen
and SettingsScreen
components to our NavigationStack
.
Wrap your App with Navigation Container:
Lastly, you need to wrap your app with the NavigationContainer
component.
const App = () => {
return (
<NavigationContainer>
<NavigationStack />
</NavigationContainer>
);
}
In the above code, we have wrapped our NavigationStack
component with the NavigationContainer
component. This allows us to navigate between different screens in our app.
That's it! You have now successfully replaced the React Native screen with React Navigation in your app.
Please start posting anonymously - your entry will be published after you log in or create a new account. This space is reserved only for answers. If you would like to engage in a discussion, please instead post a comment under the question or an answer that you would like to discuss
Asked: 2023-07-11 00:34:24 +0000
Seen: 10 times
Last updated: Jul 11 '23
How can one ensure that sub-classes have uniform method parameters in TypeScript?
How can the calculation of matrix determinant be performed using CUDA?
How can code repetition be prevented when using (box)plot functions?
When I attempt to generate a database, why does the azure-cosmos-emulator become unresponsive?
What steps can I take to prevent my webpage from slowing down when all parts of a div are displayed?