#44 Add TouchableOpacity activeOpacity option via props (#53)

* #44 Add TouchableOpacity activeOpacity option via props
peacechen · Mar 24, 2018 · 3686c7a · 3686c7a
1 parent 78eba61
commit 3686c7a
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -112,6 +112,7 @@ Prop                | Type     | Optional | Default      | Description
 `disabled`          | bool     | Yes      | false        | `true` disables opening of the modal
 `childrenContainerStyle`| object   | Yes      | {}           | style definitions for the children container view
 `touchableStyle`    | object   | Yes      | {}           | style definitions for the touchable element
+`touchableActiveOpacity`    | number   | Yes      | 0.2           | opacity for the touchable element on touch
 `supportedOrientations`    | ['portrait', 'landscape'] | Yes      | both      | orientations the modal supports
 `keyboardShouldPersistTaps`| `string` / `bool`         | Yes      | `always`  | passed to underlying ScrollView
 `style`             | object   | Yes      |              | style definitions for the root element

diff --git a/index.js b/index.js
@@ -36,6 +36,7 @@ const propTypes = {
     sectionStyle:                   ViewPropTypes.style,
     childrenContainerStyle:         ViewPropTypes.style,
     touchableStyle:                 ViewPropTypes.style,
+    touchableActiveOpacity:         PropTypes.number,
     sectionTextStyle:               Text.propTypes.style,
     cancelContainerStyle:           ViewPropTypes.style,
     cancelStyle:                    ViewPropTypes.style,
@@ -68,6 +69,7 @@ const defaultProps = {
     sectionStyle:                   {},
     childrenContainerStyle:         {},
     touchableStyle:                 {},
+    touchableActiveOpacity:         0.2,
     sectionTextStyle:               {},
     cancelContainerStyle:           {},
     cancelStyle:                    {},
@@ -138,6 +140,7 @@ export default class ModalSelector extends React.Component {
             <TouchableOpacity
               key={this.props.keyExtractor(option)}
               onPress={() => this.onChange(option)}
+              activeOpacity={this.props.touchableActiveOpacity}
               accessible={this.props.accessible}
               accessibilityLabel={option.accessibilityLabel || undefined}
               {...this.props.passThruProps}
@@ -173,7 +176,7 @@ export default class ModalSelector extends React.Component {
                         </ScrollView>
                     </View>
                     <View style={[styles.cancelContainer, this.props.cancelContainerStyle]}>
-                        <TouchableOpacity onPress={this.close} accessible={this.props.accessible} accessibilityLabel={this.props.cancelButtonAccessibilityLabel}>
+                        <TouchableOpacity onPress={this.close} activeOpacity={this.props.touchableActiveOpacity} accessible={this.props.accessible} accessibilityLabel={this.props.cancelButtonAccessibilityLabel}>
                             <View style={[styles.cancelStyle, this.props.cancelStyle]}>
                                 <Text style={[styles.cancelTextStyle,this.props.cancelTextStyle]}>{this.props.cancelText}</Text>
                             </View>
@@ -214,7 +217,7 @@ export default class ModalSelector extends React.Component {
         return (
             <View style={this.props.style} {...this.props.passThruProps}>
                 {dp}
-                <TouchableOpacity style={this.props.touchableStyle} onPress={this.open} disabled={this.props.disabled}>
+                <TouchableOpacity activeOpacity={this.props.touchableActiveOpacity} style={this.props.touchableStyle} onPress={this.open} disabled={this.props.disabled}>
                     <View style={this.props.childrenContainerStyle} pointerEvents="none">
                         {this.renderChildren()}
                     </View>