How do I implement tab navigation in React Navigation v6?

How do I implement tab navigation in React Navigation v6?

To implement tab navigation in React Navigation v6, you need to install the necessary packages and set up your navigator.

What packages do I need to install?

You need to install @react-navigation/native, @react-navigation/bottom-tabs, and their dependencies like react-native-gesture-handler.

Can you show me a basic example?

Sure! Here's a simple example:

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

const Tab = createBottomTabNavigator();

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

export default function App() {
  return (
    <NavigationContainer>
      <MyTabs />
    </NavigationContainer>
  );
}

What if I want to customize the tab bar?

You can customize the tab bar by using the tabBarOptions prop in the Tab.Navigator and by providing custom tab bar icons.