React-native-popup-menu in react-navigation header
I'm using a react navigation prefix and would like to show a popup when the user clicks a button on the right side of the react navigation header.
I have wrapped the context menu in the root of my applications as shown below
return (
<Provider store={store}>
<MenuContext style={{ flex: 1 }}>
<AppWithNavigationState />
</MenuContext>
</Provider>
)
on one of my screens 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 presses the right button it should look like this
Menu items are dynamic, I will need to fetch data from one of my APIs and start rendering the menu data.
I read on the internet that this can be achieved with a context method, but I'm not sure how to implement this in my framework.
Can anyone advise me on this? And is it possible to do this with my local variable?
source to share
https://www.npmjs.com/package/react-native-material-menu This works for 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>,
source to share
The most non-standard way is to use a modal when right click on the name this.refs.modalRef.showModal()
, which is on your current page:
<View>
<PopupModal ref="modalRef" />
</View>
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 using this.refs.modalRef.showModal(data)
and to PopupModal:
showModal = (data) => {
this.setState({ data, show: true });
}
source to share
I have the same problem. I tried to fix it with these answers but still doesn't work. Please help me. This is such an urgent task. Here is my original code and result.
<Header
leftComponent={<TouchableOpacity>
<View>
<Icon name='home' style={{padding:'2%'}}/>
</View>
</TouchableOpacity>}
centerComponent={{ text: 'My Motor', style: { color: '#fff', fontSize: 20 } }}
rightComponent={
<MenuProvider style={{flexDirection:'row', padding:'2%'}}>
<Menu onSelect={value=> this.props.navigation.navigate(value)}>
<MenuTrigger>
<Icon name='menu' style={{padding:'2%', color:'#fff'}}/>
</MenuTrigger>
<MenuOptions>
<MenuOption value={'home'}>
<Text>Home</Text>
</MenuOption>
<MenuOption value={'register'}>
<Text>Register</Text>
</MenuOption>
<MenuOption value={'my_profile'}>
<Text>My Profile</Text>
</MenuOption>
source to share