React-native-navigation: [v2][Android] Side Menu closes automatically

[retyui]

Issue Description

You can see two cases in my code snippet:

Navigation.push(id, { /... scene + close left menu .../ })

---

Navigation.mergeOptions(id, { /... close left menu .../ })

Navigation.push(id, { /... scene .../ })


---

Something strange happening on Android when passing:

sideMenu: {
    left: {
      visible: false,
    },
  },

And then try to open menu

Steps to Reproduce / Code Snippets / Screenshots

It is code for reproduce this bag: https://gist.github.com/retyui/2d2417970f28f7a0cc5c7c8c140d367b

---

Environment

• React Native Navigation version: 2.13.1
• React Native version: 0.58.6
• Platform(s) (iOS, Android, or both?): Android
• Device info (Simulator/Device? OS version? Debug/Release?): Device \ Debug

[retyui]

https://github.com/wix/react-native-navigation/issues/4696

[enisinanaj]

call mergeOptions with the same id:

export const ProtectedViewNavigation = {
  sideMenu: {
    id: 'SideMenuContainer',
    left: {
      component: {
        id: "Drawer",
        name: "navigation.Drawer"
      }
    },
    center: {
      stack: {
        id: 'CenterStack',
        children: [
          {
            component: {
              id: 'HomeComponent',
              name: 'Home'
            }
          }
        ]
      }
    }
  }
}

and the function to close it

closeDrawer() {
        Navigation.mergeOptions('SideMenuContainer', {
            sideMenu: {
                left: {
                    visible: false
                }
            }
        })
    }

[retyui]

@enisinanaj
What difference between call .mergeOptions() with a scene ID or a side menu ID?

[retyui]

Click to open working example (thanks @enisinanaj)

import React from 'react';
import { Button, View, Text } from 'react-native';
import { Navigation } from 'react-native-navigation';

const MENU_SCENE_ID = 'MENU_SCENE_ID';
const MENU_SCENE = 'MENU_SCENE';
const MAIN_SCREEN = 'MAIN_SCREEN';
const PROFILE_SCENE = 'PROFILE_SCENE';

const closeLeftMenu = {
  sideMenu: {
    left: {
      visible: false,
    },
  },
};

const state = Object.seal({ componentId: null });

export const closeAndPushToProfile = async () => {
  await Navigation.push(state.componentId, {
    component: {
      name: PROFILE_SCENE,
      passProps: {
        text: PROFILE_SCENE,
      },
    },
  });

  await Navigation.mergeOptions(MENU_SCENE_ID, closeLeftMenu);
};

const App = () => (
  
    MAIN_SCREEN
    Open left menu
  
);

const Menu = () => (
  
    
  
);

const Profile = ({ text }) => (
  
    {text}
  
);
Navigation.registerComponent(MAIN_SCREEN, () => App);
Navigation.registerComponent(MENU_SCENE, () => Menu);
Navigation.registerComponent(PROFILE_SCENE, () => Profile);

Navigation.events().registerComponentDidAppearListener(
  ({ componentId, componentName }) => {
    console.log(' --- componentId, componentName', componentId, componentName);
    if (componentName !== MENU_SCENE) {
      state.componentId = componentId;
    }
  },
);

Navigation.events().registerAppLaunchedListener(() => {
  Navigation.setRoot({
    root: {
      sideMenu: {
        id: MENU_SCENE_ID,
        left: {
          component: {
            name: MENU_SCENE,
          },
        },
        center: {
          stack: {
            children: [
              {
                component: {
                  name: MAIN_SCREEN,
                  options: {
                    topBar: {
                      title: {
                        text: MAIN_SCREEN,
                      },
                    },
                  },
                },
              },
            ],
          },
        },
      },
    },
  });
});