react-native-gifted-chat 2.8.2-alpha.1 → 2.8.2-alpha.3

package/src/__tests__/__snapshots__/GiftedChat.test.tsx.snap

@@ -1,33 +1,31 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should render <GiftedChat/> and compare with snapshot 1`] = `
-<KeyboardProvider>
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
   <View
+    onLayout={[Function]}
     style={
-      {
-        "flex": 1,
-      }
+      [
+        {
+          "flex": 1,
+        },
+        {
+          "overflow": "hidden",
+        },
+      ]
     }
-  >
-    <View
-      onLayout={[Function]}
-      style={
-        [
-          {
-            "flex": 1,
-          },
-          {
-            "overflow": "hidden",
-          },
-        ]
-      }
-      testID="GC_WRAPPER"
-    />
-  </View>
-</KeyboardProvider>
+    testID="GC_WRAPPER"
+  />
+</View>
 `;
 
-exports[`should render <GiftedChat/> with disableKeyboardController=true 1`] = `
+exports[`should render <GiftedChat/> with isKeyboardInternallyHandled=false 1`] = `
 <View
   style={
     {

package/src/__tests__/__snapshots__/LoadEarlier.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`should render <LoadEarlier /> and compare with snapshot 1`] = `
+exports[`should render <LoadEarlierMessages /> and compare with snapshot 1`] = `
 <View
   accessibilityRole="button"
   accessibilityState={
@@ -23,7 +23,33 @@ exports[`should render <LoadEarlier /> and compare with snapshot 1`] = `
   accessible={true}
   collapsable={false}
   focusable={true}
+  jestAnimatedProps={
+    {
+      "value": {},
+    }
+  }
+  jestAnimatedStyle={
+    {
+      "value": {
+        "opacity": 1,
+      },
+    }
+  }
+  jestInlineStyle={
+    [
+      [
+        {
+          "alignItems": "center",
+          "marginBottom": 10,
+          "marginTop": 5,
+        },
+        undefined,
+      ],
+    ]
+  }
+  onBlur={[Function]}
   onClick={[Function]}
+  onFocus={[Function]}
   onResponderGrant={[Function]}
   onResponderMove={[Function]}
   onResponderRelease={[Function]}
@@ -31,12 +57,17 @@ exports[`should render <LoadEarlier /> and compare with snapshot 1`] = `
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
   style={
-    {
-      "alignItems": "center",
-      "marginBottom": 10,
-      "marginTop": 5,
-      "opacity": 1,
-    }
+    [
+      {
+        "alignItems": "center",
+        "marginBottom": 10,
+        "marginTop": 5,
+      },
+      undefined,
+      {
+        "opacity": 1,
+      },
+    ]
   }
 >
   <View

package/src/__tests__/__snapshots__/MessageImage.test.tsx.snap

@@ -2,23 +2,42 @@
 
 exports[`MessageImage should  render <MessageImage /> and compare with snapshot 1`] = `
 <View>
-  <Lightbox
-    activeProps={
-      [
-        {
-          "style": [
-            {
-              "flex": 1,
-            },
-            {
-              "resizeMode": "contain",
-            },
-          ],
-        },
-      ]
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": undefined,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      {
+        "opacity": 1,
+      }
     }
   >
     <Image
