How can I customize tabs in React Native?

How can I customize tabs in React Native?

You can customize tabs in React Native using libraries like React Navigation. Would you like a code example?

Yes, please provide a code example for customizing the tab bar.

Here's a simple example:

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

const Tab = createBottomTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator
      screenOptions={{
        tabBarStyle: { backgroundColor: 'blue' },
        tabBarActiveTintColor: 'white',
        tabBarInactiveTintColor: 'gray',
      }}
    >
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Settings" component={SettingsScreen} />
    </Tab.Navigator>
  );
}

This code customizes the tab bar's background color and active/inactive tint colors.

How do I add icons to the tabs?

You can add icons by using the tabBarIcon option in the screenOptions. Here's an example:

<Tab.Screen name="Home" component={HomeScreen} options={{
  tabBarIcon: ({ color, size }) => (
    <Icon name="home" color={color} size={size} />
  ),
}} />