Home » React Native » React Native Navigation

React Native Navigation

Full Guide to React Native for Andriod and IOS

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

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.

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

https://reactnavigation.org/docs/nesting-navigators

Scroll to Top