add panOnPress

example/.prettierrc.js

@@ -1,6 +1,7 @@
 module.exports = {
   bracketSpacing: false,
   jsxBracketSameLine: true,
+  semi: false,
   singleQuote: true,
   trailingComma: 'all',
-};
+}

src/AppNotificationUI/AppNotificationUI.tsx

@@ -1,34 +1,29 @@
-import React, { FunctionComponent } from 'react'
-import { Image } from 'react-native'
-import { FlexRow } from 'styled-native-kit'
+import React, { FunctionComponent } from "react";
+import { Image } from "react-native";
+import { FlexRow } from "styled-native-kit";
 import {
   AppNotificationComponentProps,
   AppNotificationStyleProps,
   NotificationQueueItem,
-} from '../types'
-import { Card, Circle, Message, TextContainer, Title } from './styled'
+} from "../types";
+import { Card, Circle, Message, TextContainer, Title } from "./styled";
 
-type OwnProps = AppNotificationStyleProps
+type OwnProps = AppNotificationStyleProps;
 
-type Props = OwnProps & NotificationQueueItem & AppNotificationComponentProps
+type Props = OwnProps & NotificationQueueItem & AppNotificationComponentProps;
 
 export const AppNotificationUI: FunctionComponent<Props> = ({
   title,
   message,
   imageUrl,
-  onPress,
   containerStyle,
   imageStyle,
   messageStyle,
   titleStyle,
 }) => {
   return (
-    <Card
-      style={containerStyle}
-      activeOpacity={onPress ? 0.7 : 1}
-      onPress={onPress}
-    >
-      <FlexRow style={{ alignItems: 'flex-start' }}>
+    <Card style={containerStyle}>
+      <FlexRow style={{ alignItems: "flex-start" }}>
         {imageUrl && (
           <Circle as={Image} source={{ uri: imageUrl }} style={imageStyle} />
         )}
@@ -40,7 +35,7 @@ export const AppNotificationUI: FunctionComponent<Props> = ({
         </TextContainer>
       </FlexRow>
     </Card>
-  )
-}
+  );
+};
 
-export default AppNotificationUI
+export default AppNotificationUI;

src/AppNotificationUI/styled.ts

@@ -1,39 +1,39 @@
-import styled, { css } from 'styled-components/native'
-import { TouchableOpacity, Text } from 'react-native'
-import { CircleView } from 'styled-native-kit'
+import styled, { css } from "styled-components/native";
+import { TouchableOpacity, Text } from "react-native";
+import { CircleView } from "styled-native-kit";
 
 export const cardShadow = css`
   shadow-color: #948aa5;
   shadow-offset: 0px 4px;
   shadow-opacity: 0.22;
   shadow-radius: 6px;
   elevation: 3;
-`
+`;
 
-export const Card = styled(TouchableOpacity)`
+export const Card = styled.View`
   background-color: white;
   ${cardShadow};
   padding: ${8 * 2}px ${8 * 1.5}px;
   border-radius: 12px;
   margin: 0 ${8 * 2}px;
   margin-bottom: ${8 / 2}px;
-`
+`;
 
 export const TextContainer = styled.View`
   margin-left: 8px;
   width: 85%;
-`
+`;
 
 export const Title = styled(Text)`
   font-size: 12px;
   text-transform: uppercase;
-`
+`;
 
 export const Message = styled(Text)`
   font-size: 14px;
   line-height: ${14 * 1.3}px;
-`
+`;
 
 export const Circle = styled(CircleView).attrs(() => ({
   size: 33,
-}))``
+}))``;

src/AppNotificationWrapper/AppNotificationWrapper.tsx

@@ -1,95 +1,119 @@
-import { useAnimatedValue, useLayout } from '@redmindab/react-hooks'
-import React, { Fragment, FunctionComponent, useRef, useState } from 'react'
-import { Animated, Dimensions, PanResponder } from 'react-native'
-import { View } from 'styled-native-kit'
+import { useAnimatedValue, useLayout } from "@redmindab/react-hooks";
+import React, { Fragment, FunctionComponent, useRef, useState } from "react";
+import {
+  Animated,
+  Dimensions,
+  PanResponder,
+  TouchableOpacity,
+} from "react-native";
+import { View } from "styled-native-kit";
 import {
   AppNotificationComponentProps,
   AppNotificationStyleProps,
   NotificationQueueItem,
-} from '../types'
-import { Shrink, SlideUpFadeIn } from './animations'
+} from "../types";
+import { Shrink, SlideUpFadeIn } from "./animations";
 
