React-native-navigation: TopBar buttons not rendered when waitForRender is set to true on iOS

[rosskhanas]

Issue Description

Seems like mergeOptions does not work well with waitForRender: true.

Without showModal: { waitForRender: true }

With showModal: { waitForRender: true }

Steps to Reproduce / Code Snippets / Screenshots

1. Set default options:

Navigation.setDefaultOptions({
    animations: {
      push: {
        waitForRender: true,
      },
    },
  });

1. Open any modal page with top bar buttons added by mergeOptions.

---

Environment

• React Native Navigation version: 6.3.2
• React Native version: 0.61.5
• Platform(s) (iOS, Android, or both?): iOS
• Device info (Simulator/Device? OS version? Debug/Release?): Simulator, 13.2.2

[rosskhanas]

Seems like wrapping Navigation.mergeOptions into requestAnimationFrame can be used as a workaround.

requestAnimationFrame(() => {
  requestAnimationFrame(() => {
    Navigation.mergeOptions({ ... })
  });
});

_Edit:_

It helps, but not always. Sometimes it needs more delay 😢

[nimerfarahty]

i have the same issue and it seems i should wait before doing mergeOptions

[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.

[rosskhanas]

Not stale.

[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.

[stale[bot]]

The issue has been closed for inactivity.

[danilobuerger]

@rosskhanas Where are you calling mergeOptions from? Could you please provide some more code on how to reproduce this with the playground app?

[rosskhanas]

@danilobuerger thank you for looking at this.

So I have a function which opens the modal:

modalOpen({
    name: "suite.ModalOrganizationInformationUpdate",
    options: {
      topBar: {
        leftButtons: [
          {
            id: NAVBAR_BUTTON_INFORMATION_MAIN_UPDATE_CANCEL,
            text: "Cancel",
          },
        ],
        rightButtons: [
          {
            enabled: false,
            id: NAVBAR_BUTTON_INFORMATION_MAIN_UPDATE_SAVE,
            text: "Save",
          },
        ],
        title: {
          text: "Edit Information",
        },
      },
    },
    passProps: {
      pageClose: modalClose,
      topBarButtonLeftIconAndroid,
      topBarButtonLeftTextClose,
      topBarButtonRightIconSaveAndroid,
      topBarButtonRightTextSave,
      ...args,
    },
  });

Then in the ModalOrganizationInformationUpdate I have a componentDidMount method implemented:

componentDidMount() {
    Navigation.events().bindComponent(this);
    BackHandler.addEventListener("hardwareBackPress", this.onHardwareBackPress);
    const { componentId } = this.props;
    Navigation.mergeOptions(componentId, {
      topBar: {
        rightButtons: [
          {
            enabled: true,
            id: NAVBAR_BUTTON_INFORMATION_MAIN_UPDATE_SAVE,
            text: "Save",
          },
        ],
      },
    });
  }

So I just open the page with a Save button disabled, then I set the enabled: true but it is still disabled.

[danilobuerger]

Is there a reason you are doing this via Navigation.mergeOptions instead of static options?

[rosskhanas]

I just simplified the existing code to provide a simpler example. In a full implementation, there is extra validation(like if the user has permission to edit the page or if all required fields are filled) that is stored in a local state. I guess it is not possible to use state values in static options... Am I right?

[danilobuerger]

Afaik only props are passed.

[guyca]

@rosskhanas You can execute whatever logic you want in static options, there's an example in the docs.

But regardless this should be fixed. Thanks for looking into this @danilobuerger 🙇

[danilobuerger]

@rosskhanas could you please try with #6702 . Does that solve all your issues?

[rosskhanas]

@rosskhanas could you please try with #6702 . Does that solve all your issues?

Could be I messed up and failed to apply changes correctly, but I got a build error:

[danilobuerger]

Doesn't really say much... don't forget to run pod install after applying the patch and optionally to clean the build dir with xcode.

[rosskhanas]

@danilobuerger is this helpful?

[danilobuerger]

It looks like you applied the patch onto an older version? The patch will probably only work on the current master.

[rosskhanas]

@danilobuerger I tried again, seems like your PR fixes the bug! 🥳