React-native-navigation: mergeOptions does not work on leftButtonColor and rightButtonColor

[robrechtme]

Issue Description

Applying mergeOptions with a new leftButtonColor or rightButtonColor does not change the colors of the buttons.
However, when the original button is passed in the mergeOptions, the color does change.

Steps to Reproduce / Code Snippets / Screenshots

This is a simplified version which can help you reproducing the issue:

const Screen = ({ componentId }) => {

  const changeButtonColor = () => {
    Navigation.mergeOptions(componentId, {
      topBar: {
        leftButtonColor: 'blue', // this should turn the button blue, but it doesn't
      },
    })
  }

  return (
    <View>
      <Button label="Change button color" onPress={changeButtonColor} />
    </View>
  );
}

Screen.options = {
  topBar: {
    leftButtons: [
      {
        id: 'LEFT',
        icon: require('../../img/clear.png'),
      },
    ],
    leftButtonColor: 'red', // <--
  },
}

export default Screen;

It is also easily testable in the ButtonsScreen of the playground. Make sure you remove the color prop on the individual buttons.

---

Environment

• React Native Navigation version: 7.1.0
• React Native version: 0.63.2
• Platform(s) (iOS, Android, or both?): both
• Device info (Simulator/Device? OS version? Debug/Release?): Tested on Android 11 and iOS 14 (Simulator)

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you believe the issue is still relevant, please test on the latest version and report back. Thank you for your contributions.

[robrechtme]

Still an issue.

[pribeh]

Experiencing the same.

[swabbass]

@robrechtme @pribeh
Thx for the report:] I'm suggesting meanwhile to use OptionsProcessor, set default options for buttons example/

For now, we are working on a fix you can see draft #6882.