Navigation with React Navigation

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;