npm install @react-navigation/native
Install dependencies (some of these may be unnecessary, depending on the project)
expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view
App.js
import 'react-native-gesture-handler'import { StatusBar } from 'expo-status-bar'import React from 'react'import {StyleSheet, SafeAreaView} from 'react-native'import MainStackNavigator from './navigation/MainStackNavigator'const App = () => { return ( <SafeAreaView style={styles.appContainer}> <MainStackNavigator /> <StatusBar backgroundColor="#0000ff" /> </SafeAreaView> )}const styles = StyleSheet.create({ appContainer: { flex: 1, }})export default AppMainStackNavigator.js
import * as React from 'react'import {Platform} from 'react-native'import {NavigationContainer} from '@react-navigation/native'import {createStackNavigator} from '@react-navigation/stack'import HomeScreen from '../screens/HomeScreen'import ProfileScreen from '../screens/ProfileScreen'import SettingsScreen from '../screens/SettingsScreen'const Stack = createStackNavigator()function MainStackNavigator() { return ( <NavigationContainer> <Stack.Navigator initialRouteName='Home' screenOptions={{ gestureEnabled: true, headerStyle: { backgroundColor: '#aaa' }, headerTitleStyle: { fontWeight: 'bold' }, headerTintColor: '#ffd700', headerBackTitleVisible: false, mode: (Platform.OS === 'ios') ? 'modal' : 'card' }} headerMode='float'> <Stack.Screen name='Home' component={HomeScreen} options={{title: 'Home Screen'}} /> <Stack.Screen name='Profile' component={ProfileScreen} options={{title: 'Profile Screen'}} /> <Stack.Screen name='Settings' component={SettingsScreen} options={{title: 'Settings'}} /> </Stack.Navigator> </NavigationContainer> )}export default MainStackNavigator
Comments