0

I am using react-native-popup-menu@0.10.0. It works fine on IOS but cannot overlay on another component on android. It is invisible on android. Please provide any solution .

renderHeader() {<Header><MenuContext style={styles.container}>
          <View>
            <Menu>
              <MenuTrigger customStyles={triggerStyles} onPress={() => this.setState({ opened: true })}>
                <FaIcon name='ellipsis-h' size={21} color='#b1b9bc'/>
              </MenuTrigger>
              <MenuOptions>
                <MenuOption onSelect={() => this.edit()} disabled={this.state.disabled}>
                  <Text style={this.state.disabled ? {color: 'lightgrey'} : {color: 'black'}}>Edit</Text>
                </MenuOption>
                <MenuOption onSelect={() => this.delete()} disabled={this.state.disabled}>
                  <Text style={this.state.disabled ? {color: 'lightgrey'} : {color: 'red'}}>Delete</Text>
                </MenuOption>
              </MenuOptions>
            </Menu>
          </View>
        </MenuContext></Header>}
Samiksha Jagtap
  • 585
  • 2
  • 13
  • 29

1 Answers1

2

This happened to me when the MenuContext wasn't high enough in the tree. Eventually I moved it to the very first component's render function as the wrapper for everything, and that works great.

Kraylog
  • 7,383
  • 1
  • 24
  • 35
  • Yes, It was giving issues because I haven't wrapped my render method into MenuContext. Thank you. I changed my render method to following - `render() { {this.renderHeader()} }` – Samiksha Jagtap Dec 12 '17 at 10:48