react-native-gifted-chat 3.0.0-alpha.1 → 3.0.1

package/src/{MessageContainer → MessagesContainer}/components/Item/index.tsx

@@ -103,6 +103,7 @@ export const Item = <TMessage extends IMessage>(props: ItemProps<TMessage>) => {
     scrolledY,
     daysPositions,
     listHeight,
+    isDayAnimationEnabled,
     ...rest
   } = props
 
@@ -121,23 +122,26 @@ export const Item = <TMessage extends IMessage>(props: ItemProps<TMessage>) => {
   }, [dayContainerHeight])
 
   const style = useAnimatedStyle(() => ({
-    opacity: interpolate(
-      relativeScrolledPositionToBottomOfDay.value,
-      [
-        -dayTopOffset,
-        -0.0001,
-        0,
-        dayContainerHeight.value + dayTopOffset,
-      ],
-      [
-        0,
-        0,
-        1,
-        1,
-      ],
-      'clamp'
-    ),
-  }), [relativeScrolledPositionToBottomOfDay, dayContainerHeight, dayTopOffset])
+    opacity:
+      isDayAnimationEnabled
+        ? interpolate(
+          relativeScrolledPositionToBottomOfDay.value,
+          [
+            -dayTopOffset,
+            -0.0001,
+            0,
+            dayContainerHeight.value + dayTopOffset,
+          ],
+          [
+            0,
+            0,
+            1,
+            1,
+          ],
+          'clamp'
+        )
+        : 1,
+  }), [relativeScrolledPositionToBottomOfDay, dayContainerHeight, dayTopOffset, isDayAnimationEnabled])
 
   return (
     // do not remove key. it helps to get correct position of the day container

package/src/{MessageContainer → MessagesContainer}/components/Item/types.ts

@@ -1,7 +1,7 @@
 import { IMessage } from '../../../Models'
-import { MessageContainerProps, DaysPositions } from '../../types'
+import { MessagesContainerProps, DaysPositions } from '../../types'
 
-export interface ItemProps<TMessage extends IMessage> extends MessageContainerProps<TMessage> {
+export interface ItemProps<TMessage extends IMessage> extends MessagesContainerProps<TMessage> {
   currentMessage: TMessage
   previousMessage?: TMessage
   nextMessage?: TMessage
@@ -9,4 +9,5 @@ export interface ItemProps<TMessage extends IMessage> extends MessageContainerPr
   scrolledY: { value: number }
   daysPositions: { value: DaysPositions }
   listHeight: { value: number }
+  isDayAnimationEnabled?: boolean
 }

package/src/{MessageContainer → MessagesContainer}/index.tsx

@@ -1,13 +1,12 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import {
   View,
-  Pressable,
   Text,
   LayoutChangeEvent,
   ListRenderItemInfo,
   CellRendererProps,
 } from 'react-native'
-import { FlatList } from 'react-native-gesture-handler'
+import { FlatList, Pressable } from 'react-native-gesture-handler'
 import Animated, { runOnJS, useAnimatedScrollHandler, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated'
 import { LoadEarlierMessages } from '../LoadEarlierMessages'
 import { warning } from '../logging'
@@ -21,14 +20,13 @@ import { DayAnimated } from './components/DayAnimated'
 import { Item } from './components/Item'
 import { ItemProps } from './components/Item/types'
 import styles from './styles'
-import { MessageContainerProps, DaysPositions } from './types'
+import { MessagesContainerProps, DaysPositions } from './types'
 
 export * from './types'
 
-
 const AnimatedFlatList = Animated.createAnimatedComponent(FlatList) as React.ComponentType<any>
 
-export const MessageContainer = <TMessage extends IMessage>(props: MessageContainerProps<TMessage>) => {
+export const MessagesContainer = <TMessage extends IMessage>(props: MessagesContainerProps<TMessage>) => {
   const {
     messages = [],
     user,
@@ -47,6 +45,7 @@ export const MessageContainer = <TMessage extends IMessage>(props: MessageContai
     forwardRef,
     scrollToBottomComponent: scrollToBottomComponentProp,
     renderDay: renderDayProp,
+    isDayAnimationEnabled = true,
   } = props
 
   const listPropsOnScrollProp = listProps?.onScroll
@@ -182,6 +181,7 @@ export const MessageContainer = <TMessage extends IMessage>(props: MessageContai
         scrolledY,
         daysPositions,
         listHeight,
+        isDayAnimationEnabled,
       }
 
       return (
@@ -190,7 +190,7 @@ export const MessageContainer = <TMessage extends IMessage>(props: MessageContai
     }
 
     return null
-  }, [messages, restProps, isInverted, scrolledY, daysPositions, listHeight, user])
+  }, [messages, restProps, isInverted, scrolledY, daysPositions, listHeight, isDayAnimationEnabled, user])
 
   const emptyContent = useMemo(() => {
     if (!renderChatEmptyProp)
@@ -409,14 +409,16 @@ export const MessageContainer = <TMessage extends IMessage>(props: MessageContai
         CellRendererComponent={renderCell}
       />
       <ScrollToBottomWrapper />
-      <DayAnimated
-        scrolledY={scrolledY}
-        daysPositions={daysPositions}
-        listHeight={listHeight}
-        renderDay={renderDayProp}
-        messages={messages}
-        isLoading={loadEarlierMessagesProps?.isLoading ?? false}
-      />
+      {isDayAnimationEnabled && (
+        <DayAnimated
+          scrolledY={scrolledY}
+          daysPositions={daysPositions}
+          listHeight={listHeight}
+          renderDay={renderDayProp}
+          messages={messages}
+          isLoading={loadEarlierMessagesProps?.isLoading ?? false}
+        />
+      )}
     </View>
   )
 }

package/src/{MessageContainer → MessagesContainer}/types.ts

@@ -16,7 +16,7 @@ export type ListProps<TMessage extends IMessage = IMessage> = Partial<FlatListPr
 
 export type AnimatedList<TMessage> = FlatList<TMessage>
 
-export interface MessageContainerProps<TMessage extends IMessage = IMessage>
+export interface MessagesContainerProps<TMessage extends IMessage = IMessage>
   extends Omit<TypingIndicatorProps, 'style'> {
   /** Ref for the FlatList message container */
   forwardRef?: RefObject<AnimatedList<TMessage>>
@@ -39,7 +39,7 @@ export interface MessageContainerProps<TMessage extends IMessage = IMessage>
   /** Custom component to render when messages are empty */
   renderChatEmpty?: () => React.ReactNode
   /** Custom footer component on the ListView, e.g. 'User is typing...' */
-  renderFooter?: (props: MessageContainerProps<TMessage>) => React.ReactNode
+  renderFooter?: (props: MessagesContainerProps<TMessage>) => React.ReactNode
   /** Custom message container */
   renderMessage?: (props: MessageProps<TMessage>) => React.ReactElement
   /** Custom day above a message */
@@ -56,6 +56,8 @@ export interface MessageContainerProps<TMessage extends IMessage = IMessage>
   loadEarlierMessagesProps?: LoadEarlierMessagesProps
   /** Style for TypingIndicator component */
   typingIndicatorStyle?: StyleProp<ViewStyle>
+  /** Enable animated day label that appears on scroll; default is true */
+  isDayAnimationEnabled?: boolean
 }
 
 export interface State {

package/src/Send.tsx

@@ -1,18 +1,19 @@
-import React, { useMemo, useCallback } from 'react'
+import React, { useMemo, useCallback, useEffect } from 'react'
 import {
   StyleSheet,
   Text,
-  View,
   StyleProp,
   ViewStyle,
   TextStyle,
   useColorScheme,
 } from 'react-native'
+import Animated, { useSharedValue, useAnimatedStyle, withTiming } from 'react-native-reanimated'
 import { Color } from './Color'
 
 import { TouchableOpacity, TouchableOpacityProps } from './components/TouchableOpacity'
 import { TEST_ID } from './Constant'
 import { IMessage } from './Models'
+import { getColorSchemeStyle } from './styles'
 
 export interface SendProps<TMessage extends IMessage> {
   text?: string
@@ -39,6 +40,7 @@ export const Send = <TMessage extends IMessage = IMessage>({
   onSend,
 }: SendProps<TMessage>) => {
   const colorScheme = useColorScheme()
+  const opacity = useSharedValue(0)
 
   const handleOnPress = useCallback(() => {
     const message = { text: text?.trim() } as Partial<TMessage>
@@ -47,34 +49,51 @@ export const Send = <TMessage extends IMessage = IMessage>({
       onSend(message, true)
   }, [text, onSend])
 
-  const showSend = useMemo(
+  const isVisible = useMemo(
     () => isSendButtonAlwaysVisible || !!text?.trim().length,
     [isSendButtonAlwaysVisible, text]
   )
 
-  if (!showSend)
-    return null
+  useEffect(() => {
+    opacity.value = withTiming(isVisible ? 1 : 0, { duration: 200 })
+  }, [isVisible, opacity])
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    opacity: opacity.value,
+  }), [opacity])
 
   return (
-    <TouchableOpacity
-      testID={TEST_ID.SEND_TOUCHABLE}
-      style={[styles.container, containerStyle]}
-      onPress={handleOnPress}
-      accessible
-      accessibilityLabel='send'
-      accessibilityRole='button'
-      {...sendButtonProps}
-    >
-      <View>
-        {children || <Text style={[styles.text, styles[`text_${colorScheme}`], textStyle]}>{label}</Text>}
-      </View>
-    </TouchableOpacity>
+    <Animated.View style={[styles.container, containerStyle, animatedStyle]} pointerEvents={isVisible ? 'auto' : 'none'}>
+      <TouchableOpacity
+        testID={TEST_ID.SEND_TOUCHABLE}
+        style={styles.touchable}
+        onPress={handleOnPress}
+        accessible
+        accessibilityLabel='send'
+        accessibilityRole='button'
+        {...sendButtonProps}
+      >
+        {
+          children ||
+          <Text
+            style={[
+              getColorSchemeStyle(styles, 'text', colorScheme),
+              textStyle,
+            ]}
+          >
+            {label}
+          </Text>
+        }
+      </TouchableOpacity>
+    </Animated.View>
   )
 }
 
 const styles = StyleSheet.create({
   container: {
-    height: 44,
+    justifyContent: 'flex-end',
+  },
+  touchable: {
     justifyContent: 'flex-end',
   },
   text: {
@@ -82,9 +101,8 @@ const styles = StyleSheet.create({
     fontWeight: '600',
     fontSize: 17,
     backgroundColor: Color.backgroundTransparent,
-    marginBottom: 12,
-    marginLeft: 10,
-    marginRight: 10,
+    paddingVertical: 10,
+    paddingHorizontal: 10,
   },
   text_dark: {
     color: '#4da6ff',

package/src/__tests__/DayAnimated.test.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { View, Text } from 'react-native'
 import { render } from '@testing-library/react-native'
 import { DayProps } from '../Day'
-import { DayAnimated } from '../MessageContainer/components/DayAnimated'
+import { DayAnimated } from '../MessagesContainer/components/DayAnimated'
 import { DEFAULT_TEST_MESSAGE } from './data'
 
 const mockDaysPositions = { value: {} }

package/src/__tests__/{MessageContainer.test.tsx → MessagesContainer.test.tsx}

@@ -1,36 +1,36 @@
 import React from 'react'
 import { render } from '@testing-library/react-native'
 
-import { MessageContainer } from '..'
+import { MessagesContainer } from '..'
 import { DEFAULT_TEST_MESSAGE } from './data'
 
-it('should render <MessageContainer /> without crashing', () => {
+it('should render <MessagesContainer /> without crashing', () => {
   // Just verify it renders without throwing
   expect(() => render(
-    <MessageContainer
+    <MessagesContainer
       messages={[DEFAULT_TEST_MESSAGE]}
       user={{ _id: 1 }}
     />
   )).not.toThrow()
 })
 
-it('should render <MessageContainer /> with multiple messages', () => {
+it('should render <MessagesContainer /> with multiple messages', () => {
   const messages = [
     { ...DEFAULT_TEST_MESSAGE, _id: 'test1' },
     { ...DEFAULT_TEST_MESSAGE, _id: 'test2' },
   ]
 
   expect(() => render(
-    <MessageContainer
+    <MessagesContainer
       messages={messages}
       user={{ _id: 1 }}
     />
   )).not.toThrow()
 })
 
-it('should render <MessageContainer /> with empty messages', () => {
+it('should render <MessagesContainer /> with empty messages', () => {
   expect(() => render(
-    <MessageContainer
+    <MessagesContainer
       messages={[]}
       user={{ _id: 1 }}
     />

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

@@ -2,31 +2,39 @@
 
 exports[`should render <Actions /> and compare with snapshot 1`] = `
 <View
-  accessibilityState={
+  style={
     {
-      "busy": undefined,
-      "checked": undefined,
-      "disabled": false,
-      "expanded": undefined,
-      "selected": undefined,
+      "alignItems": "flex-end",
     }
   }
-  accessibilityValue={
-    {
-      "max": undefined,
-      "min": undefined,
-      "now": undefined,
-      "text": undefined,
+>
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": false,
+        "expanded": undefined,
+        "selected": undefined,
+      }
     }
-  }
-  accessible={true}
-  focusable={true}
-  onClick={[Function]}
-  onResponderGrant={[Function]}
-  onResponderMove={[Function]}
-  onResponderRelease={[Function]}
-  onResponderTerminate={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
-/>
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    focusable={true}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+  />
+</View>
 `;

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

@@ -1,36 +1,45 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should render <Composer /> and compare with snapshot 1`] = `
-<TextInput
-  accessibilityLabel="Type a message..."
-  accessible={true}
-  enablesReturnKeyAutomatically={true}
-  keyboardAppearance="default"
-  multiline={true}
-  onContentSizeChange={[Function]}
-  placeholder="Type a message..."
-  placeholderTextColor="#b2b2b2"
+<View
   style={
-    [
-      {
-        "flex": 1,
-      },
-      {
-        "fontSize": 16,
-        "lineHeight": 22,
-        "marginBottom": 5,
-        "marginLeft": 10,
-        "marginTop": 6,
-      },
-      undefined,
-      undefined,
-      {
-        "height": 33,
-      },
-    ]
+    {
+      "flex": 1,
+    }
   }
-  testID="Type a message..."
-  underlineColorAndroid="transparent"
-  value=""
-/>
+>
+  <TextInput
+    accessibilityLabel="Type a message..."
+    accessible={true}
+    enablesReturnKeyAutomatically={true}
+    keyboardAppearance="default"
+    multiline={true}
+    onChange={[Function]}
+    placeholder="Type a message..."
+    placeholderTextColor="#b2b2b2"
+    style={
+      [
+        [
+          {
+            "fontSize": 16,
+            "lineHeight": 22,
+            "paddingBottom": 10,
+            "paddingTop": 8,
+          },
+          undefined,
+        ],
+        {
+          "outlineStyle": "none",
+        },
+        {
+          "height": undefined,
+        },
+        undefined,
+      ]
+    }
+    testID="Type a message..."
+    underlineColorAndroid="transparent"
+    value=""
+  />
+</View>
 `;

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

@@ -3,8 +3,6 @@
 exports[`should compare Constant with snapshot 1`] = `
 {
   "DATE_FORMAT": "D MMMM",
-  "MAX_COMPOSER_HEIGHT": 200,
-  "MIN_COMPOSER_HEIGHT": 33,
   "TEST_ID": {
     "LOADING_WRAPPER": "GC_LOADING_CONTAINER",
     "SEND_TOUCHABLE": "GC_SEND_TOUCHABLE",

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

@@ -4,12 +4,14 @@ exports[`should render <InputToolbar /> and compare with snapshot 1`] = `
 <View
   style={
     [
-      {
-        "backgroundColor": "#fff",
-        "borderTopColor": "#b2b2b2",
-        "borderTopWidth": 0.5,
-      },
-      false,
+      [
+        {
+          "backgroundColor": "#fff",
+          "borderTopColor": "#b2b2b2",
+          "borderTopWidth": 0.5,
+        },
+        undefined,
+      ],
       undefined,
     ]
   }
@@ -17,46 +19,125 @@ exports[`should render <InputToolbar /> and compare with snapshot 1`] = `
   <View
     style={
       [
-        {
-          "alignItems": "flex-end",
-          "flexDirection": "row",
-        },
+        [
+          {
+            "alignItems": "flex-end",
+            "flexDirection": "row",
+          },
+          undefined,
+        ],
         undefined,
       ]
     }
   >
-    <TextInput
-      accessibilityLabel="Type a message..."
-      accessible={true}
-      enablesReturnKeyAutomatically={true}
-      keyboardAppearance="default"
-      multiline={true}
-      onContentSizeChange={[Function]}
-      placeholder="Type a message..."
-      placeholderTextColor="#b2b2b2"
+    <View
       style={
+        {
+          "flex": 1,
+        }
+      }
+    >
+      <TextInput
+        accessibilityLabel="Type a message..."
+        accessible={true}
+        enablesReturnKeyAutomatically={true}
+        keyboardAppearance="default"
+        multiline={true}
+        onChange={[Function]}
+        placeholder="Type a message..."
+        placeholderTextColor="#b2b2b2"
+        style={
+          [
+            [
+              {
+                "fontSize": 16,
+                "lineHeight": 22,
+                "paddingBottom": 10,
+                "paddingTop": 8,
+              },
+              undefined,
+            ],
+            {
+              "outlineStyle": "none",
+            },
+            {
+              "height": undefined,
+            },
+            undefined,
+          ]
+        }
+        testID="Type a message..."
+        underlineColorAndroid="transparent"
+        value=""
+      />
+    </View>
+    <View
+      collapsable={false}
+      jestAnimatedProps={
+        {
+          "value": {},
+        }
+      }
+      jestAnimatedStyle={
+        {
+          "value": {
+            "opacity": 0,
+          },
+        }
+      }
+      jestInlineStyle={
         [
           {
-            "flex": 1,
+            "justifyContent": "flex-end",
           },
+          undefined,
+        ]
+      }
+      pointerEvents="none"
+      style={
+        [
           {
-            "fontSize": 16,
-            "lineHeight": 22,
-            "marginBottom": 5,
-            "marginLeft": 10,
-            "marginTop": 6,
+            "justifyContent": "flex-end",
           },
           undefined,
-          undefined,
           {
-            "height": 33,
+            "opacity": 0,
           },
         ]
       }
-      testID="Type a message..."
-      underlineColorAndroid="transparent"
-      value=""
-    />
+    >
+      <View
+        accessibilityLabel="send"
+        accessibilityRole="button"
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": false,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        focusable={true}
+        onClick={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        testID="GC_SEND_TOUCHABLE"
+      />
+    </View>
   </View>
 </View>
 `;