Button disappears on Android after calling mergeOptions

[gwmccull]

🐛 Bug Report

Our app has a bottom tab layout with a side menu. One of the tabs has a More menu button that opens and closes the side menu with a leftButton that uses a custom component

In order to display the button, the screen has the layout in the options object, then we use a useEffect to link the onPress function to the button.

On iOS, this works as expected. But on Android, the button appears during the initial layout and then disappears when the useEffect is called

I was able to create a work around by using a unique id for the button that is generated each time the mergeOptions is called

This bug was introduced when we updated from 7.23.1-hotfix.1 to 7.25.0 but it also exists in 7.25.2

Have you read the Contributing Guidelines on issues?

yes

To Reproduce

simplified code

const TodayScreen: NavigationFunctionComponent = ({ componentId }) => {
  useTrackScreen(componentId);
  useNavigationTab(componentId);

  const isVisible = useSelector(selectIsSideMenuVisible);
  const dispatch = useDispatch();

  const onPress = useCallback(() => {
      // code to toggle the `isVisible` flag
    });
  }, [componentId, dispatch, isVisible]);

  useEffect(() => {
    Navigation.mergeOptions(componentId, {
      topBar: {
        leftButtons: [getMoreMenuButton(onPress)],
      },
    });
  }, [componentId]);

  return (
    <View style={styles.container}>
      <Today />
    </View>
  );
};

TodayScreen.options = {
  topBar: {
    visible: true,
    title: {
      component: {
        name: WORDMARK,
      },
    },
    leftButtons: [getMoreMenuButton()],
  },
  sideMenu: {
    left: {
      visible: false,
    },
  },
};

function getMoreMenuButton(onPress = noop): OptionsTopBarButton {
  /**
   * this is a hack for React Native Navigation on Android. Using mergeOptions
   * to update the More button with the same id, causes the button to disappear
   *
   * Using a unique id for each call of this function resolves the disappearing
   * button
   */
  const now = isAndroid() ? Date.now().toString() : "";
  return {
    id: `today.screen.more_menu.button${now}`,
    component: {
      name: GENERIC_BUTTON,
      passProps: {
        children: (
          <PAIcon
            name="menu"
            color={Colors.carbonGray900}
            size={25}
            style={styles.menuButton}
          />
        ),
        onPress,
      },
    },
  };
}

Expected behavior

The leftButton should not disappear

Actual Behavior

the leftButton disappears when we try to use mergeOptions to update it

Your Environment

• React Native Navigation version: 7.25.2
• React Native version: 0.66.3
• Platform(s) (iOS, Android, or both?): Android
• Device info (Simulator/Device? OS version? Debug/Release?): Simulator and device. Debug and release. Replicated on SDK 29 and several other user's phones (not sure which versions but probably several)

Reproducible Demo

(Paste the link to an example repo and exact instructions to reproduce the issue.)

Are you willing to resolve this issue by submitting a Pull Request?

• ✖️   Yes, I have the time, and I know how to start.
• ✅   Yes, I have the time, but I don't know how to start. I would need guidance.
• ✖️   No, I don’t have the time and I’m okay to wait for the community / maintainers to resolve this issue.

[RichardLindhout]

I have the same problem everything is white, strange thing is it's still clickable