https://reactnavigation.org/docs/getting-started
Types:
- Stack Navigation : for moving between pages
- Drawer Navigation : for navigation drawer
- Tab Navigation : for bittom tab navigation
implementing information hierarchy with native navigators
React Native does not come with a built-in navigation library and recommends using expo-router, which is a file system-based navigation library
Table of Contents
- Installation
- For React Navigation
- Hello React Navigation
- How to USE Stack / Tab
- For Tab Navigation
- For Drawer Navigation
Installation
0. Installing Dependencies
npm install @react-navigation/native
npm install @react-navigation/stack
1. using navigation
import { useNavigation } from '@react-navigation/native';
export default function Test() {
const navigation = useNavigation(); // Get the navigation object
return (
<TouchableOpacity
style={styles.button}
onPress={() => navigation.navigate('AnotherScreen')} // Navigate to another screen />
)In this case, ensure that you have set up react-navigation and added AnotherScreen to your navigation stack.
2. external links using Linking
import { TouchableOpacity, Linking } from 'react-native';
<TouchableOpacity
onPress={() => Linking.openURL('https://www.example.com')}
// Open external link
>For React Navigation
https://reactnavigation.org/docs/getting-started
npm install @react-navigation/native
npx expo install react-native-screens react-native-safe-area-context
(when have expo)
Wrapping your app in NavigationContainer
Now, we need to wrap the whole app in NavigationContainer. Usually you’d do this in your entry file, such as index.js or App.js:
import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
export default function App() {
return (
<NavigationContainer>{/* Rest of your app code */}</NavigationContainer>
);
}Hello React Navigation
For Stack Navigation
npm install @react-navigation/native-stack
Make sure to install all libraries and dependencies for React Navigation first.
Note: Install first stack navigation and all the libraries & dependenciess for react navigation
import { createNativeStackNavigator } from '@react-navigation/native-stack';
const Stack = createNativeStackNavigator();
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} />
</Stack.Navigator>do this in App.js
To hide the header
screenOptions={{ headerShown: false }}
like this
<Stack.Navigator screenOptions={{ headerShown: false }}>
<Stack.Screen name="Home" component={Home} />
<Stack.Screen name="Categories" component={Categories} />
</Stack.Navigator>Now Using it
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
function HomeScreen( {navigation} ) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
<Button
title="Go to Details"
onPress={() => navigation.navigate('Details') }
/>
</View>
);
}How to USE Stack / Tab
import { useNavigation } from '@react-navigation/native';
export default function BottomTab() {
const navigation = useNavigation();
return (
<View style={styles.container}>
<Iconi icon='home' text='Home' onPress={() => navigation.navigate('Home')} />For Tab Navigation
https://reactnavigation.org/docs/tab-based-navigation
install these first npm install @react-navigation/bottom-tabs
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
const Tab = createBottomTabNavigator();
export default function App() {
return (
<NavigationContainer>
<Tab.Navigator screenOptions={{ headerShown: false }}>
<Tab.Screen name="HomeStack" component={HomeStackScreen} />
<Tab.Screen name="SettingsStack" component={SettingsStackScreen} />
</Tab.Navigator>
</NavigationContainer>
);
}Do this in app.js, put these <Tab between return (…….)
To hide the header
screenOptions={{ headerShown: false }}
Jumping between tabs
Switching from one tab to another has a familiar API — navigation.navigate.
function HomeScreen({ navigation }) {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Home!</Text>
<Button
title="Go to Settings"
onPress={() => navigation.navigate('Settings')}
/>
</View>
);
}
function SettingsScreen({ navigation }) {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Settings!</Text>
<Button title="Go to Home" onPress={() => navigation.navigate('Home')} />
</View>
);
}For Drawer Navigation
install these first
npm install @react-navigation/drawer
npx expo install react-native-gesture-handler react-native-reanimated (when have expo)
API Definition
To use this drawer navigator, import it from @react-navigation/drawer:
import { createDrawerNavigator } from '@react-navigation/drawer';
const Drawer = createDrawerNavigator();
function MyDrawer() {
return (
<Drawer.Navigator>
<Drawer.Screen name="Feed" component={Feed} />
<Drawer.Screen name="Article" component={Article} />
</Drawer.Navigator>
);
}NAVIGATOR:
*StackA
*ScreenC
*ScreenD
*StackB
*ScreenI
*StackE
*ScreenF
*StackG
*ScreenJ
*ScreenH
Now
