Add the ability to pass a custom TouchableComponent

xgfe · May 22, 2017 · 0a9feaf · 0a9feaf
1 parent 2e63d0b
commit 0a9feaf
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 10 deletions.
diff --git a/README.md b/README.md
@@ -91,6 +91,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
 

diff --git a/index.js b/index.js
@@ -333,8 +333,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}
@@ -354,13 +356,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}}
                 >
@@ -379,7 +381,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]}
@@ -389,21 +391,21 @@ class DatePicker extends Component {
                       >
                         {cancelBtnText}
                       </Text>
-                    </TouchableHighlight>
-                    <TouchableHighlight
+                    </TouchableComponent>
+                    <TouchableComponent
                       underlayColor={'transparent'}
                       onPress={this.onPressConfirm}
                       style={[Style.btnText, Style.btnConfirm, customStyles.btnConfirm]}
                     >
                       <Text style={[Style.btnTextText, customStyles.btnTextConfirm]}>{confirmBtnText}</Text>
-                    </TouchableHighlight>
+                    </TouchableComponent>
                   </Animated.View>
-                </TouchableHighlight>
-              </TouchableHighlight>
+                </TouchableComponent>
+              </TouchableComponent>
             </View>
           </Modal>}
         </View>
-      </TouchableHighlight>
+      </TouchableComponent>
     );
   }
 }