CODEWITHSUNDEEP
react-native
Darren Lau
Darren Lau

Reputation: 2045

React-native-popup-menu on react-navigation header

I'm using redux with react-navigation and would like to show the popup when the user clicks on the button on the react-navigation header-right button.

I wrapped the context menu at the root of my apps, as below

return (
      <Provider store={store}>
          <MenuContext style={{ flex: 1 }}>
              <AppWithNavigationState />
          </MenuContext>
      </Provider>
    )

in one of my screen, I have

static navigationOptions = {
        headerTitle: 'News',
        headerRight: (
          <TouchableOpacity style={{ paddingLeft:15, paddingRight:15 }}>
              <Icon name="more-vert" size={30} color="black" />
          </TouchableOpacity>
        ),
    }

enter image description here

When the user clicks on the right button, it should be like thisenter image description here

The menu items are dynamic, I will have to pull the data from one of my API and start rendering the menu data.

I've read through online it can be achieved using the context method, but I'm not sure how to implement it in my structure.

Could anyone advise me on this? And is it possible to render it with my local variable?

Upvotes: 9

Views: 7018

Answers (2)

TaoPaipai
TaoPaipai

Reputation: 296

The most custom way is to use Modal, when click the right button, called this.refs.modalRef.showModal(), which in your current page:

<View>
    <PopupModal ref="modalRef" />
</View>

The PopupModal like this:

export default class PopupModal extends Component {
    state = {
      show: false,
    }
    showModal() {
      this.setState({show: true});
    }
    closeModal = () => {
      this.setState({show: false});
    }
    return (
        <Modal
          transparent
          visible={this.state.show}
          onRequestClose={this.closeModal}
        >
            <TouchableWithoutFeedback onPress={this.closeModal}>
                <View style={{
                    width: '100%',
                    height: '100%',
                    opacity: 0.5,
                    backgroundColor: 'gray',
                }} />
            </TouchableWithoutFeedback>
            <View></View> // your designed view, mostly position: 'absolute'
        </Modal>
    );    
}

You can also pass some data to PopupModal by this.refs.modalRef.showModal(data), and in PopupModal:

showModal = (data) => {
  this.setState({ data, show: true });
}

Upvotes: 1

Vyas Reddy
Vyas Reddy

Reputation: 1272

https://www.npmjs.com/package/react-native-material-menu It works to me

 headerRight:<View  style={{marginRight:10}}>
        <Menu
            ref={this.setMenuRef}
            button={<Text onPress={this.showMenu}><Icon style={{color:screenProps.headerTitleStyle.color,fontSize:25,marginRight:5}} name="md-more"/></Text>}
        >
            <MenuItem onPress={this.hideMenu}>Rate Us</MenuItem>
            <MenuItem onPress={this.hideMenu}>Share App</MenuItem>
            <MenuItem onPress={this.hideMenu}>Settings</MenuItem>
        </Menu>
    </View>,

Upvotes: 0

Related Questions