A tab bar at the bottom of the screen (Home, Search, Account, ...) is one of the most common navigation patterns in mobile apps. React Native itself has no built-in navigation – we use the standard library @react-navigation/bottom-tabs.

1. Description

createBottomTabNavigator() creates a navigator that registers multiple screens as tabs – each tab gets a name, a target component, and optionally an icon.

2. Short example

const Tab = createBottomTabNavigator();

<Tab.Navigator>
  <Tab.Screen name="Home" component={HomeScreen} />
  <Tab.Screen name="Account" component={AccountScreen} />
</Tab.Navigator>

3. Complete project

npx create-expo-app tab-navigation-demo
cd tab-navigation-demo
npx expo install @react-navigation/native @react-navigation/bottom-tabs
npx expo install react-native-screens react-native-safe-area-context

import { View, Text, StyleSheet } from 'react-native';

function HomeScreen() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>???? Home Screen</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
  text: { fontSize: 20 },
});

export default HomeScreen;

import { View, Text, StyleSheet } from 'react-native';

function AccountScreen() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>???? My Account</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
  text: { fontSize: 20 },
});

export default AccountScreen;

import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import HomeScreen from './screens/HomeScreen';
import AccountScreen from './screens/AccountScreen';

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator screenOptions={{ headerShown: true }}>
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Account" component={AccountScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

4. Explanation

• NavigationContainer – wraps the ENTIRE navigation structure, exactly once per app, no matter how many navigators you combine.
• createBottomTabNavigator() – creates a matched pair of components (Tab.Navigator, Tab.Screen), similar to createNativeStackNavigator() for stack navigation.
• screenOptions={{ headerShown: true }} – applies to ALL tabs at once; individual tabs can override it via their own options on Tab.Screen.
• name="Home" – the tab's internal identifier, also shown as the visible tab title by default.

5. Outputs