Как добавить индикатор боредера в TabNavigator реагирующей навигации?

Question

Я пытаюсь установить индикатор нижней границы в активном состоянии, такой как у меня на добавленном изображении.Я попытался добавить границу с помощью activeTabStyle, который не работает.

activeTabStyle: {
 backgroundColor: 'white',
 borderBottomWidth: 4,
 borderColor: '#6C1D7C'
}

Как это исправить?

const DashboardTabNav = createBottomTabNavigator({
  User: HomeScreen,
  Home: HomeScreen,
  History: SettingsScreen,
  Cart: SettingsScreen
},
{
  defaultNavigationOptions: customTabs,
  animationEnabled: true,
  swipeEnabled: true,
  tabBarPosition: 'bottom',
  tabBarOptions: {
    activeTintColor: '#6C1D7C',
    inactiveTintColor: '#000000',
    style:{
      shadowColor: 'rgba(58,55,55,0.1)',
      shadowOffset: { width: 0, height: 0 },
      shadowOpacity: 1,
      shadowRadius: 15,
      elevation: 3,
      borderTopColor: 'transparent',
      backgroundColor:'#fff',
      borderTopLeftRadius: 20,
      borderTopRightRadius: 20
    },
    activeTabStyle: {
      backgroundColor: 'white',
      borderBottomWidth: 4,
      borderColor: '#6C1D7C'
    }
  },
});