Tab bar background style properties not applied when tabBarPosition is 'top'

[kylethebaker]

Version

• react-native-router-flux v4.0.0-beta25
• react-native v0.51

Expected behaviour

When the tabBarPosition is set to 'top, activeBackgroundColor and inactiveBackgroundColor should be applied, just as they are when tabBarPosition is set to 'bottom'.

Actual behaviour

The background colors are the default blue when the tab bar is on the top, but the tint colors still apply.

Steps to reproduce

1. Create a tabs scene
2. Apply background styles
3. Set tabBarPosition to 'top'

[kylethebaker]

I have been able to reproduce this in an empty project using the latest version of React Native Router Flux with a simple Tabs component. I have also been unable to reproduce this on a simple project using vanilla React Navigation, so it appears to me at the moment that this is a bug with Router Flux.

I've created a Proof Of Concept repo here where you can reproduce this bug: https://github.com/kylethebaker/router-flux-tabs-poc

You can run both the Router Flux and React Navigation applications, changing the topPosition property to see how they each behave.

You will find that Router Flux doesn't respect the activeBackgroundColor or inactiveBackgroundColor property when tabPosition is top, but React Navigation does.

[kylethebaker]

I've found a work around for this problem, though I'm not really sure at what layer of the stack the bug occurs on.

It looks like Router Flux looks at the tabBarPosition and creates either a TabBarTop or TabBarBottom component which then gets passed to the React Navigation TabNavigator constructor as a tabBarComponent property (see the code here).

React Navigation on the other hand uses a default tabBarComponent based on the platform (TabBarTop for android, TabBarBottom for ios). Meaning that if you don't explicitly pass a tabBarComponent it will always use TabBarTop on android or TabBarBottom on ios regardless of what tabBarPosition is set to. So if you pass tabBarPosition: top on ios you will get a TabBarBottom component that appears on the top (see the code here).

As a work around to get styling to apply to the top tabs I need to pass: {tabBarPosition: 'top', tabBarComponent: TabBarBottom } where TabBarBottom is imported from react-navigation;

So I'm not sure if React Navigation should be basing it's default tab bar (either TabBarTop or TabBarBottom) based on the tabBarPosition rather than the platform, or if the modules are just oddly named and should instead be TabBarAndroid and TabBarIOS.

I'm thinking too the issue may be due to the fact that TabBarTop actually comes from an external module that React Navigation pulls in (react-native-tab-view) and this external module doesn't understand the styling properties used by Router Flux and React Navigation.

I'm going to open up a companion issue on React Navigation concerning this and see if I can get clarification.

[aksonov]

Please try to reproduce it with Example project and latest version 4.0.0-beta.40. Feel free to open if the issue still exists

[talakoski]

Thanks @kylethebaker for demystifying the logic :) My goal was to make a top bar with same background color for both inactive and active tabs and an indicator bottom line for active tab. After some time reading issues here and react-navigation I came up below solution. Hopefully this is helpful for others who are looking solution for the same problem.

import { Router, Stack, Scene, Tabs } from 'react-native-router-flux';
import { TabBar } from 'react-native-tab-view';

<Tabs
    key="my_tabs"
    navBar={MyContainer}
    tabBarPosition="top"
    labelStyle={{
        fontSize: 14,
        fontWeight: "bold",
        color: "white"
    }}
    indicatorStyle={{
        backgroundColor: "white",
        height: 4
    }}
    jumpToIndex={() => {/* this needs to be declared to avoid warning...*/ }}
    tabBarComponent={(props) =>
        <TabBar {...props}
            style={{
                backgroundColor: "red"
            }}
        />
    }
>
    <Scene
        title="One"
        key="one"
        hideNavBar={true}
        component={OneContainer} />
    <Scene
        title="Two"
        key="two"
        hideNavBar={true}
        component={TwoContainer} />
    <Scene
        title="Three"
        key="three"
        hideNavBar={true}
        component={ThreeContainer} />
</Tabs>

Versions:
react-native-router-flux 4.0.6
react-native 0.55.3