+      onLayout={[Function]}
       source={
         {
           "uri": "url://to/image.png",
@@ -37,7 +56,7 @@ exports[`MessageImage should  render <MessageImage /> and compare with snapshot
         ]
       }
     />
-  </Lightbox>
+  </View>
 </View>
 `;
 

package/src/__tests__/__snapshots__/Send.test.tsx.snap

@@ -24,7 +24,32 @@ exports[`Send should always render <Send /> and compare with snapshot 1`] = `
   accessible={true}
   collapsable={false}
   focusable={true}
+  jestAnimatedProps={
+    {
+      "value": {},
+    }
+  }
+  jestAnimatedStyle={
+    {
+      "value": {
+        "opacity": 1,
+      },
+    }
+  }
+  jestInlineStyle={
+    [
+      [
+        {
+          "height": 44,
+          "justifyContent": "flex-end",
+        },
+        undefined,
+      ],
+    ]
+  }
+  onBlur={[Function]}
   onClick={[Function]}
+  onFocus={[Function]}
   onResponderGrant={[Function]}
   onResponderMove={[Function]}
   onResponderRelease={[Function]}
@@ -32,11 +57,16 @@ exports[`Send should always render <Send /> and compare with snapshot 1`] = `
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
   style={
-    {
-      "height": 44,
-      "justifyContent": "flex-end",
-      "opacity": 1,
-    }
+    [
+      {
+        "height": 44,
+        "justifyContent": "flex-end",
+      },
+      undefined,
+      {
+        "opacity": 1,
+      },
+    ]
   }
   testID="GC_SEND_TOUCHABLE"
 >
@@ -90,7 +120,32 @@ exports[`Send should render <Send /> where there is input and compare with snaps
   accessible={true}
   collapsable={false}
   focusable={true}
+  jestAnimatedProps={
+    {
+      "value": {},
+    }
+  }
+  jestAnimatedStyle={
+    {
+      "value": {
+        "opacity": 1,
+      },
+    }
+  }
+  jestInlineStyle={
+    [
+      [
+        {
+          "height": 44,
+          "justifyContent": "flex-end",
+        },
+        undefined,
+      ],
+    ]
+  }
+  onBlur={[Function]}
   onClick={[Function]}
+  onFocus={[Function]}
   onResponderGrant={[Function]}
   onResponderMove={[Function]}
   onResponderRelease={[Function]}
@@ -98,11 +153,16 @@ exports[`Send should render <Send /> where there is input and compare with snaps
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
   style={
-    {
-      "height": 44,
-      "justifyContent": "flex-end",
-      "opacity": 1,
-    }
+    [
+      {
+        "height": 44,
+        "justifyContent": "flex-end",
+      },
+      undefined,
+      {
+        "opacity": 1,
+      },
+    ]
   }
   testID="GC_SEND_TOUCHABLE"
 >

package/src/components/TouchableOpacity.tsx

@@ -0,0 +1,45 @@
+import React, { useCallback } from 'react'
+import { Pressable } from 'react-native-gesture-handler'
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated'
+
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable)
+
+export interface TouchableOpacityProps extends React.ComponentProps<typeof AnimatedPressable> {
+  activeOpacity?: number
+}
+
+export function TouchableOpacity({
+  children,
+  style,
+  activeOpacity = 0.2,
+  ...rest
+}: TouchableOpacityProps) {
+  const opacity = useSharedValue(1)
+
+  const handlePressIn = useCallback(() => {
+    opacity.value = withTiming(activeOpacity, { duration: 150 })
+  }, [activeOpacity, opacity])
+
+  const handlePressOut = useCallback(() => {
+    opacity.value = withTiming(1, { duration: 150 })
+  }, [opacity])
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    opacity: opacity.value,
+  }))
+
+  return (
+    <AnimatedPressable
+      {...rest}
+      onPressIn={handlePressIn}
+      onPressOut={handlePressOut}
+      style={[style, animatedStyle]}
+    >
+      {children}
+    </AnimatedPressable>
+  )
+}

package/src/types.ts

@@ -1,5 +1,4 @@
 import { StyleProp, ViewStyle } from 'react-native'
-import { LightboxProps } from 'react-native-lightbox-v2'
 
 export { ActionsProps } from './Actions'
 export { AvatarProps } from './Avatar'
@@ -14,7 +13,7 @@ export { ComposerProps } from './Composer'
 export { DayProps } from './Day'
 export { GiftedAvatarProps } from './GiftedAvatar'
 export { InputToolbarProps } from './InputToolbar'
-export { LoadEarlierProps } from './LoadEarlier'
+export { LoadEarlierMessagesProps } from './LoadEarlierMessages'
 export { MessageProps } from './Message'
 export { MessageContainerProps } from './MessageContainer'
 export { MessageImageProps } from './MessageImage'
@@ -77,7 +76,6 @@ export interface MessageVideoProps<TMessage extends IMessage> {
   containerStyle?: StyleProp<ViewStyle>
   videoStyle?: StyleProp<ViewStyle>
   videoProps?: object
-  lightboxProps?: LightboxProps
 }
 
 export interface MessageAudioProps<TMessage extends IMessage> {

package/src/utils.ts

@@ -46,7 +46,7 @@ function processCallbackArguments (args: unknown[]): unknown[] {
   return params
 }
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+ 
 export function useCallbackDebounced<T extends (...args: any[]) => any>(callbackFunc: T, deps: React.DependencyList = [], time: number): (...args: Parameters<T>) => void {
   const timeoutId = useRef<ReturnType<typeof setTimeout>>(undefined)
 
@@ -70,7 +70,7 @@ export function useCallbackDebounced<T extends (...args: any[]) => any>(callback
   return savedFunc
 }
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+ 
 export function useCallbackThrottled<T extends (...args: any[]) => any>(callbackFunc: T, deps: React.DependencyList = [], time: number): (...args: Parameters<T>) => void {
   const lastExecution = useRef<number>(0)
   const timeoutId = useRef<ReturnType<typeof setTimeout>>(undefined)