react-native-gifted-chat 2.9.0-alpha.0 → 3.0.0-alpha.1

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

@@ -1,48 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should render <GiftedChat/> and compare with snapshot 1`] = `
-<KeyboardProvider>
-  <View
-    style={
-      {
-        "flex": 1,
-      }
-    }
-  >
-    <View
-      style={
-        {
-          "flex": 1,
-        }
-      }
-    >
-      <View
-        onLayout={[Function]}
-        style={
-          [
-            {
-              "flex": 1,
-            },
-            {
-              "overflow": "hidden",
-            },
-          ]
-        }
-        testID="GC_WRAPPER"
-      />
-    </View>
-  </View>
-</KeyboardProvider>
-`;
-
-exports[`should render <GiftedChat/> with isKeyboardInternallyHandled=false 1`] = `
-<KeyboardProvider>
-  <View
-    style={
-      {
-        "flex": 1,
-      }
+<View
+  style={
+    {
+      "flex": 1,
     }
+  }
+>
+  <KeyboardProvider
+    navigationBarTranslucent={true}
+    statusBarTranslucent={true}
   >
     <View
       style={
@@ -52,20 +20,29 @@ exports[`should render <GiftedChat/> with isKeyboardInternallyHandled=false 1`]
       }
     >
       <View
-        onLayout={[Function]}
+        behavior="padding"
         style={
-          [
-            {
-              "flex": 1,
-            },
-            {
-              "overflow": "hidden",
-            },
-          ]
+          {
+            "flex": 1,
+          }
         }
-        testID="GC_WRAPPER"
-      />
+      >
+        <View
+          onLayout={[Function]}
+          style={
+            [
+              {
+                "flex": 1,
+              },
+              {
+                "overflow": "hidden",
+              },
+            ]
+          }
+          testID="GC_WRAPPER"
+        />
+      </View>
     </View>
-  </View>
-</KeyboardProvider>
+  </KeyboardProvider>
+</View>
 `;

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

@@ -2,11 +2,12 @@
 
 exports[`should render <LoadEarlierMessages /> and compare with snapshot 1`] = `
 <View
+  accessibilityRole="button"
   accessibilityState={
     {
       "busy": undefined,
       "checked": undefined,
-      "disabled": undefined,
+      "disabled": false,
       "expanded": undefined,
       "selected": undefined,
     }
@@ -20,100 +21,13 @@ exports[`should render <LoadEarlierMessages /> and compare with snapshot 1`] = `
     }
   }
   accessible={true}
-  collapsable={false}
   focusable={true}
-  onBlur={[Function]}
   onClick={[Function]}
-  onFocus={[Function]}
   onResponderGrant={[Function]}
   onResponderMove={[Function]}
   onResponderRelease={[Function]}
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
->
-  <View
-    accessibilityRole="button"
-    collapsable={false}
-    disabled={false}
-    jestAnimatedProps={
-      {
-        "value": {},
-      }
-    }
-    jestAnimatedStyle={
-      {
-        "value": {
-          "opacity": 1,
-        },
-      }
-    }
-    jestInlineStyle={
-      [
-        [
-          {
-            "alignItems": "center",
-            "marginVertical": 10,
-          },
-          undefined,
-        ],
-      ]
-    }
-    style={
-      [
-        {
-          "alignItems": "center",
-          "marginVertical": 10,
-        },
-        undefined,
-        {
-          "opacity": 1,
-        },
-      ]
-    }
-  >
-    <View
-      style={
-        [
-          {
-            "alignItems": "center",
-            "justifyContent": "center",
-          },
-          {
-            "backgroundColor": "#b2b2b2",
-            "borderRadius": 15,
-            "paddingHorizontal": 10,
-            "paddingVertical": 5,
-          },
-          undefined,
-        ]
-      }
-    >
-      <View
-        style={
-          {
-            "paddingBottom": 4,
-            "paddingTop": 3,
-          }
-        }
-      >
-        <Text
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "color": "#fff",
-                "fontSize": 12,
-                "lineHeight": 13,
-              },
-              undefined,
-            ]
-          }
-        >
-          Load earlier messages
-        </Text>
-      </View>
-    </View>
-  </View>
-</View>
+/>
 `;

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

@@ -305,7 +305,7 @@ exports[`Message component should render <Message /> with Avatar 1`] = `
                 }
               >
                 <Text
-                  showUserAvatar={true}
+                  isUserAvatarVisible={true}
                   style={
                     [
                       {
@@ -511,7 +511,7 @@ exports[`Message component should render null if user has no Avatar 1`] = `
                 }
               >
                 <Text
-                  showUserAvatar={true}
+                  isUserAvatarVisible={true}
                   style={
                     [
                       {

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

@@ -38,6 +38,7 @@ exports[`MessageImage should  render <MessageImage /> and compare with snapshot
   >
     <Image
       onLayout={[Function]}
+      resizeMode="cover"
       source={
         {
           "uri": "url://to/image.png",
@@ -49,7 +50,6 @@ exports[`MessageImage should  render <MessageImage /> and compare with snapshot
             "borderRadius": 13,
             "height": 100,
             "margin": 3,
-            "resizeMode": "cover",
             "width": 150,
           },
           undefined,

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

@@ -2,11 +2,13 @@
 
 exports[`Send should always render <Send /> and compare with snapshot 1`] = `
 <View
+  accessibilityLabel="send"
+  accessibilityRole="button"
   accessibilityState={
     {
       "busy": undefined,
       "checked": undefined,
-      "disabled": undefined,
+      "disabled": false,
       "expanded": undefined,
       "selected": undefined,
     }
@@ -20,95 +22,29 @@ exports[`Send should always render <Send /> and compare with snapshot 1`] = `
     }
   }
   accessible={true}
-  collapsable={false}
   focusable={true}
-  onBlur={[Function]}
   onClick={[Function]}
-  onFocus={[Function]}
   onResponderGrant={[Function]}
   onResponderMove={[Function]}
   onResponderRelease={[Function]}
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
->
-  <View
-    accessibilityLabel="send"
-    accessibilityRole="button"
-    accessible={true}
-    collapsable={false}
-    disabled={false}
-    jestAnimatedProps={
-      {
-        "value": {},
-      }
-    }
-    jestAnimatedStyle={
-      {
-        "value": {
-          "opacity": 1,
-        },
-      }
-    }
-    jestInlineStyle={
-      [
-        [
-          {
-            "height": 44,
-            "justifyContent": "flex-end",
-          },
-          undefined,
-        ],
-      ]
-    }
-    style={
-      [
-        {
-          "height": 44,
-          "justifyContent": "flex-end",
-        },
-        undefined,
-        {
-          "opacity": 1,
-        },
-      ]
-    }
-    testID="GC_SEND_TOUCHABLE"
-  >
-    <View>
-      <Text
-        style={
-          [
-            {
-              "backgroundColor": "transparent",
-              "color": "#0084ff",
-              "fontSize": 17,
-              "fontWeight": "600",
-              "marginBottom": 12,
-              "marginLeft": 10,
-              "marginRight": 10,
-            },
-            undefined,
-            undefined,
-          ]
-        }
-      >
-        Send
-      </Text>
-    </View>
-  </View>
-</View>
+  testID="GC_SEND_TOUCHABLE"
+/>
 `;
 
 exports[`Send should not render <Send /> and compare with snapshot 1`] = `null`;
 
 exports[`Send should render <Send /> where there is input and compare with snapshot 1`] = `
 <View
+  accessibilityLabel="send"
+  accessibilityRole="button"
   accessibilityState={
     {
       "busy": undefined,
       "checked": undefined,
-      "disabled": undefined,
+      "disabled": false,
       "expanded": undefined,
       "selected": undefined,
     }
@@ -122,82 +58,14 @@ exports[`Send should render <Send /> where there is input and compare with snaps
     }
   }
   accessible={true}
-  collapsable={false}
   focusable={true}
-  onBlur={[Function]}
   onClick={[Function]}
-  onFocus={[Function]}
   onResponderGrant={[Function]}
   onResponderMove={[Function]}
   onResponderRelease={[Function]}
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
->
-  <View
-    accessibilityLabel="send"
-    accessibilityRole="button"
-    accessible={true}
-    collapsable={false}
-    disabled={false}
-    jestAnimatedProps={
-      {
-        "value": {},
-      }
-    }
-    jestAnimatedStyle={
-      {
-        "value": {
-          "opacity": 1,
-        },
-      }
-    }
-    jestInlineStyle={
-      [
-        [
-          {
-            "height": 44,
-            "justifyContent": "flex-end",
-          },
-          undefined,
-        ],
-      ]
-    }
-    style={
-      [
-        {
-          "height": 44,
-          "justifyContent": "flex-end",
-        },
-        undefined,
-        {
-          "opacity": 1,
-        },
-      ]
-    }
-    testID="GC_SEND_TOUCHABLE"
-  >
-    <View>
-      <Text
-        style={
-          [
-            {
-              "backgroundColor": "transparent",
-              "color": "#0084ff",
-              "fontSize": 17,
-              "fontWeight": "600",
-              "marginBottom": 12,
-              "marginLeft": 10,
-              "marginRight": 10,
-            },
-            undefined,
-            undefined,
-          ]
-        }
-      >
-        Send
-      </Text>
-    </View>
-  </View>
-</View>
+  testID="GC_SEND_TOUCHABLE"
+/>
 `;

package/src/__tests__/data.ts

@@ -1,4 +1,4 @@
-import { IMessage } from '../types'
+import { IMessage } from '../Models'
 
 export const DEFAULT_TEST_MESSAGE: IMessage = {
   _id: 'test',

package/src/components/TouchableOpacity.tsx

@@ -1,13 +1,14 @@
 import React, { useCallback } from 'react'
-import { Pressable } from 'react-native-gesture-handler'
+import { BaseButton } from 'react-native-gesture-handler'
 import Animated, {
   useAnimatedStyle,
   useSharedValue,
   withTiming,
 } from 'react-native-reanimated'
 
-export type TouchableOpacityProps = React.ComponentProps<typeof Pressable> & {
+export type TouchableOpacityProps = Omit<React.ComponentProps<typeof BaseButton>, 'onPress'> & {
   activeOpacity?: number
+  onPress?: () => void
 } & React.ComponentProps<typeof Animated.View>
 
 export const TouchableOpacity: React.FC<TouchableOpacityProps> = ({
@@ -35,22 +36,32 @@ export const TouchableOpacity: React.FC<TouchableOpacityProps> = ({
     }, isAnimationInFinished.value ? 0 : 150)
   }, [opacity, isAnimationInFinished])
 
+  const handleActiveStateChange = useCallback((isActive: boolean) => {
+    if (isActive)
+      handlePressIn()
+    else
+      handlePressOut()
+  }, [handlePressIn, handlePressOut])
+
   const animatedStyle = useAnimatedStyle(() => ({
     opacity: opacity.value,
   }))
 
+  const handlePress = useCallback(() => {
+    onPress?.()
+  }, [onPress])
+
   return (
-    <Pressable
-      onPressIn={handlePressIn}
-      onPressOut={handlePressOut}
-      onPress={onPress}
+    <BaseButton
+      {...rest}
+      onPress={handlePress}
+      onActiveStateChange={handleActiveStateChange}
     >
       <Animated.View
-        {...rest}
         style={[style, animatedStyle]}
       >
         {children}
       </Animated.View>
-    </Pressable>
+    </BaseButton>
   )
 }

package/src/types.ts

@@ -1,4 +1,4 @@
-import { StyleProp, ViewStyle } from 'react-native'
+export * from './Models'
 
 export { ActionsProps } from './Actions'
 export { AvatarProps } from './Avatar'
@@ -22,65 +22,3 @@ export { QuickRepliesProps } from './QuickReplies'
 export { SendProps } from './Send'
 export { SystemMessageProps } from './SystemMessage'
 export { TimeProps } from './Time'
-
-export type Omit<T, K> = Pick<T, Exclude<keyof T, K>>
-
-export interface LeftRightStyle<T> {
-  left?: StyleProp<T>
-  right?: StyleProp<T>
-}
-
-type renderFunction = (x: unknown) => React.ReactNode
-
-export interface User {
-  _id: string | number
-  name?: string
-  avatar?: string | number | renderFunction
-}
-
-export interface Reply {
-  title: string
-  value: string
-  messageId?: number | string
-}
-
-export interface QuickReplies {
-  type: 'radio' | 'checkbox'
-  values: Reply[]
-  keepIt?: boolean
-}
-
-export interface IMessage {
-  _id: string | number
-  text: string
-  createdAt: Date | number
-  user: User
-  image?: string
-  video?: string
-  audio?: string
-  system?: boolean
-  sent?: boolean
-  received?: boolean
-  pending?: boolean
-  quickReplies?: QuickReplies
-  location?: {
-    latitude: number
-    longitude: number
-  }
-}
-
-export type IChatMessage = IMessage
-
-export interface MessageVideoProps<TMessage extends IMessage> {
-  currentMessage: TMessage
-  containerStyle?: StyleProp<ViewStyle>
-  videoStyle?: StyleProp<ViewStyle>
-  videoProps?: object
-}
-
-export interface MessageAudioProps<TMessage extends IMessage> {
-  currentMessage: TMessage
-  containerStyle?: StyleProp<ViewStyle>
-  audioStyle?: StyleProp<ViewStyle>
-  audioProps?: object
-}

package/src/utils.ts

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useRef } from 'react'
 import dayjs from 'dayjs'
-import { IMessage } from './types'
+import { IMessage } from './Models'
 
 export function renderComponentOrElement<TProps extends Record<string, any>>(
   component: React.ComponentType<TProps> | React.ReactElement | ((props: TProps) => React.ReactNode) | null | undefined,