fix: change old gesture handler useAnimatedGestureHandler to the new API (#2563)

* feat: configure ReactionList reaction theme (#2561)

* fix: expo sample app keyboardVerticalOffset for channel and thread screen

* fix: change old gesture handler useAnimatedGestureHandler to the new API

Author: khushal87

package/package.json

@@ -141,7 +141,6 @@
     "moment": "2.29.2",
     "prettier": "2.8.8",
     "react": "18.2.0",
-    "react-docgen-typescript": "1.22.0",
     "react-dom": "18.2.0",
     "react-native": "0.73.6",
     "react-native-builder-bob": "0.23.1",

package/src/components/ImageGallery/ImageGallery.tsx

@@ -1,11 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { Image, ImageStyle, Keyboard, Platform, StyleSheet, ViewStyle } from 'react-native';
+import { Image, ImageStyle, Keyboard, StyleSheet, ViewStyle } from 'react-native';
 
-import {
-  PanGestureHandler,
-  PinchGestureHandler,
-  TapGestureHandler,
-} from 'react-native-gesture-handler';
+import { GestureDetector } from 'react-native-gesture-handler';
 
 import Animated, {
   Easing,
@@ -41,10 +37,7 @@ import {
 import { useImageGalleryGestures } from './hooks/useImageGalleryGestures';
 
 import { useImageGalleryContext } from '../../contexts/imageGalleryContext/ImageGalleryContext';
-import {
-  OverlayProviderProps,
-  useOverlayContext,
-} from '../../contexts/overlayContext/OverlayContext';
+import { OverlayProviderProps } from '../../contexts/overlayContext/OverlayContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useViewport } from '../../hooks/useViewport';
 import { isVideoPackageAvailable, VideoType } from '../../native';
@@ -53,8 +46,6 @@ import { getResizedImageUrl } from '../../utils/getResizedImageUrl';
 import { getUrlOfImageAttachment } from '../../utils/getUrlOfImageAttachment';
 import { getGiphyMimeType } from '../Attachment/utils/getGiphyMimeType';
 
-const isAndroid = Platform.OS === 'android';
-
 const MARGIN = 32;
 
 export enum HasPinched {
@@ -146,7 +137,6 @@ export const ImageGallery = <
     },
   } = useTheme();
   const [gridPhotos, setGridPhotos] = useState<Photo<StreamChatGenerics>[]>([]);
-  const { overlay } = useOverlayContext();
   const { messages, selectedMessage, setSelectedMessage } =
     useImageGalleryContext<StreamChatGenerics>();
 
@@ -212,14 +202,6 @@ export const ImageGallery = <
    */
   const headerFooterVisible = useSharedValue(1);
 
-  /**
-   * Gesture handler refs
-   */
-  const doubleTapRef = useRef<TapGestureHandler>(null);
-  const panRef = useRef<PanGestureHandler>(null);
-  const pinchRef = useRef<PinchGestureHandler>(null);
-  const singleTapRef = useRef<TapGestureHandler>(null);
-
   /**
    * Shared values for movement
    */
@@ -353,7 +335,7 @@ export const ImageGallery = <
     }
   }, [uriForCurrentImage]);
 
-  const { onDoubleTap, onPan, onPinch, onSingleTap } = useImageGalleryGestures({
+  const { doubleTap, pan, pinch, singleTap } = useImageGalleryGestures({
     currentImageHeight,
     halfScreenHeight,
     halfScreenWidth,
@@ -518,38 +500,13 @@ export const ImageGallery = <
       style={[StyleSheet.absoluteFillObject, showScreenStyle]}
     >
       <Animated.View style={[StyleSheet.absoluteFillObject, containerBackground]} />
-      <TapGestureHandler
-        minPointers={1}
-        numberOfTaps={1}
-        onGestureEvent={onSingleTap}
-        ref={singleTapRef}
-        waitFor={[panRef, pinchRef, doubleTapRef]}
-      >
+      <GestureDetector gesture={singleTap}>
         <Animated.View style={StyleSheet.absoluteFillObject}>
-          <TapGestureHandler
-            maxDeltaX={8}
-            maxDeltaY={8}
-            maxDist={8}
-            minPointers={1}
-            numberOfTaps={2}
-            onGestureEvent={onDoubleTap}
-            ref={doubleTapRef}
-          >
+          <GestureDetector gesture={doubleTap}>
             <Animated.View style={StyleSheet.absoluteFillObject}>
-              <PinchGestureHandler
-                onGestureEvent={onPinch}
-                ref={pinchRef}
-                simultaneousHandlers={[panRef]}
-              >
+              <GestureDetector gesture={pinch}>
                 <Animated.View style={StyleSheet.absoluteFill}>
-                  <PanGestureHandler
-                    enabled={overlay === 'gallery'}
-                    maxPointers={isAndroid ? undefined : 1}
-                    minDist={10}
-                    onGestureEvent={onPan}
-                    ref={panRef}
-                    simultaneousHandlers={[pinchRef]}
-                  >
+                  <GestureDetector gesture={pan}>
                     <Animated.View style={StyleSheet.absoluteFill}>
                       <Animated.View style={[styles.animatedContainer, pagerStyle, pager]}>
                         {imageGalleryAttachments.map((photo, i) =>
@@ -609,13 +566,13 @@ export const ImageGallery = <
                         )}
                       </Animated.View>
                     </Animated.View>
-                  </PanGestureHandler>
+                  </GestureDetector>
                 </Animated.View>
-              </PinchGestureHandler>
+              </GestureDetector>
             </Animated.View>
-          </TapGestureHandler>
+          </GestureDetector>
         </Animated.View>
-      </TapGestureHandler>
+      </GestureDetector>
       <ImageGalleryHeader<StreamChatGenerics>
         opacity={headerFooterOpacity}
         photo={imageGalleryAttachments[selectedIndex]}

package/src/components/ImageGallery/components/ImageGalleryFooter.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { SafeAreaView, StyleSheet, Text, TouchableOpacity, View, ViewStyle } from 'react-native';
-import Animated, { Extrapolate, interpolate, useAnimatedStyle } from 'react-native-reanimated';
+import Animated, { Extrapolation, interpolate, useAnimatedStyle } from 'react-native-reanimated';
 
 import { ImageGalleryVideoControl } from './ImageGalleryVideoControl';
 
@@ -148,7 +148,7 @@ export const ImageGalleryFooterWithContext = <
       opacity: opacity.value,
       transform: [
         {
-          translateY: interpolate(visible.value, [0, 1], [height, 0], Extrapolate.CLAMP),
+          translateY: interpolate(visible.value, [0, 1], [height, 0], Extrapolation.CLAMP),
         },
       ],
     }),

package/src/components/ImageGallery/components/ImageGalleryHeader.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo, useState } from 'react';
 import { Pressable, SafeAreaView, StyleSheet, Text, View, ViewStyle } from 'react-native';
-import Animated, { Extrapolate, interpolate, useAnimatedStyle } from 'react-native-reanimated';
+import Animated, { Extrapolation, interpolate, useAnimatedStyle } from 'react-native-reanimated';
 
 import { useOverlayContext } from '../../../contexts/overlayContext/OverlayContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
@@ -114,7 +114,7 @@ export const ImageGalleryHeader = <
     opacity: opacity.value,
     transform: [
       {
-        translateY: interpolate(visible.value, [0, 1], [-height, 0], Extrapolate.CLAMP),
+        translateY: interpolate(visible.value, [0, 1], [-height, 0], Extrapolation.CLAMP),
       },
     ],
   }));