custom renderer example

Author: sodik82

examples/ExtensionExample.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Text } from 'react-native';
+import { Text, View } from 'react-native';
 import Menu, {
   MenuProvider,
   MenuOptions,
@@ -25,6 +25,24 @@ const IconOption = ({iconName, text, value}) => (
   </MenuOption>
 )
 
+const { computePosition } = renderers.ContextMenu;
+const roundedStyles = {
+  backgroundColor: 'yellow',
+  borderRadius: 30,
+}
+class RoundedContextMenu extends React.Component {
+  render() {
+    const { style, children, layouts, ...other } = this.props;
+    const position = computePosition(layouts);
+    return (
+      <View {...other} style={[roundedStyles, style, position]}>
+        {children}
+      </View>
+    );
+  }
+}
+
+
 /* You can set default renderer for all menus just once in your application: */
 //Menu.setDefaultRenderer(renderers.NotAnimatedContextMenu);
 
@@ -35,13 +53,20 @@ const ExtensionExample = () => (
       onSelect={value => alert(`Selected number: ${value}`)}
       renderer={renderers.NotAnimatedContextMenu}
     >
-      <MenuTrigger text='Select option' />
+      <MenuTrigger text='Select extension options' />
       <MenuOptions>
         <CheckedOption value={1} text='One' />
         <CheckedOption checked value={2} text='Two' />
         <IconOption value={3} iconName='rocket' text='Three' />
       </MenuOptions>
     </Menu>
+    <Menu renderer={RoundedContextMenu}>
+      <MenuTrigger text='Select rounded menu' />
+      <MenuOptions>
+        <MenuOption text="A"/>
+        <MenuOption text="B"/>
+      </MenuOptions>
+    </Menu>
   </MenuProvider>
 );