react native navigator code example
Example 1: react navigation react native
npm install @react-navigation/native --save
yarn add @react-navigation/native
expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view
yarn add @react-navigation/stack
Example 2: react navigation
//dependencies
npm install @react-navigation/native
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
//for stack navigator,drawer,material bottom tab,react-native paper
npm install @react-navigation/stack @react-navigation/drawer @react-navigation/material-bottom-tabs react-native-paper
Example 3: navigation in react native
import { useNavigation } from '@react-navigation/native';
const navigation = useNavigation();
navigation.navigate('WallScreen')
Example 4: react navigation react native
// USAGE
// In App.js in a new project
import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
function HomeScreen() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
</View>
);
}
const Stack = createStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;
Example 5: 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 6: react navigation
npm install @react-navigation/native