Merge pull request #47 from SimformSolutionsPvtLtd/develop

Release v0.0.4
SimformSolutionsPvtLtd · Jul 11, 2023 · fe6c050 · fe6c050
2 parents c6cc4fb + ba2bace
commit fe6c050
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 16 deletions.
diff --git a/README.md b/README.md
@@ -2,7 +2,7 @@
 
 # react-native-reactions
 
-[![npm version](https://img.shields.io/badge/npm%20package-0.0.3-orange)](https://www.npmjs.org/package/react-native-country-code-select) [![Android](https://img.shields.io/badge/Platform-Android-green?logo=android)](https://www.android.com) [![iOS](https://img.shields.io/badge/Platform-iOS-green?logo=apple)](https://developer.apple.com/ios) [![MIT](https://img.shields.io/badge/License-MIT-green)](https://opensource.org/licenses/MIT)
+[![react-native-reactions on npm](https://badgen.net/npm/v/react-native-reactions)](https://www.npmjs.com/package/react-native-reactions) [![react-native-reactions downloads](https://badgen.net/npm/dm/react-native-reactions)](https://www.npmtrends.com/react-native-reactions) [![react-native-reactions install size](https://packagephobia.com/badge?p=react-native-reactions)](https://packagephobia.com/result?p=react-native-reactions) [![Android](https://img.shields.io/badge/Platform-Android-green?logo=android)](https://www.android.com) [![iOS](https://img.shields.io/badge/Platform-iOS-green?logo=apple)](https://developer.apple.com/ios) [![MIT](https://img.shields.io/badge/License-MIT-green)](https://opensource.org/licenses/MIT)
 
 ---
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-native-reactions",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "A React Native component to provide animated reaction picker",
   "main": "lib/index",
   "types": "lib/index.d.ts",
@@ -16,7 +16,26 @@
     "typescript",
     "reactions",
     "animated-reactions",
-    "rn"
+    "rn",
+    "react-native-reactions",
+    "reanimated",
+    "component",
+    "react-component",
+    "ios",
+    "android",
+    "react-native-reaction",
+    "seamless-reactions",
+    "seamless",
+    "seamless-gesture-reaction",
+    "emoji-reactions",
+    "reactions-picker",
+    "reactions-component",
+    "animated-reactions-picker",
+    "picker",
+    "reaction",
+    "animation",
+    "react-reaction",
+    "react-native-fb-reactions-animation"
   ],
   "license": "MIT",
   "files": [

diff --git a/src/components/ReactionView/ReactionView.tsx b/src/components/ReactionView/ReactionView.tsx
@@ -1,9 +1,9 @@
 import React, { useEffect, useRef, useState } from 'react';
 import {
   LayoutRectangle,
+  Pressable,
   SafeAreaView,
   StyleSheet,
-  TouchableOpacity,
   View,
 } from 'react-native';
 import EmojiView from '../EmojiView';
@@ -49,7 +49,6 @@ const ReactionView = (props: ReactionViewProps) => {
     showCardInCenter,
     panResponder,
     position,
-    mainViewWidth,
   } = useReaction(props);
 
   const onPressHandler = () => {
@@ -77,7 +76,7 @@ const ReactionView = (props: ReactionViewProps) => {
   const hoverIndex: number = showTopEmojiCard ? -itemIndex : 1;
   const checkTouchRelease =
     position &&
-    position > emojiViewCoordinates.x + mainViewWidth &&
+    position > emojiViewCoordinates.x &&
     position <= emojiViewCoordinates.width + emojiViewCoordinates.x;
   const onStartShouldSetResponder = () => {
     setShowPopUpCard(!showPopUpCard);
@@ -131,11 +130,10 @@ const ReactionView = (props: ReactionViewProps) => {
         }}
         {...panResponder.panHandlers}>
         {React.isValidElement(children) && (
-          <TouchableOpacity
+          <Pressable
             {...touchableProps}
             hitSlop={{ top: 20, left: 20, right: 20, bottom: 20 }}
             disabled={disabled}
-            activeOpacity={1}
             onLongPress={() => {
               isLongPress ? onPressHandler() : !isSinglePress && onPress();
               onLongPress();
@@ -145,7 +143,7 @@ const ReactionView = (props: ReactionViewProps) => {
               onPress();
             }}>
             {children}
-          </TouchableOpacity>
+          </Pressable>
         )}
       </View>
     </SafeAreaView>

diff --git a/src/components/ReactionView/ReactionViewModal.tsx b/src/components/ReactionView/ReactionViewModal.tsx
@@ -5,7 +5,7 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import { LayoutRectangle, TouchableOpacity, View } from 'react-native';
+import { LayoutRectangle, Pressable, View } from 'react-native';
 import { reactionModalRef } from '../ReactionModal';
 import { useReaction } from './hooks';
 import type { GetCoordinateRef, ReactionViewProps } from './types';
@@ -95,11 +95,10 @@ const ReactionViewModal = ({ touchableProps, ...props }: ReactionViewProps) => {
       }}
       {...panResponder.panHandlers}>
       {React.isValidElement(children) && (
-        <TouchableOpacity
+        <Pressable
           {...touchableProps}
           hitSlop={{ top: 20, left: 20, right: 20, bottom: 20 }}
           disabled={disabled}
-          activeOpacity={1}
           onLongPress={() => {
             isLongPress ? onPressHandler() : !isSinglePress && onPress();
             onLongPress();
@@ -109,7 +108,7 @@ const ReactionViewModal = ({ touchableProps, ...props }: ReactionViewProps) => {
             onPress();
           }}>
           {children}
-        </TouchableOpacity>
+        </Pressable>
       )}
     </View>
   );

diff --git a/src/components/ReactionView/hooks/useReaction.ts b/src/components/ReactionView/hooks/useReaction.ts
@@ -45,13 +45,20 @@ const useReaction = (props: ReactionViewProps) => {
   const isLongPress = showPopupType === GlobalConstants.default;
   const panResponder = useRef(
     PanResponder.create({
-      onMoveShouldSetPanResponder: () => true,
       onStartShouldSetPanResponder: () => true,
       onPanResponderGrant: () => {},
       onPanResponderMove: event => onGesture(event),
       onPanResponderEnd: () => {
         setPosition(0);
       },
+      onMoveShouldSetPanResponder: (_, gestureState) => {
+        const { dx, dy } = gestureState;
+        return dx > 2 || dx < -2 || dy > 2 || dy < -2;
+      },
+      onMoveShouldSetPanResponderCapture: (_, gestureState) => {
+        const { dx, dy } = gestureState;
+        return dx > 2 || dx < -2 || dy > 2 || dy < -2;
+      },
     })
   ).current;
 

diff --git a/src/components/ReactionView/types.ts b/src/components/ReactionView/types.ts
@@ -1,7 +1,7 @@
 import type {
   LayoutRectangle,
+  PressableProps,
   StyleProp,
-  TouchableOpacityProps,
   ViewStyle,
 } from 'react-native';
 import type { emojiProps } from '../EmojiItem/types';
@@ -13,7 +13,7 @@ export interface ReactionViewProps extends emojiProps, EmojiAnimationProps {
   items?: EmojiItemProp[];
   onTap?: (e: EmojiItemProp | undefined) => void;
   cardStyle?: StyleProp<ViewStyle>;
-  touchableProps?: TouchableOpacityProps;
+  touchableProps?: PressableProps;
   itemIndex?: number;
   onShowDismissCard?: (onShowDismissCardType?: boolean) => void;
   isShowCardInCenter?: boolean;