Files
react-native-popup-menu/examples/ControlledExample.js
T
Martin Bielik dd4b65751b Menu provider (#64)
* MenuProvider, deprecated MenuContext

* menuProviderWrapper, deprecated menuContextWrapper custom style

* doc wording
2017-12-19 11:08:34 +01:00

55 lines
1.3 KiB
JavaScript

import React, { Component } from 'react';
import { Text } from 'react-native';
import Menu, {
MenuProvider,
MenuOptions,
MenuOption,
MenuTrigger
} from 'react-native-popup-menu';
export default class ControlledExample extends Component {
constructor(props, ctx) {
super(props, ctx);
this.state = { opened: true };
}
onOptionSelect(value) {
alert(`Selected number: ${value}`);
this.setState({ opened: false });
}
onTriggerPress() {
this.setState({ opened: true });
}
onBackdropPress() {
this.setState({ opened: false });
}
render() {
return (
<MenuProvider
style={{flexDirection: 'column', padding: 30}}>
<Text>Hello world!</Text>
<Menu
opened={this.state.opened}
onBackdropPress={() => this.onBackdropPress()}
onSelect={value => this.onOptionSelect(value)}>
<MenuTrigger
onPress={() => this.onTriggerPress()}
text='Select option'/>
<MenuOptions>
<MenuOption value={1} text='One' />
<MenuOption value={2}>
<Text style={{color: 'red'}}>Two</Text>
</MenuOption>
<MenuOption value={3} disabled={true} text='Three' />
</MenuOptions>
</Menu>
</MenuProvider>
);
}
}