want to add vertical line between tabs in createMeterialTopTabNavigator

Question

Hy. I am replicating an app. I am using createMeterialTopTabNavigator. The rest of functionality is working fine. I want to show a vertical line between tabs. but I have no idea where to get started. Please help me. I want the tabs to show a similar line like the one in the image.

here is my code

import { Text, View} from 'react-native';
import Constants from 'expo-constants';

import {
  createBottomTabNavigator,
  createMaterialTopTabNavigator
} from "react-navigation-tabs";
import{createAppContainer,NavigationContainer} from "react-navigation";
import ArenaCashScreen from './Screens/ArenaCashScreen';
import ArenaPointsScreen from './Screens/ArenaPointsScreen';
import UnknownCashScreen from './Screens/UnknownCashScreen';



const MainTabs = createMaterialTopTabNavigator(
      { 
        CurrentList: {
          screen: ArenaCashScreen,
          navigationOptions: {
            title: 'Arena Cash (AC)',
          },
        },
        OthersList: {
          screen: ArenaPointsScreen,
          navigationOptions: {
            title: 'Arena Points (AP)',
          },
        },
        thirdlistt: {
          screen: UnknownCashScreen,
          navigationOptions: {
            title: 'Unknown Cash (UC)',
          },
        },
      },
      {
        tabBarOptions: {
                activeTintColor:'white',
                inactiveTintColor:'white',
                indicatorStyle: {
                    backgroundColor: 'orange',
                  },
              style: {
                backgroundColor: 'black',
                elevation:0, // remove shadow on Android
                shadowOpacity: 0, // remove shadow on iOS,
                borderWidth:1,
                borderColor:'black'
              },
          showLabel: true,
          showIcon: false,
        },
      },
    );
    
const AppContainer2 = createAppContainer(MainTabs);

export default AppContainer2;

Answer 1

You can do this by adding the css style to the tabs.

For this you just open the inspect by clicking F12 and find out the class used for the styling for showing the title and div containing these titles.

Once you find the class, add the border-left by applying the other required sytle like color and width as well as border style.