My client wants to add the company logo in the middle of the tab bar. But it's just an image, not assigned with any page. It means that when you click on the logo, this should do nothing.
The issue is: Using React Native Router Flux, every item of the tab bar should be attached to a component and a click will perform a navigation to this component.
How to add an image on the tab bar that's don't do anything ?
<Tabs
tabs={true}
initial
tabBarStyle={{ backgroundColor: 'red' }}
showLabel={false}>
<Scene key='timer' hideNavBar={true} title='Timer' icon={TabIcon} component={Timer} />
<Scene key='settings' component={Settings} title='Settings' icon={TabIcon} />
<Scene key='LOGO' icon={TabIcon} /> --> It's not possible
<Scene key='graph' component={Graph} title='Graph' icon={TabIcon} />
</Tabs>
You can pass to Tabs custom bottom bar via tabBarComponent prop
Here is an example on git hub: https://github.com/Tabakharniuk/-react-native-examples-expo/tree/react-native-router-flux-custom-bottom-tab-navigator
Here is CustomTabBar component code example:
class CustomTabBar extends React.PureComponent {
render() {
const { state, navigate } = this.props.navigation;
const activeTabIndex = state.index;
return (
<View style={styles.container}>
{state.routes.map(({
key, routes,
}, index) => {
const Icon = routes[0].params.icon;
const { title } = routes[0].params;
const isActive = activeTabIndex === index;
if (key === 'LOGO') {
return <YourLogoComponent />;
}
return (
<TouchableOpacity key={key} onPress={() => navigate(key)} style={styles.tabItem}>
<Icon isActive={isActive} />
<Text style={isActive ? styles.labelActive : styles.label}>{title}</Text>
</TouchableOpacity>
);
})}
</View>
);
}
}
Hope that will help. 😉