Updated touchable components and added new Expo example with newer React Native version

README.md

@@ -78,10 +78,15 @@ Prop                | Type     | Optional | Default   | Description
 `dropdownStyle`     | object   | Yes      |           | Style of the dropdown list.
 `dropdownTextStyle` | object   | Yes      |           | Style of the dropdown option text.
 `dropdownTextHighlightStyle`   | object | Yes      |  | Style of the dropdown selected option text.
+`dropdownTextProps` | object   | Yes      |           | Add custom props to the dropdown option text
 `adjustFrame`       | func     | Yes      |           | This is a callback after the frame of the dropdown have been calculated and before showing. You will receive a style object as argument with some of the props like `width` `height` `top` `left` and `right`. Change them to appropriate values that accord with your requirement and **make the new style as the return value of this function**.
 `renderRow`         | func     | Yes      |           | Customize render option rows: `function(option,index,isSelected)` **Will render a default row if `null`/`undefined`.**
+`renderRowComponent`| Component | Yes      | `TouchableOpacity` for iOS and `TouchableHighlight` for Android | Customize the touchable component of the rows
+`renderRowProps`    | object   | Yes      |           | Add custom props to the touchable component of the rows
 `renderSeparator`   | func     | Yes      |           | Customize render dropdown list separators. **Will render a default thin gray line if `null`/`undefined`.**
 `renderButtonText`  | func     | Yes      |           | Use this to extract and return text from option object. This text will show on button after option selected. **Invalid in wrapper mode.**
+`renderButtonComponent`| Component | Yes      | `TouchableOpacity` | Customize the touchable component of the button
+`renderButtonProps` | object    | Yes      |           | Add custom props to the touchable component of the button
 `onDropdownWillShow`| func     | Yes      |           | Trigger when dropdown will show by touching the button. **Return `false` can cancel the event.**
 `onDropdownWillHide`| func     | Yes      |           | Trigger when dropdown will hide by touching the button. **Return `false` can cancel the event.**
 `onSelect`          | func     | Yes      |           | Trigger when option row touched with selected `index` and `value`. **Return `false` can cancel the event.**

components/ModalDropdown.js

@@ -11,6 +11,7 @@ import {
   Modal,
   ActivityIndicator,
   FlatList,
+  Platform
 } from 'react-native';
 import PropTypes from 'prop-types';
 
@@ -58,10 +59,21 @@ export default class ModalDropdown extends Component {
       PropTypes.object,
       PropTypes.array,
     ]),
+    dropdownTextProps: PropTypes.object,
     adjustFrame: PropTypes.func,
     renderRow: PropTypes.func,
+    renderRowComponent: PropTypes.oneOfType([
+      PropTypes.func,
+      PropTypes.object,
+    ]),
+    renderRowProps: PropTypes.object,
     renderSeparator: PropTypes.func,
     renderButtonText: PropTypes.func,
+    renderButtonComponent: PropTypes.oneOfType([
+      PropTypes.func,
+      PropTypes.object,
+    ]),
+    renderButtonProps: PropTypes.object,
     onDropdownWillShow: PropTypes.func,
     onDropdownWillHide: PropTypes.func,
     onSelect: PropTypes.func,
@@ -73,10 +85,11 @@ export default class ModalDropdown extends Component {
     scrollEnabled: true,
     defaultIndex: -1,
     defaultValue: 'Please select...',
-    options: null,
     animated: true,
     showsVerticalScrollIndicator: true,
     keyboardShouldPersistTaps: 'never',
+    renderRowComponent: Platform.OS === 'ios' ? TouchableOpacity : TouchableHighlight,
+    renderButtonComponent: TouchableOpacity,
   };
 
   constructor(props) {
@@ -179,15 +192,24 @@ export default class ModalDropdown extends Component {
   }
 
   _renderButton() {
-    const { disabled, accessible, children, textStyle } = this.props;
+    const {
+      disabled,
+      accessible,
+      children,
+      textStyle,
+      renderButtonComponent,
+      renderButtonProps,
+    } = this.props;
+    const ButtonTouchable = renderButtonComponent;
     const { buttonText } = this.state;
 
     return (
-      <TouchableOpacity
+      <ButtonTouchable
         ref={button => (this._button = button)}
         disabled={disabled}
         accessible={accessible}
         onPress={this._onButtonPress}
+        {...renderButtonProps}
       >
         {children || (
           <View style={styles.button}>
@@ -196,7 +218,7 @@ export default class ModalDropdown extends Component {
             </Text>
           </View>
         )}
-      </TouchableOpacity>
+      </ButtonTouchable>
     );
   }
 
@@ -329,10 +351,14 @@ export default class ModalDropdown extends Component {
   _renderItem = ({ item, index, separators }) => {
     const {
       renderRow,
+      renderRowComponent,
+      renderRowProps,
       dropdownTextStyle,
       dropdownTextHighlightStyle,
       accessible,
+      dropdownTextProps,
     } = this.props;
+    const RowTouchable = renderRowComponent;
     const { selectedIndex } = this.state;
     const key = `row_${index}`;
     const highlighted = index === selectedIndex;
@@ -345,51 +371,22 @@ export default class ModalDropdown extends Component {
           highlighted && styles.highlightedRowText,
           highlighted && dropdownTextHighlightStyle,
         ]}
+        {...dropdownTextProps}
       >
         {item}
       </Text>
     ) : (
       renderRow(item, index, highlighted)
     );
-    const preservedProps = {
+
+    const touchableProps = {
       key,
       accessible,
       onPress: () => this._onRowPress(item, index, separators),
+      ...renderRowProps
     };
 
-    if (TOUCHABLE_ELEMENTS.find(name => name === row.type.displayName)) {
-      const props = { ...row.props };
-      props.key = preservedProps.key;
-      props.onPress = preservedProps.onPress;
-      const { children } = row.props;
-
-      switch (row.type.displayName) {
-        case 'TouchableHighlight': {
-          return <TouchableHighlight {...props}>{children}</TouchableHighlight>;
-        }
-        case 'TouchableOpacity': {
-          return <TouchableOpacity {...props}>{children}</TouchableOpacity>;
-        }
-        case 'TouchableWithoutFeedback': {
-          return (
-            <TouchableWithoutFeedback {...props}>
-              {children}
-            </TouchableWithoutFeedback>
-          );
-        }
-        case 'TouchableNativeFeedback': {
-          return (
-            <TouchableNativeFeedback {...props}>
-              {children}
-            </TouchableNativeFeedback>
-          );
-        }
-        default:
-          break;
-      }
-    }
-
-    return <TouchableHighlight {...preservedProps}>{row}</TouchableHighlight>;
+    return <RowTouchable {...touchableProps}>{row}</RowTouchable>;
   };
 
   _onRowPress(rowData, rowID, highlightRow) {

expo-example/.expo-shared/assets.json

@@ -0,0 +1,4 @@
+{
+  "12bb71342c6255bbf50437ec8f4441c083f47cdb74bd89160c15e4f43e52a1cb": true,
+  "40b842e832070c58deac6aa9e08fa459302ee3f9da492c7e77d93d2fbf4a56fd": true
+}

expo-example/.gitignore

@@ -0,0 +1,13 @@
+node_modules/**/*
+.expo/*
+npm-debug.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+*.orig.*
+web-build/
+
+# macOS
+.DS_Store