configurable touchable components, resolved #16

Author: madox2

__mocks__/.eslintrc

@@ -0,0 +1,5 @@
+{
+  "globals": {
+    "jest": true,
+  }
+}

__mocks__/react-native.js

@@ -34,21 +34,27 @@ const Animated = {
 const Text = () => "Text";
 const TouchableHighlight = () => false;
 const TouchableWithoutFeedback = () => false;
+const TouchableNativeFeedback = () => false;
 const TouchableOpacity = () => false;
 const ToolbarAndroid = () => false;
 const Image = () => false;
 const ScrollView = () => false;
+const Platform = {
+  select: jest.fn(o => o.ios),
+};
 
 ReactNative.View = View;
 ReactNative.ScrollView = ScrollView;
 ReactNative.ListView = ListView;
 ReactNative.Text = Text;
 ReactNative.TouchableOpacity = TouchableOpacity;
 ReactNative.TouchableHighlight = TouchableHighlight;
+ReactNative.TouchableNativeFeedback = TouchableNativeFeedback;
 ReactNative.TouchableWithoutFeedback = TouchableWithoutFeedback;
 ReactNative.ToolbarAndroid = ToolbarAndroid;
 ReactNative.Image = Image;
 ReactNative.AppRegistry = AppRegistry;
 ReactNative.Animated = Animated;
+ReactNative.Platform = Platform;
 
 module.exports = ReactNative;

__tests__/MenuOption-test.js

@@ -3,6 +3,7 @@ import { TouchableHighlight, View, Text } from 'react-native';
 import { render, normalizeStyle, nthChild } from './helpers';
 
 jest.dontMock('../src/MenuOption');
+jest.dontMock('../src/helpers');
 const MenuOption = require('../src/MenuOption').default;
 const { createSpy, objectContaining } = jasmine;
 
@@ -98,10 +99,11 @@ describe('MenuOption', () => {
       <MenuOption text='some text' customStyles={customStyles} />
     );
     const touchable = output;
+    const view = nthChild(output, 1);
     const text = nthChild(output, 2);
     expect(normalizeStyle(touchable.props))
       .toEqual(objectContaining({ underlayColor: 'green' }));
-    expect(normalizeStyle(touchable.props.style))
+    expect(normalizeStyle(view.props.style))
       .toEqual(objectContaining(customStyles.optionWrapper));
     expect(normalizeStyle(text.props.style))
       .toEqual(objectContaining(customStyles.optionText));

__tests__/MenuTrigger-test.js

@@ -3,6 +3,7 @@ import { TouchableHighlight, View, Text } from 'react-native';
 import { render, normalizeStyle, nthChild } from './helpers';
 
 jest.dontMock('../src/MenuTrigger');
+jest.dontMock('../src/helpers');
 const MenuTrigger = require('../src/MenuTrigger').default;
 const { createSpy, objectContaining } = jasmine;
 
@@ -82,10 +83,11 @@ describe('MenuTrigger', () => {
       <MenuTrigger menuName='menu1' text='some text' customStyles={customStyles} />
     );
     const touchable = nthChild(output, 1);
+    const view = nthChild(output, 2);
     const text = nthChild(output, 3);
     expect(normalizeStyle(touchable.props))
       .toEqual(objectContaining({ underlayColor: 'green' }));
-    expect(normalizeStyle(touchable.props.style))
+    expect(normalizeStyle(view.props.style))
       .toEqual(objectContaining(customStyles.triggerWrapper));
     expect(normalizeStyle(text.props.style))
       .toEqual(objectContaining(customStyles.triggerText));

__tests__/helpers-test.js

@@ -1,7 +1,8 @@
 import { expect } from 'chai';
+import { TouchableHighlight, TouchableNativeFeedback, Platform } from 'react-native';
 
 jest.dontMock('../src/helpers');
-const { measure, makeName } = require('../src/helpers');
+const { measure, makeName, makeTouchable } = require('../src/helpers');
 
 describe('helpers test', () => {
 
@@ -40,4 +41,33 @@ describe('helpers test', () => {
     });
   });
 
+  describe('makeTouchable', () => {
+
+    it('should create TouchableNativeFeedback for android', () => {
+      Platform.select.mockImplementationOnce(o => {
+        return o.android;
+      });
+      const { Touchable, defaultTouchableProps } = makeTouchable();
+      expect(Touchable).to.be.equal(TouchableNativeFeedback);
+      expect(defaultTouchableProps).to.be.an('object');
+    });
+
+    it('should create TouchableHighlight for ios', () => {
+      Platform.select.mockImplementationOnce(o => {
+        return o.ios;
+      });
+      const { Touchable, defaultTouchableProps } = makeTouchable();
+      expect(Touchable).to.be.equal(TouchableHighlight);
+      expect(defaultTouchableProps).to.be.an('object');
+    });
+
+    it('should return passed component', () => {
+      const MyTouchable = () => null;
+      const { Touchable, defaultTouchableProps } = makeTouchable(MyTouchable);
+      expect(Touchable).to.be.equal(MyTouchable);
+      expect(defaultTouchableProps).to.be.an('object');
+    });
+
+  });
+
 });

doc/api.md

@@ -35,7 +35,7 @@ To style `<MenuContext />` and backdrop component you can pass `customStyles` ob
 **Note:** `Style` type is any valid RN style parameter.
 **Note:** In addition to these styles we add also `{flex:1}`. You can disable it by e.g. `style={{flex:0}}`.
 
-See more in custom styling [example](../examples/StylingExample.js).
+See more in custom [styling example](../examples/StylingExample.js).
 
 ## Menu
 
@@ -92,12 +92,13 @@ To style `<MenuTrigger />` component you can pass `customStyles` object prop wit
 | Object key | Type | Notes |
 |---|---|---|
 |`triggerWrapper`|`Style`|Style of wrapping `View` component|
-|`triggerTouchable`|`Style`|Style props of `TouchableHighlight`. Supported keys: `activeOpacity`, `underlayColor`|
 |`triggerText`|`Style`|Style of `Text` component (used when `text` shorthand option is defined)|
+|`TriggerTouchableComponent`|`Component`|Touchable component of trigger. Default value is `TouchableHighlight` for iOS and `TouchableNativeFeedvack` for Android|
+|`triggerTouchable`|`Object`|Properties passed to the touchable component (e.g. `activeOpacity`, `underlayColor` for `TouchableHighlight`)|
 
 **Note:** `Style` type is any valid RN style parameter.
 
-See more in custom styling [example](../examples/StylingExample.js).
+See more in custom [styling example](../examples/StylingExample.js) and [touchable example](../examples/TouchableExample.js).
 
 ## MenuOptions
 
@@ -121,14 +122,15 @@ To style `<MenuOptions />` and it's `<MenuOption />` components you can pass `cu
 |`optionsWrapper`|`Style`|Style of `View` component wrapping all options|
 |`optionsContainer`|`Style`|Style of wrapping `AnimatedView` component|
 |`optionWrapper`|`Style`|Style of `View` component wrapping single option|
-|`optionTouchable`|`Style`|Style props of `TouchableHighlight`. Supported keys: `activeOpacity`, `underlayColor`|
 |`optionText`|`Style`|Style of `Text` component (when `text` shorthand option is defined)|
+|`OptionTouchableComponent`|`Component`|Touchable component of option. Default value is `TouchableHighlight` for iOS and `TouchableNativeFeedvack` for Android|
+|`optionTouchable`|`Object`|Properties passed to the touchable component (e.g. `activeOpacity`, `underlayColor` for `TouchableHighlight`)|
 
 **Note:** `optionWrapper`, `optionTouchable` and `optionText` styles of particular menu option can be overriden by `customStyles` prop of `<MenuOption />` component.
 
 **Note:** `Style` type is any valid RN style parameter.
 
-See more in custom styling [example](../examples/StylingExample.js).
+See more in custom [styling example](../examples/StylingExample.js) and [touchable example](../examples/TouchableExample.js).
 
 ## MenuOption
 
@@ -154,12 +156,13 @@ To style `<MenuOption />` component you can pass `customStyles` object prop with
 | Object key | Type | Notes |
 |---|---|---|
 |`optionWrapper`|`Style`|Style of wrapping `View` component.|
-|`optionTouchable`|`Style`|Style props of `TouchableHighlight`. Supported keys: `activeOpacity`, `underlayColor`|
 |`optionText`|`Style`|Style of `Text` component (when `text` shorthand option is defined)|
+|`OptionTouchableComponent`|`Component`|Touchable component of option. Default value is `TouchableHighlight` for iOS and `TouchableNativeFeedvack` for Android|
+|`optionTouchable`|`Object`|Properties passed to the touchable component (e.g. `activeOpacity`, `underlayColor` for `TouchableHighlight`)|
 
 **Note:** `Style` type is any valid RN style parameter.
 
-See more in custom styling [example](../examples/StylingExample.js).
+See more in custom [styling example](../examples/StylingExample.js) and [touchable example](../examples/TouchableExample.js).
 
 ## renderers
 

doc/examples.md

@@ -104,6 +104,7 @@ const triggerStyles = {
     underlayColor: 'darkblue',
     activeOpacity: 70,
   },
+  TriggerTouchableComponent: TouchableHighlight,
 };
 ```
 For exact definitions of `customStyles` please refer to [API](api.md).

examples/Demo.js

@@ -11,6 +11,7 @@ import ModalExample from './ModalExample';
 import StylingExample from './StylingExample';
 import NonRootExample from './NonRootExample';
 import NavigatorExample from './NavigatorExample';
+import TouchableExample from './TouchableExample';
 
 const demos = [
   { Component: BasicExample, name: 'Basic example' },
@@ -20,6 +21,7 @@ const demos = [
   { Component: ExtensionExample, name: 'Extensions example' },
   { Component: ModalExample, name: 'Modal example' },
   { Component: StylingExample, name: 'Styling example' },
+  { Component: TouchableExample, name: 'Touchable config example' },
   { Component: NonRootExample, name: 'Non root example' },
   { Component: NavigatorExample, name: 'Example with react-native-router-flux' },
 ];

examples/TouchableExample.js

@@ -0,0 +1,71 @@
+import React from 'react';
+import {
+  TouchableOpacity,
+  TouchableHighlight,
+  TouchableWithoutFeedback,
+  Button,
+} from 'react-native';
+import Menu, {
+  MenuContext,
+  MenuOptions,
+  MenuOption,
+  MenuTrigger,
+} from 'react-native-popup-menu';
+
+const TouchableExample = () => (
+  <MenuContext style={{flexDirection: 'column', padding: 30}}>
+
+    <Menu>
+      <MenuTrigger
+        customStyles={{
+          TriggerTouchableComponent: Button,
+          triggerTouchable: { title: 'Select (Custom Touchables)' }
+        }}
+      />
+      <MenuOptions>
+        <MenuOption text='Default' />
+        <MenuOption text='TouchableOpacity' customStyles={{
+          OptionTouchableComponent: TouchableOpacity,
+          optionTouchable: touchableOpacityProps,
+        }} />
+        <MenuOption text='TouchableHighlight' customStyles={{
+          OptionTouchableComponent: TouchableHighlight,
+          optionTouchable: touchableHighlightProps,
+        }} />
+        <MenuOption text='TouchableWithoutFeedback' customStyles={{
+          OptionTouchableComponent: TouchableWithoutFeedback,
+        }} />
+      </MenuOptions>
+    </Menu>
+
+    <Menu style={{paddingTop: 30}}>
+      <MenuTrigger
+        customStyles={{
+          TriggerTouchableComponent: Button,
+          triggerTouchable: { title: 'Select (all TouchableOpacity)' }
+        }}
+      />
+      <MenuOptions customStyles={{
+        OptionTouchableComponent: TouchableOpacity,
+        optionTouchable: touchableOpacityProps,
+      }}>
+        <MenuOption text='Option 1' />
+        <MenuOption text='Option 2' />
+        <MenuOption text='Option 3' />
+        <MenuOption text='Option 4' />
+      </MenuOptions>
+    </Menu>
+
+  </MenuContext>
+);
+
+const touchableOpacityProps = {
+  activeOpacity: 0.6,
+};
+
+const touchableHighlightProps = {
+  activeOpacity: 0.5,
+  underlayColor: 'green',
+};
+
+export default TouchableExample;

src/MenuOption.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
-import { View, StyleSheet, TouchableHighlight, Text } from 'react-native';
+import { View, StyleSheet, Text } from 'react-native';
 import { debug } from './logger';
+import { makeTouchable } from './helpers';
 
 export default class MenuOption extends Component {
 
@@ -23,14 +24,17 @@ export default class MenuOption extends Component {
         </View>
       );
     }
+    const { Touchable, defaultTouchableProps } = makeTouchable(customStyles.OptionTouchableComponent);
     return (
-      <TouchableHighlight onPress={() => this._onSelect()}
-        style={[defaultStyles.option, customStyles.optionWrapper, style]}
-        {...defaultTouchableStyles} {...customStyles.optionTouchable}>
-        <View>
+      <Touchable
+        onPress={() => this._onSelect()}
+        {...defaultTouchableProps}
+        {...customStyles.optionTouchable}
+      >
+        <View style={[defaultStyles.option, customStyles.optionWrapper, style]}>
           {text ? <Text style={customStyles.optionText}>{text}</Text> : children}
         </View>
-      </TouchableHighlight>
+      </Touchable>
     );
   }
 }
@@ -62,7 +66,3 @@ const defaultStyles = StyleSheet.create({
     color: '#ccc',
   },
 });
-
-const defaultTouchableStyles = {
-  underlayColor: 'rgba(0, 0, 0, 0.1)',
-};