React-native-navigation: [V3] [iOS] dismissModal function is resetting BottomTab textColor to blue

[manuhook]

Issue Description

On iOS when you dismiss a Modal, the textColor on bottomstabs is reset to the default blue color.

Steps to Reproduce / Code Snippets / Screenshots

You can repro this issue on the Playground App

1 - The textColor on Bottomtab is Purple.
2 - Go to the "Navigation" tab, openl and dimiss a Modal
3 - The textColor on Bottomtab is now Blue on the "Layouts" and "Options" tab.

No problem on V2.

---

Environment

• React Native Navigation version: 3.2.0
• React Native version: 0.61.1 and under
• Platform(s) (iOS, Android, or both?): iOS 13 and under

[pmogollons]

This also happens on v2.27.9 - RN version 0.61.1 - iOS 13

[SukhKalsi]

I can confirm this is happening on both v2.27.9 and v3.2.0 using RN 0.59.10

Any chance of this getting higher priority? This is quite a fundamental feature...

[jjfrutos]

I fixed using the didAppear listener. First I created a hook to manage:

export const useDidAppear = (handler, componentId) => {
  useEffect(() => {
    const listener = Navigation.events().registerComponentDidAppearListener(event => {
      const equalComponentId = event.componentId === componentId;
      if (equalComponentId) {
        handler(event);
      }

    })
    return () => listener.remove()
  })
}

Then in the component inside the tab:

useDidAppear(() => {
   Navigation.mergeOptions(componentId, {
      bottomTab: {
        iconColor: iconColor,
        textColor: textColor,
        selectedIconColor: selectedIconColor,
        selectedTextColor:selectedTextColor,
      }
    })
  }, componentId);

Hope it helps.

[Zhipan1]

Pushing a modal probably overwrites the layoutOptions which isn't reverted when it's dismissed. You can work around this by setting default colors:

Navigation.setDefaultOptions({
  bottomTab: {
    fontSize: 10,
    selectedFontSize: 10,
    selectedIconColor: COLORS.white,
    selectedTextColor: COLORS.white,
    iconColor: COLORS.greyMid,
    textColor: COLORS.greyMid,
  }
})

[manuhook]

Yes I'm already using Navigation.setDefaultOptions for bottomTab but even with that the textColor is overwrited.

[BoyanaKarzhilova]

This also happens on v2.26.5 - RN version 0.55 - iOS 13.2

[robertpaul01]

I found that this will not happen if you set:

    Navigation.setDefaultOptions({
      ...
      bottomTabs: {
        ...
        backgroundColor: BACKGROUND_COLOR,
      },
    });

Omitting the backgroundColor causes the problem.

[manuhook]

It's fixed on 4.0.4 :)

[pmogollons]

@manuhook Are you sure its working for you without the backgroundColor workaround?

I updated to 4.0.5 and cleaned the project but still having the same issue when not setting backgroundColor

[wbw20]

I am still seeing this issue on 4.0.4.

The only solution that reliably works for me is using componentDidAppear (similar to jjfrutos) to reset the bottom tab color. Unfortunately that requires a lot of capy-paste code and there is also a momentary flicker in the tab color when the component first appears.

[manuhook]

Yes my bad the problem is still there :(
However its seems now that I have only this bug when a non react-native-navigation modal is dismissed. For example when an AdMob interstitial is closed.

[Collin3]

It also appears to still be an issue when you dismiss a fullScreen react-native-navigation modal on iOS 13. I've noticed that on RN v0.61.5 and RNN v4.0.6

[guyca]

I'm unable to reproduce this in v5. @manuhook if this issue still reproduced with AdMob, can you please open a new issue and mention me? Thanks.