2016-05-31 10:02:02 +02:00
|
|
|
import React from 'react';
|
|
|
|
|
import { Text } from 'react-native';
|
|
|
|
|
import Menu, {
|
|
|
|
|
MenuContext,
|
|
|
|
|
MenuOptions,
|
|
|
|
|
MenuOption,
|
2016-06-15 12:08:13 +02:00
|
|
|
MenuTrigger,
|
|
|
|
|
renderers,
|
2016-05-31 10:02:02 +02:00
|
|
|
} from 'react-native-popup-menu';
|
|
|
|
|
|
|
|
|
|
const CheckedOption = (props) => (
|
2016-11-23 13:33:54 +01:00
|
|
|
<MenuOption {...props} text={(props.checked ? '\u2713 ' : '') + props.text} />
|
2016-05-31 10:02:02 +02:00
|
|
|
)
|
|
|
|
|
|
2016-11-18 14:13:51 +01:00
|
|
|
/* You can set default renderer for all menus just once in your application: */
|
|
|
|
|
//Menu.setDefaultRenderer(renderers.NotAnimatedContextMenu);
|
2016-06-15 12:08:13 +02:00
|
|
|
|
2016-05-31 10:02:02 +02:00
|
|
|
const ExtensionExample = () => (
|
|
|
|
|
<MenuContext style={{flexDirection: 'column', padding: 30}}>
|
|
|
|
|
<Text>Extensible hello world!</Text>
|
2016-11-18 14:13:51 +01:00
|
|
|
<Menu
|
|
|
|
|
onSelect={value => alert(`Selected number: ${value}`)}
|
|
|
|
|
renderer={renderers.NotAnimatedContextMenu}
|
|
|
|
|
>
|
2016-05-31 10:02:02 +02:00
|
|
|
<MenuTrigger text='Select option' />
|
|
|
|
|
<MenuOptions>
|
2016-11-23 13:33:54 +01:00
|
|
|
<CheckedOption value={1} text='One' />
|
|
|
|
|
<CheckedOption checked value={2} text='Two' />
|
2016-05-31 10:02:02 +02:00
|
|
|
</MenuOptions>
|
|
|
|
|
</Menu>
|
|
|
|
|
</MenuContext>
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
export default ExtensionExample;
|