SideMenu is visible below the component it is rendered on

[aejaex]

Hi,

I have created the SideMenu as per the example here, however, the SideMenu is visible beneath the component I am rendering it on, even though the toggle state may be closed. I can even see it between screen transitions, until the main component gets rendered over it.

How can I fix this?

[vinay-webrmedia]

@aejaex I am facing the same issue. I have found a work around. I hope it helps you. I added props isVisible to the Menu component which will control if the menu should be displayed or no. I am passing the this.state.showSideMenu as the value for isVisible props which controls the SideMenu's isOpen props.

render() {
    const menu = <Menu isVisible={this.state.showSideMenu} />;
    return (
      <SideMenu
        menu={menu}
        menuPosition="right"
        isOpen={this.state.showSideMenu}
      >
         <Text>Welcome to Side Menu Demo</Text>
     </SideMenu>
);

Menu.js

import React, { Component } from 'react';
import { View, Text } from 'react-native';
export default class Menu extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isVisible: props.isVisible
    }
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.isVisible != this.props.isVisible) {
      this.setState({isVisible: nextProps.isVisible});
    }
  }

  render() {
    return (
      <View style={{flex: 1}}>
        {
          this.state.isVisible ? 
            <View style={{flex: 1}}>
              <Text>I am side menu content</Text>
            </View> :
          null

        }
      </View>
    );
  }
}

[shoonne]

Does someone have a solution to this? I have my side menu wrapped around my App.js which makes it accessable in other files. When i swipe in my app, the menu is visible below the components

[aejaex]

I switched over to NativeBase's Drawer, which I found easier to use and more robust.

[duytq94]

@aejaex I have the same issue, you should set your ContentView with background color like white or another solid color to hide the side menu when it doesn't open.

[lyzkhqby]

I get SideMenu by ref,then invoke the ”openMenu" function of the ref

[dezudas]

@aejaex I am facing the same issue. I have found a work around. I hope it helps you. I added props isVisible to the Menu component which will control if the menu should be displayed or no. I am passing the this.state.showSideMenu as the value for isVisible props which controls the SideMenu's isOpen props.

render() {
   const menu = <Menu isVisible={this.state.showSideMenu} />;
   return (
     <SideMenu
       menu={menu}
       menuPosition="right"
       isOpen={this.state.showSideMenu}
     >
        <Text>Welcome to Side Menu Demo</Text>
    </SideMenu>
);

Menu.js

import React, { Component } from 'react';
import { View, Text } from 'react-native';
export default class Menu extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isVisible: props.isVisible
    }
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.isVisible != this.props.isVisible) {
      this.setState({isVisible: nextProps.isVisible});
    }
  }

  render() {
    return (
      <View style={{flex: 1}}>
        {
          this.state.isVisible ? 
            <View style={{flex: 1}}>
              <Text>I am side menu content</Text>
            </View> :
          null

        }
      </View>
    );
  }
}

It worked for me with small glitch. It will hide the sidemenu once you click the close, then animation goes in blank area.