How do I implement tabs in a React Navigation app using TypeScript?

How do I implement tabs in a React Navigation app using TypeScript?

To implement tabs in a React Navigation app with TypeScript, you can use the createBottomTabNavigator function. First, install the necessary packages: @react-navigation/native and @react-navigation/bottom-tabs. Then, set up your navigator like this:

Can you show me a code example?

Sure! Here's a basic example:

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

const Tab = createBottomTabNavigator();

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

What if I want to customize the tab icons?

You can customize the tab icons by using the tabBarIcon option in the Tab.Screen component. For example:

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