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

Question

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>
        ),
    }

When the user clicks on the right button, it should be like this

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?

Answer 1

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 });
}