-type OwnProps = AppNotificationStyleProps
+type OwnProps = AppNotificationStyleProps;
 
-type Props = OwnProps & NotificationQueueItem & AppNotificationComponentProps
+type Props = OwnProps & NotificationQueueItem & AppNotificationComponentProps;
 
 type WrapperProps = {
-  height?: number
-  reversed?: boolean
-}
+  height?: number;
+  reversed?: boolean;
+};
+
+type TouchableOpacityProps = {
+  activeOpacity: number;
+  onPress: () => void;
+};
 
 export const AppNotificationWrapper: FunctionComponent<Props> = ({
   animateOut,
   animated = true,
   panEnabled = true,
   alignBottom,
+  onPress,
   children,
   animationWrappers = { in: undefined, out: undefined },
 }) => {
-  const [hide, setHide] = useState(false)
-  const [layout, bindLayout] = useLayout()
-  const translateX = useAnimatedValue(0)
+  const [hide, setHide] = useState(false);
+  const [layout, bindLayout] = useLayout();
+  const translateX = useAnimatedValue(0);
+
+  const touchableProps: TouchableOpacityProps = {
+    activeOpacity: 1,
+    onPress: () => null,
+  };
+
   const pan = useRef(
     PanResponder.create({
       onMoveShouldSetPanResponderCapture: () => true,
       onPanResponderMove: (e, { dx }) => {
-        translateX.setValue(dx)
+        translateX.setValue(dx);
       },
       onPanResponderRelease: (e, { vx, dx }) => {
-        const screenWidth = Dimensions.get('window').width
+        const hasTapped = vx + dx === 0;
+        if (onPress && !panEnabled && hasTapped) {
+          touchableProps.onPress = onPress;
+          touchableProps.activeOpacity = 0.7;
+        }
+        const screenWidth = Dimensions.get("window").width;
         if (Math.abs(vx) >= 0.5 || Math.abs(dx) >= 0.5 * screenWidth) {
           Animated.timing(translateX, {
             toValue: dx > 0 ? screenWidth : -screenWidth,
             duration: 200,
             useNativeDriver: true,
-          }).start(() => setHide(true))
+          }).start(() => setHide(true));
         } else {
           Animated.spring(translateX, {
             toValue: 0,
             bounciness: 10,
             useNativeDriver: true,
-          }).start()
+          }).start();
         }
       },
     })
-  ).current
+  ).current;
 
-  let PanWrapper = Fragment
-  let panWrapperProps = {}
-  let AnimationWrapper = View
-  const wrapperProps: WrapperProps = {}
+  let PanWrapper = Fragment;
+  let panWrapperProps = {};
+  let AnimationWrapper = View;
+  const wrapperProps: WrapperProps = {};
 
   if (animated) {
     if (panEnabled) {
-      PanWrapper = Animated.View
+      PanWrapper = Animated.View;
       panWrapperProps = {
         ...pan.panHandlers,
         style: { opacity: +!hide, transform: [{ translateX }] },
-      }
+      };
     }
 
-    const outAnimation = animationWrappers.out || Shrink
-    const inAnimation = animationWrappers.in || SlideUpFadeIn
+    const outAnimation = animationWrappers.out || Shrink;
+    const inAnimation = animationWrappers.in || SlideUpFadeIn;
 
-    AnimationWrapper = animateOut ? outAnimation : inAnimation
-    wrapperProps.height = layout.height
+    AnimationWrapper = animateOut ? outAnimation : inAnimation;
+    wrapperProps.height = layout.height;
 
     if (hide) {
-      AnimationWrapper = Shrink
+      AnimationWrapper = Shrink;
     }
 
     if (alignBottom && !animateOut) {
-      wrapperProps.reversed = true
+      wrapperProps.reversed = true;
     }
   }
 
   return (
     <AnimationWrapper {...wrapperProps}>
       <PanWrapper {...panWrapperProps}>
-        <View {...bindLayout}>{children}</View>
+        <View {...bindLayout}>
+          <TouchableOpacity {...touchableProps}>{children}</TouchableOpacity>
+        </View>
       </PanWrapper>
     </AnimationWrapper>
-  )
-}
+  );
+};
 
-export default AppNotificationWrapper
+export default AppNotificationWrapper;