Release v1.6.0 (#32)

* Explicitly do not use native animation driver

* Fix pressIn animation only starts after moving

* Release v1.6.0

* Update readme on new props with example

Author: carsonwah

README.md

@@ -67,6 +67,7 @@ const renderCustomPopup = ({ appIconSource, appTitle, timeText, title, body }) =
   <View>
     <Text>{title}</Text>
     <Text>{body}</Text>
+    <Button title='My button' onPress={() => console.log('Popup button onPress!')} />
   </View>
 );
 
@@ -76,7 +77,9 @@ class MyComponent extends React.Component {
         <View style={styles.container}>
           <NotificationPopup
             ref={ref => this.popup = ref}
-            renderPopupContent={renderCustomPopup} />
+            renderPopupContent={renderCustomPopup}
+            shouldChildHandleResponderStart={true}
+            shouldChildHandleResponderMove={true} />
         </View>
       );
     }
@@ -104,6 +107,8 @@ componentDidMount() {
 | Param | Type | Default | Description |
 | --- | --- | --- | --- |
 | **`renderPopupContent`** | function <br /> `(options?: { appIconSource?: ImageSourcePropType; appTitle?: string; timeText?: string; title?: string;body?: string; }) => React.ReactElement<any>` | null | Render your own custom popup body (Optional) |
+| **`shouldChildHandleResponderStart`** | boolean | false | By default, parent popup will prevent bubbling event to child. This should be set to true if you have button inside your custom popup that wants to receive the event. |
+| **`shouldChildHandleResponderMove`** | boolean | false | By default, parent popup will prevent bubbling event to child. This should be set to true if you have button inside your custom popup that wants to receive the event. |
 
 ### Methods
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-push-notification-popup",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "description": "React Native Push Notification Popup Component",
   "main": "src/index.js",
   "types": "./types.d.ts",

src/views/DefaultPopup.js

@@ -43,6 +43,8 @@ export default class DefaultPopup extends Component {
 
   static propTypes = {
     renderPopupContent: PropTypes.func,
+    shouldChildHandleResponderStart: PropTypes.bool,
+    shouldChildHandleResponderMove: PropTypes.bool,
   }
 
   constructor(props) {
@@ -74,9 +76,9 @@ export default class DefaultPopup extends Component {
     };
     this._panResponder = PanResponder.create({
       onStartShouldSetPanResponder: (e, gestureState) => true,
-      // onStartShouldSetPanResponderCapture: (e, gestureState) => false,
+      onStartShouldSetPanResponderCapture: (e, gestureState) => props.shouldChildHandleResponderStart ? false : true,  // Capture child event
       onMoveShouldSetPanResponder: (e, gestureState) => true,
-      // onMoveShouldSetPanResponderCapture: (e, gestureState) => false,
+      onMoveShouldSetPanResponderCapture: (e, gestureState) => props.shouldChildHandleResponderMove ? false : true,  // Capture child event
       onPanResponderGrant: this._onPanResponderGrant,
       onPanResponderMove: this._onPanResponderMove,
       onPanResponderRelease: this._onPanResponderRelease,
@@ -118,7 +120,7 @@ export default class DefaultPopup extends Component {
     } else {
       // 2. If not leaving screen -> slide back to original position
       this.clearTimerIfExist();
-      Animated.timing(containerDragOffsetY, { toValue: 0, duration: 200, useNativeDriver: true })
+      Animated.timing(containerDragOffsetY, { toValue: 0, duration: 200, useNativeDriver: false })
         .start(({finished}) => {
           // Reset a new countdown
           this.countdownToSlideOut();
@@ -190,15 +192,15 @@ export default class DefaultPopup extends Component {
     // console.log('PressIn!');  // DEBUG
     // Show feedback as soon as user press down
     const { containerScale } = this.state;
-    Animated.spring(containerScale, { toValue: 0.95, friction: 8, useNativeDriver: true })
+    Animated.spring(containerScale, { toValue: 0.95, friction: 8, useNativeDriver: false })
       .start();
   }
 
   onPressOutFeedback = () => {
     // console.log('PressOut!');  // DEBUG
     // Show feedback as soon as user press down
     const { containerScale } = this.state;
-    Animated.spring(containerScale, { toValue: 1, friction: 8, useNativeDriver: true })
+    Animated.spring(containerScale, { toValue: 1, friction: 8, useNativeDriver: false })
       .start();
   }
 
@@ -220,7 +222,7 @@ export default class DefaultPopup extends Component {
   slideIn = (duration) => {
     // Animate "this.state.containerSlideOffsetY"
     const { containerSlideOffsetY } = this.state;  // Using the new one is fine
-    Animated.timing(containerSlideOffsetY, { toValue: 1, duration: duration || 400, useNativeDriver: true })  // TODO: customize
+    Animated.timing(containerSlideOffsetY, { toValue: 1, duration: duration || 400, useNativeDriver: false })  // TODO: customize
       .start(({finished}) => {
         this.countdownToSlideOut();
       });
@@ -237,7 +239,7 @@ export default class DefaultPopup extends Component {
     const { containerSlideOffsetY } = this.state;
 
     // Reset animation to 0 && show it && animate
-    Animated.timing(containerSlideOffsetY, { toValue: 0, duration: duration || 400, useNativeDriver: true })  // TODO: customize
+    Animated.timing(containerSlideOffsetY, { toValue: 0, duration: duration || 400, useNativeDriver: false })  // TODO: customize
       .start(({finished}) => {
         // Reset everything and hide the popup
         this.setState({ show: false });

types.d.ts

@@ -20,6 +20,8 @@ declare module "react-native-push-notification-popup" {
 
   interface PushNotificationPopupProps {
     renderPopupContent?: (options: ContentOptionsBase) => ReactElement;
+    shouldChildHandleResponderStart?: boolean;
+    shouldChildHandleResponderMove?: boolean;
   }
 
   export default class ReactNativePushNotificationPopup extends Component<PushNotificationPopupProps, any> {