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

package/src/InputToolbar.tsx

@@ -6,6 +6,7 @@ import { Color } from './Color'
 import { Composer, ComposerProps } from './Composer'
 import { IMessage } from './Models'
 import { Send, SendProps } from './Send'
+import { getColorSchemeStyle } from './styles'
 import { renderComponentOrElement } from './utils'
 
 export interface InputToolbarProps<TMessage extends IMessage> {
@@ -13,7 +14,6 @@ export interface InputToolbarProps<TMessage extends IMessage> {
   actionSheetOptionTintColor?: string
   containerStyle?: StyleProp<ViewStyle>
   primaryStyle?: StyleProp<ViewStyle>
-  accessoryStyle?: StyleProp<ViewStyle>
   renderAccessory?: (props: InputToolbarProps<TMessage>) => React.ReactNode
   renderActions?: (props: ActionsProps) => React.ReactNode
   renderSend?: (props: SendProps<TMessage>) => React.ReactNode
@@ -88,16 +88,14 @@ export function InputToolbar<TMessage extends IMessage = IMessage> (
     if (!renderAccessory)
       return null
 
-    return (
-      <View style={[styles.accessory, props.accessoryStyle]}>
-        {renderComponentOrElement(renderAccessory, props)}
-      </View>
-    )
+    return renderComponentOrElement(renderAccessory, props)
   }, [renderAccessory, props])
 
   return (
-    <View style={[styles.container, colorScheme === 'dark' && styles.container_dark, containerStyle]}>
-      <View style={[styles.primary, props.primaryStyle]}>
+    <View
+      style={[getColorSchemeStyle(styles, 'container', colorScheme), containerStyle]}
+    >
+      <View style={[getColorSchemeStyle(styles, 'primary', colorScheme), props.primaryStyle]}>
         {actionsFragment}
         {composerFragment}
         {sendFragment}
@@ -121,7 +119,4 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'flex-end',
   },
-  accessory: {
-    height: 44,
-  },
 })

package/src/MessageImage.tsx

@@ -8,46 +8,101 @@ import {
   StyleProp,
   ImageStyle,
   ImageURISource,
-  Modal,
   TouchableOpacity,
   LayoutChangeEvent,
   useWindowDimensions,
+  StatusBar,
 } from 'react-native'
 import { BaseButton, GestureHandlerRootView, Text } from 'react-native-gesture-handler'
-import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { OverKeyboardView } from 'react-native-keyboard-controller'
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+  Easing,
+  runOnJS,
+} from 'react-native-reanimated'
+import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context'
 import Zoom from 'react-native-zoom-reanimated'
 import { IMessage } from './Models'
 import commonStyles from './styles'
 
