[Android - RN 0.66.x] BottomTab icon and text randomly become white after selection

[39otrebla]

🐛 Bug Report

The BottomTab item icon and text suddenly become white (becoming invisible in a BottomTab with white background). Icons/labels become white randomly during the session (i.e. it may happen for just one, or two, or even all), and they never get back to their correct state until the next restart.

We cannot reproduce in a deterministic way, but it does happen in most of our sessions after some push/pop/showModal and showing/hiding the bottom tab. Also, it does happen more often if you include an orientation change in the usage session.

Have you read the Contributing Guidelines on issues?

Yes.

To Reproduce

Setup a BottomTab-based application with the following traits:

• icons are local assets imported with require(...)
• icons are the same for selected/normal states, i.e. only the tint gets changed

const BOTTOM_TAB_STYLE = {
  iconColor: COLORS.darkgray,
  textColor: COLORS.darkgray,
  fontSize: (IS_IOS && IS_TABLET) ? 16 : 10,
  selectedIconColor: COLORS.primary, // red
  selectedTextColor: COLORS.primary, // red
};

Navigation.setRoot({
    root: {
      bottomTabs: {
        children: [
          {
            // TAB 1 : Home
            stack: {
              children: [
                {
                  component: {
                    id: 'home',
                    name: 'home',
                    options: {
                      layout: {
                        orientation: IS_TABLET ? ['landscape'] : ['portrait'],
                      },
                      topBar: {
                        visible: false,
                      },
                      bottomTab: {
                        ...BOTTOM_TAB_STYLE,
                        text: 'Home',
                        icon: ICONS.tabHome,
                      },
                    },
                  },
                },
              ],
            },
          },
          {
            // TAB 2: ExampleTab
            stack: {
              children: [
                {
                  component: {
                    id: 'example',
                    name: 'example',
                    options: {
                      bottomTab: {
                        ...BOTTOM_TAB_STYLE,
                        text: 'Preferiti',
                        icon: ICONS.tabExample,
                      },
                      layout: {
                        orientation: IS_TABLET ? ['landscape'] : ['portrait'],
                      },
                      topBar: {
                        title: {
                          text: 'Example',
                          alignment: 'center',
                        },
                        animate: true,
                        visible: true,
                        drawBehind: false,
                      },
                    },
                  },
                },
              ],
            },
          },
        ],
        options: {
          bottomTabs: {
            titleDisplayMode: 'alwaysShow',
          },
        },
      },
    },
  })

Also add some random stacks in order to be able to push/pop/showModal some screens, and change bottom tab visibility here and there. If it does not happen, try rotating the screen to trigger the landscape mode, and then get back to portrait.

Expected behavior

All BottomTabs should work consistently.

Actual Behavior

Sooner or later, some of all tabs will become white after being selected. It does NOT happen upon selecting, but AFTER selecting.

Your Environment

• React Native Navigation version: 7.23.1
• React Native version: 0.66.1
• Platform(s) (iOS, Android, or both?): Android > 9
• Device info (Simulator/Device? OS version? Debug/Release?): Device and Emulator, both debug and release builds

[swabbass]

Thx for the report, can you kindly share a minimal project that can reproduce the issue? or try to reproduce it in our playground and share diff or a fork.

The playground has a similar case of bottom tabs with icons and texts, and I could not reproduce the issue.

[leejunhui]

Hi @39otrebla , I have the same issue.Did you figure out how to fix this?