How to add a dummy icon on the tab bar of React Native Router Flux?

Question

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>

Answer 1

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. 😉