-
Notifications
You must be signed in to change notification settings - Fork 249
/
TouchableExample.js
104 lines (94 loc) · 2.85 KB
/
TouchableExample.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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
import React from 'react';
import {
TouchableOpacity,
TouchableHighlight,
TouchableWithoutFeedback,
Button,
} from 'react-native';
import Menu, {
MenuProvider,
MenuOptions,
MenuOption,
MenuTrigger,
} from 'react-native-popup-menu';
class TouchableExample extends React.Component {
constructor(props) {
super(props);
this.state = {
Touchable: Button,
};
}
render() {
const { Touchable } = this.state;
const buttonText = 'Select ' + (Touchable ? (getDisplayName(Touchable)) : 'default');
return (
<MenuProvider style={{flexDirection: 'column', padding: 30}}>
<Menu onSelect={Touchable => this.setState({ Touchable })}>
<MenuTrigger
customStyles={{
TriggerTouchableComponent: Button,
triggerTouchable: { title: 'Select (Custom Touchables)' },
}}
/>
<MenuOptions>
<MenuOption text='Default' />
<MenuOption text='TouchableOpacity' customStyles={{
OptionTouchableComponent: TouchableOpacity,
optionTouchable: touchableOpacityProps,
}}
value={TouchableOpacity}
/>
<MenuOption text='TouchableHighlight' customStyles={{
OptionTouchableComponent: TouchableHighlight,
optionTouchable: touchableHighlightProps,
}}
value={TouchableHighlight}
/>
<MenuOption text='TouchableWithoutFeedback' customStyles={{
OptionTouchableComponent: TouchableWithoutFeedback,
}}
value={TouchableWithoutFeedback}
/>
<MenuOption customStyles={{
OptionTouchableComponent: Button,
optionTouchable: { title: 'Button' },
}}
value={Button}
/>
</MenuOptions>
</Menu>
<Menu style={{paddingTop: 30}}>
<MenuTrigger
customStyles={{
TriggerTouchableComponent: Touchable,
triggerTouchable: { title: buttonText },
}}
text={buttonText}
/>
<MenuOptions customStyles={{
OptionTouchableComponent: TouchableOpacity,
optionTouchable: touchableOpacityProps,
}}>
<MenuOption text='Option 1' />
<MenuOption text='Option 2' />
<MenuOption text='Option 3' />
<MenuOption text='Option 4' />
</MenuOptions>
</Menu>
</MenuProvider>
);
}
}
const touchableOpacityProps = {
activeOpacity: 0.6,
};
const touchableHighlightProps = {
activeOpacity: 0.5,
underlayColor: 'green',
};
const getDisplayName = Component => (
Component.displayName ||
Component.name ||
(typeof Component === 'string' ? Component : 'Component')
);
export default TouchableExample;