import { createBottomTabNavigator } from 'react-navigation-tabs';
const TabNavigator = createBottomTabNavigator({
  Home: {
    screen: HomeScreen,
    navigationOptions: {
      title: 'Home',
    },
  },
  Profile: {
    screen: ProfileScreen,
    navigationOptions: {
      title: 'User Profile',
    },
  },
});

import { createBottomTabNavigator } from 'react-navigation-tabs';
const TabNavigator = createBottomTabNavigator({
  Home: {
    screen: HomeScreen,
    navigationOptions: {
      tabBarLabel: ({ focused }) => (
        <Text style={{ color: focused ? 'red' : 'black' }}>Home</Text>
      ),
    },
  },
  Profile: {
    screen: ProfileScreen,
    navigationOptions: {
      tabBarLabel: ({ focused }) => (
        <Text style={{ color: focused ? 'red' : 'black' }}>User Profile</Text>
      ),
    },
  },
});

import { createBottomTabNavigator } from 'react-navigation-tabs';
const TabNavigator = createBottomTabNavigator(
  {
    Home: {
      screen: HomeScreen,
    },
    Profile: {
      screen: ProfileScreen,
    },
  },
  {
    tabBarComponent: CustomTabBar,
  }
);
// CustomTabBar.js
import React from 'react';
import { View, Text } from 'react-native';
const CustomTabBar = ({ navigation }) => {
  const { routes, index } = navigation.state;

  return (
    <View style={{ flexDirection: 'row' }}>
      {routes.map((route, i) => (
        <Text key={route.key} style={{ color: i === index ? 'red' : 'black' }}>
          {route.routeName}
        </Text>
      ))}
    </View>
  );
};