? React Native Tab Navigation

? Quick Overview

Tab Navigation in React Native allows users to switch between different screens using tabs. It is commonly used for bottom navigation bars and top tab layouts in mobile applications.

? Key Concepts

• Tabs represent parallel screens
• Each tab maintains its own navigation state
• Usually implemented using @react-navigation
• Supports bottom tabs and material top tabs

? Syntax / Theory

React Native Tab Navigation is implemented using navigators. A navigator defines how screens are arranged and how transitions happen. The most common is the Bottom Tab Navigator.

? Code Example(s)

// Import required navigation components
import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { View, Text } from 'react-native';

function HomeScreen() {
  return (
    <View>
      <Text>Home Screen</Text>
    </View>
  );
}

function SettingsScreen() {
  return (
    <View>
      <Text>Settings Screen</Text>
    </View>
  );
}

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

? Live Output / Explanation

? Interactive / Visual Explanation

Use the simulator below to understand how the Tab.Navigator manages screens. Notice how clicking a tab switches the view immediately while keeping the bottom bar fixed.

Think of tabs as parallel containers. Each tab loads its own screen while keeping others in memory for fast switching.

? Use Cases

• Social media apps (Home, Search, Profile)
• E-commerce apps (Shop, Cart, Orders)
• Settings-heavy applications
• Dashboard-style apps