text prop in MenuTrigger, updated examples

__tests__/MenuTrigger-test.js

@@ -24,6 +24,17 @@ describe('MenuTrigger', () => {
     );
   });
 
+  it('should render component usin text property', () => {
+    const { output } = render(
+      <MenuTrigger events={defaultEvents} text='Trigger text' />
+    );
+    expect(output.type).toEqual(TouchableWithoutFeedback);
+    expect(output.props.children.type).toEqual(View);
+    expect(output.props.children.props.children).toEqual(
+      <Text>Trigger text</Text>
+    );
+  });
+
   it('should be enabled by default', () => {
     const { instance } = render(
       <MenuTrigger events={defaultEvents} />

examples/BasicExample.js

@@ -11,9 +11,7 @@ const BasicExample = () => (
   <MenuContext style={{flexDirection: 'column', padding: 30}}>
     <Text>Hello world!</Text>
     <Menu onSelect={value => alert(`Selected number: ${value}`)}>
-      <MenuTrigger>
-        <Text>Select option...</Text>
-      </MenuTrigger>
+      <MenuTrigger text='Select option' />
       <MenuOptions>
         <MenuOption value={1} text='One' />
         <MenuOption value={2} text='Two' />

examples/Example.js

@@ -97,9 +97,7 @@ export default class Example extends Component {
                   <Text style={textStyle}>{l.value}</Text>
                   <View style={{flex:1}}></View>
                   <Menu onSelect={action => action()}>
-                    <MenuTrigger>
-                      <Text>edit</Text>
-                    </MenuTrigger>
+                    <MenuTrigger text='edit' />
                     <MenuOptions>
                       <MenuOption value={() => this.toggleHighlight(l.id)} text={l.highlighted ? 'Unhighlight' : 'Highlight'} />
                       <MenuOption value={() => this.deleteLogItem(l.id)} text='Delete' />

src/MenuTrigger.js

@@ -1,17 +1,21 @@
 import React from 'react';
-import { TouchableWithoutFeedback } from 'react-native';
+import { TouchableWithoutFeedback, Text } from 'react-native';
 import { View } from 'react-native';
 
-const MenuTrigger = props => (
-  <TouchableWithoutFeedback onPress={e => !props.disabled && props.events.onPress(e)}>
-    <View {...props} ref={props.events.onRef} collapsable={false}>
-      {props.children}
-    </View>
-  </TouchableWithoutFeedback>
-);
+const MenuTrigger = props => {
+  const { disabled, events, text, children } = props;
+  return (
+    <TouchableWithoutFeedback onPress={e => !disabled && events.onPress(e)}>
+      <View {...props} ref={events.onRef} collapsable={false}>
+        {text ? <Text>{text}</Text> : children}
+      </View>
+    </TouchableWithoutFeedback>
+  );
+};
 
 MenuTrigger.propTypes = {
   disabled: React.PropTypes.bool,
+  text: React.PropTypes.string,
 };
 
 MenuTrigger.defaultProps = {