How do I implement a tab navigator in React Navigation v6?

How do I implement a tab navigator in React Navigation v6?

To implement a tab navigator 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 and @react-navigation/bottom-tabs. You can do this using npm or yarn.

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 passing options to the Tab.Navigator and Tab.Screen components, such as tabBarStyle, tabBarActiveTintColor, and more.