Unable to change width of sideMenu with mergeOptions() method

[mayconmesquita]

Issue Description

I try to dinamically change width of sideMenu, but not works. This is implemented? If not, would be useful to improve usability with large width devices (eg.: setting menu width when orientation changes).

Steps to Reproduce / Code Snippets / Screenshots

Navigation.mergeOptions(this.props.componentId, {
   sideMenu: {
     left: {
       width: 300
     }
   }
});

---

Environment

• React Native Navigation version: v2.21.0
• React Native version: v0.59.0
• Platform(s) (iOS, Android, or both?): Both
• Device info (Simulator/Device? OS version? Debug/Release?): Android 5, Android 8 and iPhone 5

[N-EKULF]

You have to set it like this https://github.com/wix/react-native-navigation/issues/4122#issuecomment-462132976 it's work for me both Android and iOS

[mayconmesquita]

@N-EKULF, the Navigation.setDefaultOptions and Navigation.setRoot only works to set the initial settings/options of navigation. So this does not apply here.

For this purpose, we have Navigation.mergeOptions to set navigation options dynamically and programmatically (without having to reload all navigation)... but WIDTH changes don't works.

[jhondavila]

same problem

I have Navigation.mergeOptions to set navigation options dynamically and programmatically (without having to reload all navigation)... but WIDTH changes don't works.

[vishalenrique]

@mayconmesquita Width option does not work even when setting it from Navigation.setDefaultOptions.

[mayconmesquita]

@vishalenrique Which version are you using?

[vishalenrique]

@mayconmesquita react: 16.9.0 react-native: 0.61.5 react-native-navigation: 6.0.1 Android: API 24

Btw did you find any workaround to change the sideMenu width dynamically, It certainly does not work with Navigation.setDefaultOptions ?

[mayconmesquita]

@vishalenrique I never managed to change successfully the sideMenu width dynamically, using Navigation.mergeOptions.

The only way that i can change sideMenu width, is using Navigation.setRoot on RNN v2.21.0 (maybe all v2+ can do that too).

You can try this code, if you use setRoot:

Navigation.setRoot({
  root: {
    sideMenu: {
      left: {
        component: {
          name: 'nav.SideMenu',
        },
      },
      center: {
        stack: {
          options: {
            topBar: {
              visible: true,
            },
          },
          id: 'SideMenuStack',
          children: [{
            component: {
              name: 'nav.App',
            }
          }]
        }
      },
      options: {
        sideMenu: {
          left: {
            width: 300 // You can set the width here...
          }
        }
      }
    }
  }
});

[adrian09h]

This issue still happens on RNN version 7.11.2

The apply options is not implemented in Android native code. So I created patch file to apply the width change through mergeoption

Please look at this change

index f3d35f5..44ec639 100644
--- a/node_modules/react-native-navigation/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/sidemenu/SideMenuPresenter.java
+++ b/node_modules/react-native-navigation/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/sidemenu/SideMenuPresenter.java
@@ -49,6 +49,8 @@ public class SideMenuPresenter {
     public void mergeOptions(SideMenuRootOptions options) {
         mergeLockMode(options);
         mergeVisibility(options);
+        applyLeftWidth(options);
+        applyRightWidth(options);
     }````