Side menu not working

[react-native-elements]

Side menu not working

[dabit3]

Are you getting any errors here?

[Monte9]

@abhitheawesomecoder there are a couple issues with your code.

1. The Text element needs to be wrapped within a View container with a flex 1 and a backgroundColor as the default is transparent.
2. You are missing a toggle button on the view that actually opens/closes the Side Menu.

@afdalwahyu I would guess you have the same problem because you are using a similar code as @abhitheawesomecoder?

This should work for both you guys, try it out:

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableHighlight
} from 'react-native';
import { SideMenu, List, ListItem } from 'react-native-elements';
import Icon from 'react-native-vector-icons/MaterialIcons'

export default class Element extends Component {
  constructor () {
  super()
  this.state = { toggled: false }
}
toggleSideMenu () {
  this.setState({
    toggled: !this.state.toggled
  })
}
  render() {
    // SideMenu takes a React Native element as a prop for the actual Side Menu
    const list = [
  {
    name: 'Amy Farha',
    avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',
    subtitle: 'Vice President'
  },
  {
    name: 'Chris Jackson',
    avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
    subtitle: 'Vice Chairman'
  }
]
  const MenuComponent = (
    <View style={{flex: 1, backgroundColor: '#ededed', paddingTop: 50}}>
      <List containerStyle={{marginBottom: 20}}>
      {
        list.map((item, i) => (
          <ListItem
            roundAvatar
            onPress={() => console.log(item.avatar_url)}
            avatar={{uri:item.avatar_url}}
            key={i}
            title={item.name}
            subtitle={item.subtitle} />
        ))
      }
      </List>
    </View>
  )
    return (
      <SideMenu
        MenuComponent={MenuComponent}
        toggled={this.state.toggled}>
        <View style={styles.container}>
          <TouchableHighlight
            style={{marginTop: 7, marginLeft: 9}}
            onPress={this.toggleSideMenu.bind(this)}
            underlayColor='transparent'>
            <Icon
              color='black'
              name='menu'
              size={28}
            />
          </TouchableHighlight>
          <Text style={styles.welcome}>Working Side Menu Example</Text>
        </View>
      </SideMenu>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
});

AppRegistry.registerComponent('Element', () => Element);

[abhitheawesomecoder]

No errors
On 07-Nov-2016 10:02 pm, "Nader Dabit" [email protected] wrote:

Are you getting any errors here?

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
#76 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/ADwwThUBytz5XIKUpu7KzGAmjwAaGv2Fks5q71KkgaJpZM4KjSTO
.

[afdalwahyu]

+1
I have same problem with Android 6.1