Close Side Menu by Tap about react-native-side-menu HOT 16 CLOSED

You can reach menuActions on first-level components via this.props.menuActions

from react-native-side-menu.

@Kureev, Thanks for answering it but that wasn't what I'm looking for. I think I didn't properly explain it.

in your example,

once the menu is opened, I want to tap any where on blue view and I want to close the menu. My Question is how would you do it?

from react-native-side-menu.

Why was this closed? I'm also looking for this functionality. The view that gets hidden to make room for the menu should have interaction disabled except a tap should close the window. How can this be done?

from react-native-side-menu.

@marcshilling I'm trying to find a solution for this. Unfortunately I haven't found one yet. @Kureev Do you know how this can be done with a simple example?

from react-native-side-menu.

Okay, I'll try to explain the problem and purposed solution:
There's an API of component to do open, close and toggle. It's incapsulated into menuActions. Ideal solution for your case is to make menuActions methods available in all child views. The simplest way to do it - use context, but it doesn't work properly yet. So, to solve this issue, I decided to expose API only to first-level components out-of-box, so it means that in my simple example View and Button (first-level components inside SideMenu) would receive menuActions property. If you need to access those methods on N-th nested level, you'll need to pass these prop directly by hands. As soon as context gonna work OK, that solution gonna be replaced by context. For now I don't see any other way to give you access to these functions outside of menu.

@marcshilling @alinz

from react-native-side-menu.

Ok, my super smart boss @skevy just figured this out...

Your top level component that implements the SideMenu will look something like this, where we subscribe to the SideMenu's onChange event, and update state accordingly:

export class MainScene extends React.Component {
  constructor() {
    super();

    this.state = {
      sideMenuOpen: false
    };
  }

  handleSideMenuChange() {
    this.setState({
      sideMenuOpen: !this.state.sideMenuOpen
    });
  }

  render() {
    return (
      <SideMenu menu={<Menu />} onChange={this.handleSideMenuChange.bind(this)}>
        <MainSceneInner sideMenuOpen={this.state.sideMenuOpen} />
      </SideMenu>
    );
  }
}

Then, in the inner component, we can put a transparent TouchableWithoutFeedback overlay on top of whatever your existing view is (that is only in the hierarchy when the SideMenu is open), which can call this.props.menuActions.close() on press:

class MainSceneInner extends React.Component {
  handleOverlayPress() {
    this.props.menuActions.close();
  }

  render() {
    return (
      <View style={{flex: 1}}>
        <YourViewHere />
        {this.props.sideMenuOpen && <TouchableWithoutFeedback onPress={this.handleOverlayPress.bind(this)}>
          <View style={{ position: 'absolute', top: 0, left: 0, bottom: 0, right: 0, backgroundColor: 'transparent' }} />
        </TouchableWithoutFeedback>}
      </View>
    );
  }
}

Pretty cool, huh? @alinz @Kureev

from react-native-side-menu.

Yeah, that's perfectly cover the case imo. For more convenience I can also pass current menu state to first-level children (that will allow you avoid using high-order components in this case)

from react-native-side-menu.

That would be cool. Honestly, this functionality COULD be implemented in react-native-side-menu...so that it would be a prop on side menu that would be, say, touchToClose={true}. If I got that to work and sent a PR, would you consider adding it in?

from react-native-side-menu.

@skevy I'm always open to suggestions. If you can keep interface clean, I would be happy. Something like this would be nice:

render() {
    return (
      <SideMenu menu={<Menu />} touchToClose={true}>
          ...
      </SideMenu>
    );
}

from react-native-side-menu.

That's the idea! I'll work on it tonight.

from react-native-side-menu.

@skevy 👍 for your feature PR
@Kureev 👍 for this amazing library
@marcshilling 👍 for good example

Thanks guys :D looking forward to this patch!

from react-native-side-menu.

@skevy @Kureev @marcshilling @alinz checkout #36

from react-native-side-menu.

Too live issue to be closed

from react-native-side-menu.

So, after #36 has been merged... Should I close this?

from react-native-side-menu.

LGTM 👍

from react-native-side-menu.

Yup, close away! This is great.

from react-native-side-menu.