[V3] options:sideMenu:enabled: false overwritten to true on pan gesture

[Royce]

sideMenu.enabled flag overwritten when opening/closing menu.

On iOS, the flags to control whether the side menus are enabled or disabled is reset to true when a pan gesture (to open the menu) occurs.

Steps to Reproduce / Code Snippets / Screenshots

With the following setup. Both menu's disabled...

      Navigation.setRoot({
        root: {
          sideMenu: {
            id: 'RootLayoutId',
            options: {
              // The options are optional, but makes the bug more obvious.
              sideMenu: {
                left: { enabled: false },
                right: { enabled: false },
              },
            },
            left: { component: { name: 'MenuScreen' } },
            right: { component: { name: 'MenuScreen' } },
            center: { component: { name:'MainScreen' } },
          },
        },
      });

Then, triggered off a button or something, we explicitly enable one (and disable the other) of the two menu's:

      Navigation.mergeOptions("RootLayoutId", {
        sideMenu: {
          left: { enabled: true }, 
          right: { enabled: false }  // ** Need to set this too to get the bug.
        }
      });

1. Swipe left (should open menu). Now close it again.
2. Swipe right (should not open menu)... but it does.

The problem.

The function SideMenuPresenter.applyOptions contains the following code, and is called when we Navigation.setRoot, but also when SideMenuController.panGestureCallback is triggered.

[sideMenuController side:MMDrawerSideLeft enabled:[withDefault.sideMenu.left.enabled getWithDefaultValue:YES]];
[sideMenuController side:MMDrawerSideRight enabled:[withDefault.sideMenu.right.enabled getWithDefaultValue:YES]];

The getWithDefaultValue:YES part means that enabled keeps getting set to true. No good!

Workaround / hack.

Wrap an if around these lines of code.
Royce@8d2b20c

But this may have side effects that I am not considering.

---

Environment

• React Native Navigation version: 3.1.2 (also 3.0.0)
• React Native version: 0.60.5
• Platform(s) (iOS, Android, or both?): both, but iOS fixed by 3.1.2-snapshot.490

[guyca]

@Royce Could you please try version 3.1.2-snapshot.490 and let me know if there are any issues?

[Royce]

@guyca I have updated to 3.1.2-snapshot.490 and can confirm the problem has gone away on iOS. Thanks!

[guyca]

Reopened as this seems to be a problem on Android now 😕

[Royce]

In SideMenuPresenter applyLockMode treats enable being undefined as true, So we have to be very careful that it's not undefined when it shouldn't be.

    private void applyLockMode(SideMenuRootOptions options) {
        int leftLockMode = options.left.enabled.isTrueOrUndefined() ? DrawerLayout.LOCK_MODE_UNLOCKED : DrawerLayout.LOCK_MODE_LOCKED_CLOSED;
        sideMenu.setDrawerLockMode(leftLockMode, Gravity.LEFT);

        int rightLockMode = options.right.enabled.isTrueOrUndefined() ? DrawerLayout.LOCK_MODE_UNLOCKED : DrawerLayout.LOCK_MODE_LOCKED_CLOSED;
        sideMenu.setDrawerLockMode(rightLockMode, Gravity.RIGHT);
    }

applyLockMode is called by SideMenuPresenter.applyChildOptions which is called by SideMenuController.applyChldOptions

    @Override
    public void applyChildOptions(Options options, ViewController child) {
        super.applyChildOptions(options, child);
        presenter.applyChildOptions(resolveCurrentOptions());
        performOnParentController(parentController ->
                ((ParentController) parentController).applyChildOptions(this.options, child)
        );
    }

Looking at resolveCurrentOptions leads us to ParentController.resolveCurrentOptions. Setting a breakpoint here (during a pan gesture, perhaps) show that the initialOptions, which contain sidemenu.left.enable = false etc., are not being transferred to the copy of the child options (i.e. the left menu view) which has enable = null etc.

    public Options resolveCurrentOptions() {
	    if (CollectionUtils.isNullOrEmpty(getChildControllers())) return initialOptions;
        return getCurrentChild()
                .resolveCurrentOptions()
                .copy()
                .withDefaultOptions(initialOptions);
    }

And thus the side menu / drawers are unlocked when they shouldn't be.

[Royce]

Hey @guyca I figured out where the problem occurs (see above comment) and have two possible solutions (see #5459, #5460), both of these solutions solved the problem for me but may not line up with the intention of the existing code.

[guyca]

Thanks for looking into this one @Royce !
I merged one of the PRs and added another minor fix, available in 3.1.2-snapshot.493

[Royce]

3.1.2-snapshot.493 has introduced a new problem. Demo:

function start() {
  registerScreens();
  Navigation.events().registerAppLaunchedListener(async () => {
    setDefaultOptions();

    Navigation.setRoot({
      root: {
        sideMenu: {
          id: "RootLayoutId",
            options: {
              // The options are the implicit defaults. So, not required.
              sideMenu: {
                left: { enabled: true },
                right: { enabled: true },
              },
            },
          left: { component: { name: Screens.SideMenuLeft, id: "LEFT" } },
          right: { component: { name: Screens.SideMenuRight, id: "RIGHT" } },
          center: {
            stack: {
              children: [{ component: { name: Screens.SideMenuCenter } }]
            }
          }
        }
      }
    });
  }
}

Then programatically open one menu (and close it), then open the other....

Navigation.mergeOptions("RootLayoutId", { sideMenu: { left: { visible: true } } });

Swipe it close, or whatever.... then:

Navigation.mergeOptions("RootLayoutId", { sideMenu: { right: { visible: true } } });

The problem:

Both menu's become visible! (Only the right should become visible.)

[Royce]

The above demo can be played with in this branch of the playground app: https://github.com/Royce/react-native-navigation/tree/demo-sticky-sidemenu-visible

And this tweak to SideMenuOptions.java makes the problem go away.

public void mergeWithDefault(SideMenuOptions defaultOptions) {
     // Just need to forget the old visible flag. Like this, maybe.
    //if (!visible.hasValue()) visible = defaultOptions.visible;
    if (!animate.hasValue()) animate = defaultOptions.animate;
    if (!enabled.hasValue()) enabled = defaultOptions.enabled;
    if (!height.hasValue()) height = defaultOptions.height;
    if (!width.hasValue()) width = defaultOptions.width;
}