updated demo gif, bigger fonts in demo examples

README.md

@@ -13,8 +13,9 @@ Features:
 * Can work as controlled as well as uncontrolled component
 * Different lifecycle hooks
 
-![Popup menu demo](./android.demo.gif)
-![Popup menu demo](./android.demo-popover.gif)
+| Context Menu, Slide-in Menu | Popover |
+|---|---|
+|![Popup menu demo](./android.demo.gif)|![Popup menu demo](./android.demo-popover.gif)|
 
 ## Installation
 

examples/Example.js

@@ -60,10 +60,10 @@ export default class Example extends Component {
           <View style={styles.topbar}>
             <Menu name="numbers" renderer={SlideInMenu} onSelect={value => this.selectNumber(value)}>
               <MenuTrigger style={styles.trigger}>
-                <Text style={styles.triggerText}>Slide-in menu...</Text>
+                <Text style={[styles.text, styles.triggerText]}>Slide-in menu...</Text>
               </MenuTrigger>
-              <MenuOptions>
-                <MenuOption value={1} text='Option one' />
+              <MenuOptions customStyles={{ optionText: [styles.text, styles.slideInOption] }}>
+                <MenuOption value={1} text='Option one'  />
                 <MenuOption value={2} text='Option two' />
                 <MenuOption value={3} text='Option three' />
                 <MenuOption value={4} text='Option four' />
@@ -78,9 +78,9 @@ export default class Example extends Component {
               onClose={() => this.addLog('menu is closing')}
               >
               <MenuTrigger style={styles.trigger}>
-                <Text style={styles.triggerText}>Context menu...</Text>
+                <Text style={[styles.text, styles.triggerText]}>Context menu...</Text>
               </MenuTrigger>
-              <MenuOptions>
+              <MenuOptions customStyles={{ optionText: styles.text }}>
                 <MenuOption value="Normal" text='Normal' />
                 <MenuOption value="N/A" disabled={true} text='Disabled' />
                 <MenuOption value="N/A" disableTouchable={true} text='Non-selectable' />
@@ -97,11 +97,11 @@ export default class Example extends Component {
               const textStyle = {color: l.highlighted ? 'red' : 'gray'};
               return (
                 <View style={[styles.logItem, wrapperStyle]} key={l.id}>
-                  <Text style={textStyle}>{l.value}</Text>
+                  <Text style={[styles.text, textStyle]}>{l.value}</Text>
                   <View style={{flex:1}}></View>
                   <Menu>
-                    <MenuTrigger text='edit' />
-                    <MenuOptions>
+                    <MenuTrigger text='edit' customStyles={{ triggerText: styles.text }} />
+                    <MenuOptions customStyles={{ optionText: styles.text }}>
                       <MenuOption onSelect={() => this.toggleHighlight(l.id)} text={l.highlighted ? 'Unhighlight' : 'Highlight'} />
                       <MenuOption onSelect={() => this.deleteLogItem(l.id)} text='Delete' />
                     </MenuOptions>
@@ -152,4 +152,10 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     padding: 8,
   },
+  slideInOption: {
+    padding: 5,
+  },
+  text: {
+    fontSize: 18,
+  }
 });

examples/PopoverExample.js

@@ -16,7 +16,7 @@ const MyPopover = () => (
       <Text style={styles.triggerText}>{'\u263A'}</Text>
     </MenuTrigger>
     <MenuOptions style={styles.menuOptions}>
-      <Text>Hello world!</Text>
+      <Text style={styles.contentText}>Hello world!</Text>
     </MenuOptions>
   </Menu>
 )
@@ -50,14 +50,13 @@ const styles = StyleSheet.create({
     padding: 10,
     flexDirection: 'column',
     justifyContent: 'space-between',
+    backgroundColor: 'rgba(0, 0, 0, 0.05)',
   },
   row: {
     flexDirection: 'row',
     justifyContent: 'space-between',
   },
   backdrop: {
-    backgroundColor: 'black',
-    opacity: 0.3,
   },
   menuOptions: {
     padding: 50,
@@ -68,6 +67,9 @@ const styles = StyleSheet.create({
   triggerText: {
     fontSize: 20,
   },
+  contentText: {
+    fontSize: 18,
+  },
 })
 
 export default PopoverExample;