Merge pull request #128 from avencat/customTouchableComponent

Add the ability to pass a custom TouchableComponent

Author: feyy

README.md

@@ -92,6 +92,7 @@ You can check [index.js](https://github.com/xgfe/react-native-datepicker/blob/ma
 | onCloseModal | - | `function` | This is called when the DatePicker Modal close |
 | onPressMask | - | `function` | This is called when clicking the ios modal mask |
 | modalOnResponderTerminationRequest | - | `function` | Set the callback for React Native's [Gesture Responder System](https://facebook.github.io/react-native/docs/gesture-responder-system.html#responder-lifecycle)'s call to `onResponderTerminationRequest`. By default this will reject a termination request, but can be overidden in case the View under the Modal is implementing custom gesture responders, and you wish for those to be overidden in certain cases.  |
+| TouchableComponent | `TouchableHighlight` | `Component` | Replace the `TouchableHighlight` with a custom `Component`. For example : `TouchableOpacity` |
 
 ### Property `customStyles` available keys
 

index.js

@@ -342,8 +342,10 @@ class DatePicker extends Component {
       disabled && customStyles.disabled
     ];
 
+    const TouchableComponent = this.props.TouchableComponent ? this.props.TouchableComponent : TouchableHighlight;
+
     return (
-      <TouchableHighlight
+      <TouchableComponent
         style={[Style.dateTouch, style]}
         underlayColor={'transparent'}
         onPress={this.onPressDate}
@@ -369,13 +371,13 @@ class DatePicker extends Component {
             <View
               style={{flex: 1}}
             >
-              <TouchableHighlight
+              <TouchableComponent
                 style={Style.datePickerMask}
                 activeOpacity={1}
                 underlayColor={'#00000077'}
                 onPress={this.onPressMask}
               >
-                <TouchableHighlight
+                <TouchableComponent
                   underlayColor={'#fff'}
                   style={{flex: 1}}
                 >
@@ -394,7 +396,7 @@ class DatePicker extends Component {
                         style={[Style.datePicker, customStyles.datePicker]}
                       />
                     </View>
-                    <TouchableHighlight
+                    <TouchableComponent
                       underlayColor={'transparent'}
                       onPress={this.onPressCancel}
                       style={[Style.btnText, Style.btnCancel, customStyles.btnCancel]}
@@ -405,22 +407,22 @@ class DatePicker extends Component {
                       >
                         {cancelBtnText}
                       </Text>
-                    </TouchableHighlight>
-                    <TouchableHighlight
+                    </TouchableComponent>
+                    <TouchableComponent
                       underlayColor={'transparent'}
                       onPress={this.onPressConfirm}
                       style={[Style.btnText, Style.btnConfirm, customStyles.btnConfirm]}
                       testID={confirmBtnTestID}
                     >
                       <Text style={[Style.btnTextText, customStyles.btnTextConfirm]}>{confirmBtnText}</Text>
-                    </TouchableHighlight>
+                    </TouchableComponent>
                   </Animated.View>
-                </TouchableHighlight>
-              </TouchableHighlight>
+                </TouchableComponent>
+              </TouchableComponent>
             </View>
           </Modal>}
         </View>
-      </TouchableHighlight>
+      </TouchableComponent>
     );
   }
 }