Add enablePointerEvents prop to Collapsible (oblador#250)

Author: okb1100

Collapsible.js

@@ -10,6 +10,7 @@ export default class Collapsible extends Component {
     align: PropTypes.oneOf(['top', 'center', 'bottom']),
     collapsed: PropTypes.bool,
     collapsedHeight: PropTypes.number,
+    enablePointerEvents: PropTypes.bool,
     duration: PropTypes.number,
     easing: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
     style: ViewPropTypes.style,
@@ -21,6 +22,7 @@ export default class Collapsible extends Component {
     align: 'top',
     collapsed: true,
     collapsedHeight: 0,
+    enablePointerEvents: false,
     duration: 300,
     easing: 'easeOutCubic',
     onAnimationEnd: () => null,
@@ -165,7 +167,7 @@ export default class Collapsible extends Component {
   };
 
   render() {
-    const { collapsed } = this.props;
+    const { collapsed, enablePointerEvents } = this.props;
     const { height, contentHeight, measuring, measured } = this.state;
     const hasKnownHeight = !measuring && (measured || collapsed);
     const style = hasKnownHeight && {
@@ -196,7 +198,10 @@ export default class Collapsible extends Component {
       ];
     }
     return (
-      <Animated.View style={style} pointerEvents={collapsed ? 'none' : 'auto'}>
+      <Animated.View
+        style={style}
+        pointerEvents={!enablePointerEvents && collapsed ? 'none' : 'auto'}
+      >
         <Animated.View
           ref={this._handleRef}
           style={[this.props.style, contentStyle]}

README.md

@@ -26,6 +26,7 @@ import Collapsible from 'react-native-collapsible';
 | **`align`**           | Alignment of the content when transitioning, can be `top`, `center` or `bottom`                                                                                                                                                                                                                                         | `top`          |
 | **`collapsed`**       | Whether to show the child components or not                                                                                                                                                                                                                                                                             | `true`         |
 | **`collapsedHeight`** | Which height should the component collapse to                                                                                                                                                                                                                                                                           | `0`            |
+| **`enablePointerEvents`** | Enable pointer events on collapsed view                                                                                                                                                                                                                                                                              | `false`        |
 | **`duration`**        | Duration of transition in milliseconds                                                                                                                                                                                                                                                                                  | `300`          |
 | **`easing`**          | Function or function name from [`Easing`](https://github.com/facebook/react-native/blob/master/Libraries/Animated/src/Easing.js) (or [`tween-functions`](https://github.com/chenglou/tween-functions) if < RN 0.8). Collapsible will try to combine `Easing` functions for you if you name them like `tween-functions`. | `easeOutCubic` |
 | **`style`**           | Optional styling for the container                                                                                                                                                                                                                                                                                      |                |

index.d.ts

@@ -63,6 +63,13 @@ export interface CollapsibleProps {
    */
   duration?: number;
 
+  /**
+   * Enable pointer events on collapsed view
+   * 
+   * @default false
+   */
+  enablePointerEvents?: boolean;
+
   /**
    * Function or function name from Easing (or tween-functions if < RN 0.8). Collapsible will try to combine Easing functions for you if you name them like tween-functions
    *