Navigation with React Navigation

Building multi-screen apps with navigation

2 min read | Mobile App Development

⭐

Want the full learning experience?

Get structured courses, certificates, projects, and instructor support with LabsICT Pro.

Explore Pro Courses

Navigation with React Navigation

Most mobile apps have multiple screens. React Navigation is the most popular navigation library for React Native, providing stack, tab, and drawer navigators.

Navigation Types


  ┌─────────────────────────────────────────────────┐
  │         Navigation Patterns                     │
  ├─────────────────────────────────────────────────┤
  │                                                  │
  │  Stack Navigator (push/pop)                     │
  │  ┌─────┐  ┌─────┐  ┌─────┐                    │
  │  │Screen│→│Screen│→│Screen│                    │
  │  │  1   │←│  2   │←│  3   │                    │
  │  └─────┘  └─────┘  └─────┘                    │
  │                                                  │
  │  Tab Navigator (bottom tabs)                    │
  │  ┌─────────────────────────────┐               │
  │  │                             │               │
  │  │       Content Area          │               │
  │  │                             │               │
  │  ├────┬────┬────┬────┬────────┤               │
  │  │Home│Chat│Add │Noti│ Profile│               │
  │  └────┴────┴────┴────┴────────┘               │
  │                                                  │
  │  Drawer Navigator (side menu)                   │
  │  ┌───────┬─────────────────────┐               │
  │  │ Menu  │                     │               │
  │  │ Home  │     Content         │               │
  │  │ Chat  │                     │               │
  │  │Settings                     │               │
  │  └───────┴─────────────────────┘               │
  │                                                  │
  └─────────────────────────────────────────────────┘

Setting Up React Navigation


# Install dependencies
npm install @react-navigation/native @react-navigation/stack
npm install react-native-screens react-native-safe-area-context

Example: Stack Navigator


import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { View, Text, Button } from 'react-native';

const Stack = createStackNavigator();

const HomeScreen = ({ navigation }) => (
  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
    <Text style={{ fontSize: 24 }}>Home Screen</Text>
    <Button
      title="Go to Details"
      onPress={() => navigation.navigate('Details')}
    />
  </View>
);

const DetailsScreen = ({ navigation }) => (
  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
    <Text style={{ fontSize: 24 }}>Details Screen</Text>
    <Button
      title="Go Back"
      onPress={() => navigation.goBack()}
    />
  </View>
);

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;