React-native-navigation: Menu gesture will not work after merging options to close menu

[cvongrim]

Issue Description

If you use a gesture to open a menu, and then use Navigation.mergetOptions() to close that menu. The swipe gesture will no longer work. The menu immediately closes.

Steps to Reproduce / Code Snippets / Screenshots

Create a project with a side menu. Add a button to the side menu that closes the menu with Navigation.mergetOptions(). Now try and use a gesture to open that menu again. It will appear to open but closes immediately.

Repo to demo the issue https://github.com/cvongrim/rnn-android-gesture-bug

My index.js

import { Navigation } from 'react-native-navigation';
import App from './App';

Navigation.registerComponent('navigation.playground.menu', () => App);
Navigation.registerComponent('navigation.playground.WelcomeScreen', () => App);
Navigation.registerComponent('navigation.playground.menu2', () => App);

Navigation.events().registerAppLaunchedListener(() => {
  Navigation.setRoot({
    root: {
      sideMenu: {
        left: {
          component: {
            id: 'navigation.playground.menu',
            name: 'navigation.playground.menu',
          },
        },
        center: {
          component: {
            id: 'navigation.playground.WelcomeScreen',
            name: 'navigation.playground.WelcomeScreen',
          },
        },
        right: {
          component: {
            id: 'navigation.playground.menu2',
            name: 'navigation.playground.menu2',
          },
        },
      },
    },
  });
});

My App.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, { Component } from 'react';
import { Platform, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { Navigation } from 'react-native-navigation';

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
  android:
    'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

type Props = {};
export default class App extends Component<Props> {

  closeMenu = () => {
    Navigation.mergeOptions('navigation.playground.menu', {
      sideMenu: {
        left: {
          visible: false,
        },
      },
    });
  };

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to React Native!</Text>
        <Text style={styles.instructions}>To get started, edit App.js</Text>
        <Text style={styles.instructions}>{instructions}</Text>
        <TouchableOpacity onPress={this.closeMenu} style={{ backgroundColor: 'grey', padding: 25 }}>
          <Text style={{ color: 'white' }}>Close Menu</Text>
        </TouchableOpacity>
      </View>
    );
  }

}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

Environment

• React Native Navigation version: 2.8.0
• React Native version: 0.57.8
• Platform(s) (iOS, Android, or both?): Android
• Device info (Simulator/Device? OS version? Debug/Release?): Simulator and Device Android 9

[george-steel]

I am experiencing the same issue on react-native-navigation 2.8.0.

[Habi-Thapa]

I am experiencing the same issue on react-native-navigation 2.8.0.

Same here.

[Habi-Thapa]

This worked out for me. FINALLY 😤 😅

/disable swipe gesture feature./
Navigation.mergeOptions('Drawer', {
sideMenu: {
left: {
enabled: false,
}
}
});

/*Re-enable swipe gesture feature.*/
Navigation.mergeOptions('Drawer', {
    sideMenu: {
     left: {
       enabled: true,
     }
   }
});

[cvongrim]

@Habi-Thapa Are you saying you had to disable and enable the gesture on top of setting the visible property to true / false to get it to work?

[cvongrim]

I still experience the issue after trying what I think @Habi-Thapa meant.

  closeMenu = () => {
    Navigation.mergeOptions("navigation.playground.menu", {
      sideMenu: {
        left: {
          visible: false,
          enabled: false
        }
      }
    });
    Navigation.mergeOptions("navigation.playground.menu", {
      sideMenu: {
        left: {
          enabled: true
        }
      }
    });
  };

[Habi-Thapa]

I still experience the issue after trying what I think @Habi-Thapa meant.

  closeMenu = () => {
    Navigation.mergeOptions("navigation.playground.menu", {
      sideMenu: {
        left: {
          visible: false,
          enabled: false
        }
      }
    });
    Navigation.mergeOptions("navigation.playground.menu", {
      sideMenu: {
        left: {
          enabled: true
        }
      }
    });
  };

Remove 'visible' property. Just use 'enabled' property.

[cvongrim]

@Habi-Thapa That does seem to fix it on Android but breaks things on iOS. If you run that on iOS the menu will not close. I guess you could do a hack around it and base it on Platform.OS. Hopefully, this can be fixed.

[cvongrim]

Based off what Habi-Thapa said here is what seems to work for iOS and Android.

import {Platform} from 'react-native';

closeSideMenu = ( ) => {
  if (Platform.OS === 'android') {
    Navigation.mergeOptions("navigation.playground.menu", {
      sideMenu: {
        left: {
          enabled: false,
        },
      },
    });
    Navigation.mergeOptions("navigation.playground.menu", {
      sideMenu: {
        left: {
          enabled: true,
        },
      },
    });
  } else {
    Navigation.mergeOptions("navigation.playground.menu", {
      sideMenu: {
        left: {
          visible: false,
        },
      },
    });
  }
};

[Collin3]

I recently upgraded from version 2.2.0 to version 2.7.1 and started noticing this bug. The above workaround does work for me, but it feels more like we are just covering up a flaw in React Native Navigation..

[guyca]

Closing, should be fixed now.

[ahtesham-shah]

@guyca is it now fixed in the latest version

[guyca]

Should be fixed in 2.17.0