Files

47 lines
1.4 KiB
JavaScript
Raw Permalink Normal View History

2016-06-01 14:19:25 +02:00
import React, { Component } from 'react';
import { Text, Modal } from 'react-native';
import Menu, {
2017-12-19 11:08:34 +01:00
MenuProvider,
2016-06-01 14:19:25 +02:00
MenuOptions,
MenuOption,
MenuTrigger
} from 'react-native-popup-menu';
class ModalExample extends Component {
constructor(props, ctx) {
super(props, ctx);
2017-09-13 17:12:42 +02:00
this.state = { visible: false };
2016-06-01 14:19:25 +02:00
}
render() {
return (
2017-12-19 11:08:34 +01:00
<MenuProvider style={{flexDirection: 'column', padding: 30}}>
2016-06-01 14:19:25 +02:00
<Text>Main window:</Text>
2017-09-13 17:12:42 +02:00
<Menu>
<MenuTrigger text='Select option' />
<MenuOptions>
<MenuOption onSelect={() => this.setState({ visible: true })} text='Open modal' />
</MenuOptions>
</Menu>
<Modal visible={this.state.visible} onRequestClose={() => this.setState({ visible: false })}>
2017-12-19 11:08:34 +01:00
<MenuProvider style={{flexDirection: 'column', padding: 30, backgroundColor: 'white'}}>
2016-06-01 14:19:25 +02:00
<Text>Modal window:</Text>
<Menu onSelect={value => alert(`Selected number: ${value}`)}>
<MenuTrigger text='Select option' />
<MenuOptions>
<MenuOption value={1} text='One' />
<MenuOption value={2} text='Two' />
<MenuOption onSelect={() => this.setState({ visible: false })} text='Close modal' />
</MenuOptions>
</Menu>
2017-12-19 11:08:34 +01:00
</MenuProvider>
2016-06-01 14:19:25 +02:00
</Modal>
2017-12-19 11:08:34 +01:00
</MenuProvider>
2016-06-01 14:19:25 +02:00
);
}
}
export default ModalExample;