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"
})
Just try to add a property to the BottomNavigation
-component: appearance='noIndicator'
. Looks like we've forgotten display this ability in the documentation. Hope this helps.