React-native Side-menu not working

Question

I am trying to use react-native-sidemenu https://github.com/react-native-community/react-native-side-menu My code looks like this. There is no error and even output is overlapping to each other

   var list = [{name: "komaldeep", subtitle: "dssdfds", avatar_url:"sadasdsa" }];

  export default class First extends Component {

      constructor(props) {
          super(props);
         this.state = {
           isOpen: false,
        };
       this.toggleSideMenu = this.toggleSideMenu.bind(this);
     }



toggleSideMenu () {
    this.setState({
        isOpen: !this.state.isOpen
    })
}

render() {
    //menu list `enter code here`
    const MenuComponent = (
        <View style={{flex: 1, backgroundColor: '#ededed', paddingTop: 200}}>
            <List containerStyle={{marginBottom: 20}}>

                {
                    list.map((l, i) => (

                        <ListItem
                            roundAvatar
                            onPress={() => console.log('Pressed')}
                            avatar={l.avatar_url}
                            key={i}
                            title={l.name}
                            subtitle={l.subtitle}
                        />
                    ))
                }

            </List>
        </View>
    )


    return (

        <SideMenu
            isOpen={this.state.isOpen}
            menu={MenuComponent} >

           //Menu Component just contain some random text
            <Menu toggleSideMenu={this.toggleSideMenu.bind(this)}/>

        </SideMenu>

    );
  }
}

Can you just guide me.. what i am doing wrong..

OutPut looks like this enter image description here

Answer 1

The reason that the items in your menu shows up on the right of the screen, seemingly outside of the menu, is that your MenuComponent takes up the entire screen. Set the prop openMenuOffset={number} to SideMenu and use the same number to set width: number in the style of your MenuComponent.