Using the react-native-ui-kitten components BottomNavigation and BottomNavigationTab in my app running on iPhone (expo v2.21.2, react-native v0.57.1 ), there is a horizontal line on the top of the currently selected BottomNavigationTab which contains both the title and an icon.
From my app:
Test B tab is selected and has the unwanted horizontal line above the icon.
From the docs:
The BottomNavigation docs show that when both the title and icon are defined, there is no horizontal line on the selected tab. But this is not the case for me.
Question: How can the horizontal line be removed?
My Code:
import { View } from 'react-native';
import { createBottomTabNavigator, createStackNavigator, createSwitchNavigator, createAppContainer } from 'react-navigation';
import { BottomNavigation, BottomNavigationTab, BottomNavigationProps, Avatar } from 'react-native-ui-kitten';
class BottomNavigationShowcase extends React.Component {
...
render () {
return (
<BottomNavigation
selectedIndex={this.state.selectedIndex}
onSelect={this.onTabSelect}
>
<BottomNavigationTab title='Test A' icon={this.renderIconA} />
<BottomNavigationTab title='Test B' icon={this.renderIconB} />
<BottomNavigationTab title='Test C' icon={this.renderIconC} />
<BottomNavigationTab title='Test D' icon={this.renderIconD} />
</BottomNavigation>
);
}
}
const TabNavigator = createBottomTabNavigator(
{
TestA: TestAScreen,
TestB: TestBScreen,
TestC: TestCScreen,
TestD: TestDScreen
}, {
initialRouteName: 'TestA',
tabBarComponent: BottomNavigationShowcase
}
)
const RootNavigator = createSwitchNavigator({
Main: TabNavigator,
}, {
initialRoute: "Main"
})
