-
Notifications
You must be signed in to change notification settings - Fork 248
/
ModalExample.js
46 lines (41 loc) · 1.42 KB
/
ModalExample.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
import React, { Component } from 'react';
import { Text, Modal } from 'react-native';
import Menu, {
MenuProvider,
MenuOptions,
MenuOption,
MenuTrigger,
} from 'react-native-popup-menu';
class ModalExample extends Component {
constructor(props, ctx) {
super(props, ctx);
this.state = { visible: false };
}
render() {
return (
<MenuProvider style={{flexDirection: 'column', padding: 30}}>
<Text>Main window:</Text>
<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 })}>
<MenuProvider skipInstanceCheck style={{flexDirection: 'column', padding: 30, backgroundColor: 'white'}}>
<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>
</MenuProvider>
</Modal>
</MenuProvider>
);
}
}
export default ModalExample;