-const styles = StyleSheet.create({
-  image: {
-    width: 150,
-    height: 100,
-    borderRadius: 13,
-    margin: 3,
-    resizeMode: 'cover',
-  },
-  modalContent: {
-    backgroundColor: '#000',
-  },
-  modalImageContainer: {
-    width: '100%',
-    height: '100%',
-  },
+interface ModalContentProps {
+  isVisible: boolean
+  imageSource: ImageURISource
+  modalImageDimensions: { width: number, height: number } | undefined
+  imageProps?: Partial<ImageProps>
+  onClose: () => void
+}
 
-  closeButtonContainer: {
-    flexDirection: 'row',
-    justifyContent: 'flex-end',
-  },
-  closeButtonContent: {
-    padding: 10,
-  },
-  closeButtonIcon: {
-    fontSize: 20,
-    lineHeight: 20,
-    color: 'white',
-  },
-})
+function ModalContent({ isVisible, imageSource, modalImageDimensions, imageProps, onClose }: ModalContentProps) {
+  const insets = useSafeAreaInsets()
+
+  // Animation values
+  const modalOpacity = useSharedValue(0)
+  const modalScale = useSharedValue(0.9)
+  const modalBorderRadius = useSharedValue(40)
+
+  const handleModalClose = useCallback(() => {
+    modalOpacity.value = withTiming(0, { duration: 200, easing: Easing.in(Easing.ease) })
+    modalScale.value = withTiming(0.9, { duration: 200, easing: Easing.in(Easing.ease) }, () => {
+      runOnJS(onClose)()
+    })
+    modalBorderRadius.value = withTiming(40, { duration: 200, easing: Easing.in(Easing.ease) })
+  }, [onClose, modalOpacity, modalScale, modalBorderRadius])
+
+  // Animate on visibility change
+  useEffect(() => {
+    if (isVisible) {
+      modalOpacity.value = withTiming(1, { duration: 300, easing: Easing.out(Easing.ease) })
+      modalScale.value = withTiming(1, { duration: 300, easing: Easing.out(Easing.ease) })
+      modalBorderRadius.value = withTiming(0, { duration: 300, easing: Easing.out(Easing.ease) })
+    }
+  }, [isVisible, modalOpacity, modalScale, modalBorderRadius])
+
+  const modalAnimatedStyle = useAnimatedStyle(() => ({
+    opacity: modalOpacity.value,
+    transform: [{ scale: modalScale.value }],
+  }), [modalOpacity, modalScale])
+
+  const modalBorderRadiusStyle = useAnimatedStyle(() => ({
+    borderRadius: modalBorderRadius.value,
+  }), [modalBorderRadius])
+
+  return (
+    <>
+      <StatusBar animated barStyle='dark-content' />
+      <Animated.View style={[styles.modalOverlay, modalAnimatedStyle, modalBorderRadiusStyle]}>
+        <GestureHandlerRootView style={commonStyles.fill}>
+          <Animated.View style={[commonStyles.fill, styles.modalContent, modalBorderRadiusStyle, { paddingTop: insets.top, paddingBottom: insets.bottom }]}>
+
+            {/* close button */}
+            <View style={styles.closeButtonContainer}>
+              <BaseButton onPress={handleModalClose}>
+                <View style={styles.closeButtonContent}>
+                  <Text style={styles.closeButtonIcon}>
+                    {'X'}
+                  </Text>
+                </View>
+              </BaseButton>
+            </View>
+
+            <View style={[commonStyles.fill, commonStyles.centerItems]}>
+              <Zoom>
+                <Image
+                  style={modalImageDimensions}
+                  source={imageSource}
+                  resizeMode='contain'
+                  {...imageProps}
+                />
+              </Zoom>
+            </View>
+          </Animated.View>
+        </GestureHandlerRootView>
+      </Animated.View>
+    </>
+  )
+}
 
 export interface MessageImageProps<TMessage extends IMessage> {
   currentMessage: TMessage
@@ -68,8 +123,6 @@ export function MessageImage<TMessage extends IMessage = IMessage> ({
   const [imageDimensions, setImageDimensions] = useState<{ width: number, height: number }>()
   const windowDimensions = useWindowDimensions()
 
-  const insets = useSafeAreaInsets()
-
   const imageSource = useMemo(() => ({
     ...imageSourceProps,
     uri: currentMessage?.image,
@@ -140,42 +193,59 @@ export function MessageImage<TMessage extends IMessage = IMessage> ({
           style={computedImageStyle}
           source={imageSource}
           onLayout={handleImageLayout}
+          resizeMode='cover'
         />
       </TouchableOpacity>
 
-      <Modal
-        visible={isModalVisible}
-        onRequestClose={handleModalClose}
-        animationType='slide'
-        transparent={false}
-      >
-        <GestureHandlerRootView style={commonStyles.fill}>
-          <View style={[commonStyles.fill, styles.modalContent, { paddingTop: insets.top, paddingBottom: insets.bottom }]}>
-
-            {/* close button */}
-            <View style={styles.closeButtonContainer}>
-              <BaseButton onPress={handleModalClose}>
-                <View style={styles.closeButtonContent}>
-                  <Text style={styles.closeButtonIcon}>
-                    {'X'}
-                  </Text>
-                </View>
-              </BaseButton>
-            </View>
-
-            <View style={[commonStyles.fill, commonStyles.centerItems]}>
-              <Zoom>
-                <Image
-                  style={modalImageDimensions}
-                  source={imageSource}
-                  resizeMode='contain'
-                  {...imageProps}
-                />
-              </Zoom>
-            </View>
-          </View>
-        </GestureHandlerRootView>
-      </Modal>
+      <OverKeyboardView visible={isModalVisible}>
+        <SafeAreaProvider>
+          <ModalContent
+            isVisible={isModalVisible}
+            imageSource={imageSource}
+            modalImageDimensions={modalImageDimensions}
+            imageProps={imageProps}
+            onClose={handleModalClose}
+          />
+        </SafeAreaProvider>
+      </OverKeyboardView>
     </View>
   )
 }
+
+const styles = StyleSheet.create({
+  image: {
+    width: 150,
+    height: 100,
+    borderRadius: 13,
+    margin: 3,
+  },
+  modalOverlay: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    zIndex: 1000,
+  },
+  modalContent: {
+    backgroundColor: '#000',
+    overflow: 'hidden',
+  },
+  modalImageContainer: {
+    width: '100%',
+    height: '100%',
+  },
+
+  closeButtonContainer: {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+  },
+  closeButtonContent: {
+    padding: 20,
+  },
+  closeButtonIcon: {
+    fontSize: 20,
+    lineHeight: 20,
+    color: 'white',
+  },
+})

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)
@@ -401,20 +401,24 @@ export const MessageContainer = <TMessage extends IMessage>(props: MessageContai
         scrollEventThrottle={1}
         onEndReached={onEndReached}
         onEndReachedThreshold={0.1}
+        keyboardDismissMode='interactive'
+        keyboardShouldPersistTaps='handled'
         {...listProps}
         onScroll={scrollHandler}
         onLayout={onLayoutList}
         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}/styles.ts

@@ -1,4 +1,4 @@
-import { StyleSheet } from 'react-native'
+import { Platform, StyleSheet } from 'react-native'
 import { Color } from '../Color'
 
 export default StyleSheet.create({
@@ -24,9 +24,16 @@ export default StyleSheet.create({
     width: 40,
     borderRadius: 20,
     backgroundColor: Color.white,
-    shadowColor: Color.black,
-    shadowOpacity: 0.5,
-    shadowOffset: { width: 0, height: 0 },
-    shadowRadius: 1,
+    ...Platform.select({
+      ios: {
+        shadowColor: Color.black,
+        shadowOpacity: 0.5,
+        shadowOffset: { width: 0, height: 0 },
+        shadowRadius: 1,
+      },
+      android: {
+        elevation: 5,
+      },
+    }),
   },
 })

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__/GiftedChat.test.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import { render } from '@testing-library/react-native'
 
-import { useReanimatedKeyboardAnimation } from 'react-native-keyboard-controller'
 import { GiftedChat } from '..'
 
 const messages = [
@@ -17,32 +16,6 @@ const messages = [
 ]
 
 it('should render <GiftedChat/> and compare with snapshot', () => {
-  (useReanimatedKeyboardAnimation as jest.Mock).mockReturnValue({
-    height: {
-      value: 0,
-    },
-  })
-
-  const { toJSON } = render(
-    <GiftedChat
-      messages={messages}
-      onSend={() => {}}
-      user={{
-        _id: 1,
-      }}
-    />
-  )
-
-  expect(toJSON()).toMatchSnapshot()
-})
-
-it('should render <GiftedChat/> with isKeyboardInternallyHandled=false', () => {
-  (useReanimatedKeyboardAnimation as jest.Mock).mockReturnValue({
-    height: {
-      value: 0,
-    },
-  })
-
   const { toJSON } = render(
     <GiftedChat
       messages={messages}
@@ -50,7 +23,6 @@ it('should render <GiftedChat/> with isKeyboardInternallyHandled=false', () => {
       user={{
         _id: 1,
       }}
-      isKeyboardInternallyHandled={false}
     />
   )