React-native-navigation: BottomTab selectedTextColor changes to blue when Navigation.showModal is called.

[Hugocaminada]

Issue Description

Hello, I am working on an app that has Cyan as the bottomTab selectedTextColor and selectedIconColor. We noticed that sometimes randomly two of the three bottomTabs had their selectedTextColor changed to a darker blue color. (I think the IOS default blue color).
After some looking around, I noticed that this happened whenever we call a screen with Navgiation.showModal. When we then come back to a screen that has bottomTabs, the non-selected two bottom tabs have their selected color changed.

Steps to Reproduce / Code Snippets / Screenshots

We set the default options like this in app.js:

 Navigation.setDefaultOptions({
    bottomTab: {
      iconColor: Color.DarkGreen, //#1c4448
      selectedIconColor: Color.Cyan, //#3BF3DC
      textColor: Color.DarkGreen,
      selectedTextColor: Color.Cyan,
      fontFamily: 'Roboto',
      fontSize: 10,
      overrideBackPress: true,
      translucent: true,
      visible: false,
      drawBehind: true,
    }
})

Then whenever we show a modal, we do:

Navigation.showModal({
    component: {
      name: 'Login',
    },
  }),

If we then come back to a screen with bottomTabs where, for instance, the right tab is selected, that one looks fine, but the middle and left tabs have their selected color changed to blue.

How it should look:

How it looks after Navigation.showModal gets called:

---

Environment

• React Native Navigation version: 2.27.9
• React Native version: 0.59.9
• Platform: iOS
• Device info: It seems to happen on all iPhone devices I tested. Simulator and Real Device.

[Stacyadam]

@Hugocaminada having the exact same issue and am on similar versions as you. Were you able to find a solution?

• React Native Navigation version: 2.27.9
• React Native version: 0.59.10

[Hugocaminada]

@Stacyadam

Unfortunately not. In the meantime we've upgraded to React Native 0.61.5 and React Native Navigation 3.0.0, but we still have the issue.

[Stacyadam]

@Hugocaminada Bummer. That was going to be the next path we were going to head down.

[tautvilas]

I have used this workaround to solve the issue for now:

  componentDidMount() {
    this.bottomTabEventListener = Navigation.events().registerBottomTabSelectedListener(() => {
        // workaround: https://github.com/wix/react-native-navigation/issues/5782
        Navigation.mergeOptions(this.props.componentId, {
          bottomTab: {
            selectedTextColor: 'rgb(103,57,255)',
          },
        });
      });
  }

  componentWillUnmount() {
    if (this.bottomTabEventListener) {
      this.bottomTabEventListener.remove();
    }
  }

This code has to be added on tabs screens and it resets the color of tab each time the tab is pressed

[emilioheinz]

Any other workaround on this?

[Stacyadam]

Still hacky but the best solution I have found so far has been

1. Assigning ids to each stack that has a tab associated with it
2. Setting Navigation.events().registerBottomTabSelectedListener({ selectedTabIndex }) at the top level where Navigation.events().registerAppLaunchedListener() is getting set.
3. Mapping each tabIndex to it's associated stackId
4. Calling Navigation.mergeOptions() with that stackId and then setting the bottomTab options again.

Something like,

const BOTTOM_TAB_OPTIONS = {
    iconColor: darkGrey,
    textColor: darkGrey,
    selectedIconColor: darkBlue,
    selectedTextColor: darkBlue
};

const getStackIdByTabIndex = selectedTabIndex => {
    switch (selectedTabIndex) {
        case 0:
            return 'stackOne';
        case 1:
            return 'stackTwo';
        case 2:
            return 'stackThree';
        case 3:
            return 'stackFour';
        case 4:
            return 'stackFive';
        default:
            return null;
    }
};

Navigation.events().registerBottomTabSelectedListener(({ selectedTabIndex }) => {
    const selectedTabId = getStackIdByTabIndex(selectedTabIndex);
    Navigation.mergeOptions(selectedTabId, {
        bottomTab: BOTTOM_TAB_OPTIONS
    });
});

[emilioheinz]

@Stacyadam I don't know why, but when adding backgroundColor to bottomTabs the color does not change.

In my root view:

Navigation.setDefaultOptions({
      bottomTab: {
        iconColor: UNACTIVE_BOTTOM_TAB_COLOR,
        textColor: UNACTIVE_BOTTOM_TAB_COLOR,
        selectedIconColor: ACTIVE_BOTTOM_TAB_COLOR,
        selectedTextColor: ACTIVE_BOTTOM_TAB_COLOR,
      },
      bottomTabs: {
        titleDisplayMode: 'alwaysShow',
        backgroundColor: BACKGROUND_COLOR,
      },
})

[Stacyadam]

@emilioheinz Not experiencing that same issue. I'd suggest opening up a separate issue and providing the required information to the issue template to get some help.

[emilioheinz]

@Stacyadam I mean, that solved my problem.
When I have said that the color doesn't change I was trying to say that the color doesn't return to his default color (blue).

[Hugocaminada]

@emilioheinz Yes! Can confirm this is working. Just setting the background color to white "fixes" the problem. Seems like the easiest solution for now. Thanks!

[Stacyadam]

@emilioheinz Nice! Sorry I completely misunderstood you initially. Have no idea why that works but it's a way easier solution. Good find!

[emilioheinz]

I'm just thinking about the code of this lib, what are those guys doing to a dismiss modal action change the footer text and a backgroundColor prevent this to happen (???).

[yogevbd]

Doesn't reproduce in latest RNN 6.4.0.
Sorry for the inconvenience, in iOS 13 styles act a bit different and it took a while for us to align with the new guidelines.
We are working on preventing such styling issues by adding Snapshot tests.

[dorthwein]

Heads up - when changing orientation this still happens in the latest snap.

I created an issue here https://github.com/wix/react-native-navigation/issues/6111

Reproduce - Set tabs correctly, -> rotate to landscape mode -> selected tab color will be blue.