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

package/src/Actions.tsx

@@ -19,7 +19,7 @@ export interface ActionsProps {
   icon?: () => ReactNode
   wrapperStyle?: StyleProp<ViewStyle>
   iconTextStyle?: StyleProp<TextStyle>
-  containerStyle?: StyleProp<ViewStyle>
+  buttonStyle?: StyleProp<ViewStyle>
   onPressActionButton?(): void
 }
 
@@ -30,11 +30,16 @@ export function Actions ({
   wrapperStyle,
   iconTextStyle,
   onPressActionButton,
-  containerStyle,
+  buttonStyle,
 }: ActionsProps) {
   const { actionSheet } = useChatContext()
 
-  const onActionsPress = useCallback(() => {
+  const handlePress = useCallback(() => {
+    if (onPressActionButton) {
+      onPressActionButton()
+      return
+    }
+
     if (!actions?.length)
       return
 
@@ -54,47 +59,51 @@ export function Actions ({
         item.action?.()
       }
     )
-  }, [actionSheet, actions, actionSheetOptionTintColor])
+  }, [actionSheet, actions, actionSheetOptionTintColor, onPressActionButton])
 
   const renderIcon = useCallback(() => {
     if (icon)
       return icon()
 
     return (
-      <View style={[stylesCommon.fill, stylesCommon.centerItems, styles.wrapper, wrapperStyle]}>
+      <View style={[stylesCommon.centerItems, styles.wrapper, wrapperStyle]}>
         <Text style={[styles.iconText, iconTextStyle]}>{'+'}</Text>
       </View>
     )
   }, [icon, iconTextStyle, wrapperStyle])
 
   return (
-    <TouchableOpacity
-      style={[styles.container, containerStyle]}
-      onPress={onPressActionButton || onActionsPress}
-    >
-      {renderIcon()}
-    </TouchableOpacity>
+    <View style={styles.container}>
+      <TouchableOpacity
+        onPress={handlePress}
+        style={[styles.button, buttonStyle]}
+      >
+        {renderIcon()}
+      </TouchableOpacity>
+    </View>
   )
 }
 
 const styles = StyleSheet.create({
   container: {
-    width: 26,
-    height: 26,
-    marginLeft: 10,
-    marginBottom: 10,
+    alignItems: 'flex-end',
+  },
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 7,
   },
+
   wrapper: {
-    borderRadius: 13,
     borderColor: Color.defaultColor,
     borderWidth: 2,
+    width: 26,
+    height: 26,
+    borderRadius: 13,
   },
   iconText: {
     color: Color.defaultColor,
     fontWeight: 'bold',
     fontSize: 16,
     lineHeight: 16,
-    backgroundColor: Color.backgroundTransparent,
-    textAlign: 'center',
   },
 })

package/src/Composer.tsx

@@ -1,118 +1,55 @@
-import React, { useCallback, useRef } from 'react'
+import React from 'react'
 import {
-  Platform,
   StyleSheet,
   TextInput,
   TextInputProps,
-  NativeSyntheticEvent,
-  TextInputContentSizeChangeEventData,
   useColorScheme,
+  View,
 } from 'react-native'
 import { Color } from './Color'
-import { MIN_COMPOSER_HEIGHT } from './Constant'
-import stylesCommon from './styles'
+import stylesCommon, { getColorSchemeStyle } from './styles'
 
 export interface ComposerProps {
   composerHeight?: number
   text?: string
   textInputProps?: Partial<TextInputProps>
-  onInputSizeChanged?(layout: { width: number, height: number }): void
 }
 
 export function Composer ({
-  composerHeight = MIN_COMPOSER_HEIGHT,
-  onInputSizeChanged,
   text = '',
   textInputProps,
 }: ComposerProps): React.ReactElement {
-  const dimensionsRef = useRef<{ width: number, height: number }>(null)
   const colorScheme = useColorScheme()
   const isDark = colorScheme === 'dark'
 
-  const determineInputSizeChange = useCallback(
-    (dimensions: { width: number, height: number }) => {
-      // Support earlier versions of React Native on Android.
-      if (!dimensions)
-        return
-
-      if (
-        !dimensionsRef.current ||
-        (dimensionsRef.current &&
-          (dimensionsRef.current.width !== dimensions.width ||
-            dimensionsRef.current.height !== dimensions.height))
-      ) {
-        dimensionsRef.current = dimensions
-        onInputSizeChanged?.(dimensions)
-      }
-    },
-    [onInputSizeChanged]
-  )
-
-  const handleContentSizeChange = useCallback(
-    ({
-      nativeEvent: { contentSize },
-    }: NativeSyntheticEvent<TextInputContentSizeChangeEventData>) =>
-      determineInputSizeChange(contentSize),
-    [determineInputSizeChange]
-  )
-
   const placeholder = textInputProps?.placeholder ?? 'Type a message...'
 
   return (
-    <TextInput
-      testID={placeholder}
-      accessible
-      accessibilityLabel={placeholder}
-      placeholderTextColor={textInputProps?.placeholderTextColor ?? (isDark ? '#888' : Color.defaultColor)}
-      onContentSizeChange={handleContentSizeChange}
-      value={text}
-      enablesReturnKeyAutomatically
-      underlineColorAndroid='transparent'
-      keyboardAppearance={isDark ? 'dark' : 'default'}
-      multiline
-      placeholder={placeholder}
-      {...textInputProps}
-      style={[
-        stylesCommon.fill,
-        styles.textInput,
-        styles[`textInput_${colorScheme}`],
-        textInputProps?.style,
-        {
-          height: composerHeight,
-          ...Platform.select({
-            web: {
-              outlineWidth: 0,
-              outlineColor: 'transparent',
-              outlineOffset: 0,
-            },
-          }),
-        },
-      ]}
-    />
+    <View style={stylesCommon.fill}>
+      <TextInput
+        testID={placeholder}
+        accessible
+        accessibilityLabel={placeholder}
+        placeholderTextColor={textInputProps?.placeholderTextColor ?? (isDark ? '#888' : Color.defaultColor)}
+        value={text}
+        enablesReturnKeyAutomatically
+        underlineColorAndroid='transparent'
+        keyboardAppearance={isDark ? 'dark' : 'default'}
+        multiline
+        placeholder={placeholder}
+        {...textInputProps}
+        style={getColorSchemeStyle(styles, 'textInput', colorScheme)}
+      />
+    </View>
   )
 }
 
 const styles = StyleSheet.create({
   textInput: {
-    marginLeft: 10,
     fontSize: 16,
     lineHeight: 22,
-    ...Platform.select({
-      web: {
-        paddingTop: 6,
-        paddingLeft: 4,
-      },
-    }),
-    marginTop: Platform.select({
-      ios: 6,
-      android: 0,
-      web: 6,
-    }),
-    marginBottom: Platform.select({
-      ios: 5,
-      android: 3,
-      web: 4,
-    }),
+    paddingTop: 8,
+    paddingBottom: 10,
   },
   textInput_dark: {
     color: '#fff',

package/src/Constant.ts

@@ -1,12 +1,3 @@
-import { Platform } from 'react-native'
-
-export const MIN_COMPOSER_HEIGHT = Platform.select({
-  ios: 33,
-  android: 41,
-  web: 34,
-  windows: 34,
-})
-export const MAX_COMPOSER_HEIGHT = 200
 export const DATE_FORMAT = 'D MMMM'
 export const TIME_FORMAT = 'LT'
 

package/src/GiftedChat/index.tsx

@@ -19,19 +19,12 @@ import {
 import dayjs from 'dayjs'
 import localizedFormat from 'dayjs/plugin/localizedFormat'
 import { GestureHandlerRootView } from 'react-native-gesture-handler'
-import { KeyboardProvider, useReanimatedKeyboardAnimation } from 'react-native-keyboard-controller'
-import Animated, {
-  useAnimatedStyle,
-  useAnimatedReaction,
-  useSharedValue,
-  withTiming,
-  runOnJS,
-} from 'react-native-reanimated'
+import { KeyboardAvoidingView, KeyboardProvider } from 'react-native-keyboard-controller'
 import { SafeAreaProvider } from 'react-native-safe-area-context'
-import { MAX_COMPOSER_HEIGHT, MIN_COMPOSER_HEIGHT, TEST_ID } from '../Constant'
+import { TEST_ID } from '../Constant'
 import { GiftedChatContext } from '../GiftedChatContext'
 import { InputToolbar } from '../InputToolbar'
-import { MessageContainer, AnimatedList } from '../MessageContainer'
+import { MessagesContainer, AnimatedList } from '../MessagesContainer'
 import { IMessage } from '../Models'
 import stylesCommon from '../styles'
 import { renderComponentOrElement } from '../utils'
@@ -61,19 +54,14 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
     textInputProps,
     renderChatFooter,
     renderInputToolbar,
-    keyboardBottomOffset = 0,
-    shouldFocusInputOnKeyboardOpen = true,
     isInverted = true,
-    minComposerHeight = MIN_COMPOSER_HEIGHT,
-    maxComposerHeight = MAX_COMPOSER_HEIGHT,
-    isKeyboardInternallyHandled = true,
   } = props
 
   const actionSheetRef = useRef<ActionSheetProviderRef>(null)
 
-  const messageContainerRef = useMemo(
-    () => props.messageContainerRef || createRef<AnimatedList<TMessage>>(),
-    [props.messageContainerRef]
+  const messagesContainerRef = useMemo(
+    () => props.messagesContainerRef || createRef<AnimatedList<TMessage>>(),
+    [props.messagesContainerRef]
   ) as RefObject<AnimatedList<TMessage>>
 
   const textInputRef = useMemo(
@@ -81,37 +69,9 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
     [props.textInputRef]
   )
 
-  const isTextInputWasFocused: RefObject<boolean> = useRef(false)
-
   const [isInitialized, setIsInitialized] = useState<boolean>(false)
-  const [composerHeight, setComposerHeight] = useState<number>(
-    minComposerHeight!
-  )
   const [text, setText] = useState<string | undefined>(() => props.text || '')
 
-  // Always call the hook, but conditionally use its data
-  const keyboardControllerData = useReanimatedKeyboardAnimation()
-
-  // Create a mock keyboard object when keyboard is not internally handled
-  const keyboard = useMemo(() => {
-    if (!isKeyboardInternallyHandled)
-      return { height: { value: 0 } }
-
-    return keyboardControllerData
-  }, [isKeyboardInternallyHandled, keyboardControllerData])
-
-  const trackingKeyboardMovement = useSharedValue(false)
-  const keyboardBottomOffsetAnim = useSharedValue(0)
-
-  const contentStyleAnim = useAnimatedStyle(
-    () => ({
-      transform: [
-        { translateY: keyboard.height.value + keyboardBottomOffsetAnim.value },
-      ],
-    }),
-    [keyboard, keyboardBottomOffsetAnim]
-  )
-
   const getTextFromProp = useCallback(
     (fallback: string) => {
       if (props.text === undefined)
@@ -122,50 +82,22 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
     [props.text]
   )
 
-  /**
-   * Store text input focus status when keyboard hide to retrieve
-   * it afterwards if needed.
-   * `onKeyboardWillHide` may be called twice in sequence so we
-   * make a guard condition (eg. showing image picker)
-   */
-  const handleTextInputFocusWhenKeyboardHide = useCallback(() => {
-    if (!isTextInputWasFocused.current)
-      isTextInputWasFocused.current =
-        textInputRef.current?.isFocused() || false
-  }, [textInputRef])
-
-  /**
-   * Refocus the text input only if it was focused before showing keyboard.
-   * This is needed in some cases (eg. showing image picker).
-   */
-  const handleTextInputFocusWhenKeyboardShow = useCallback(() => {
-    if (
-      textInputRef.current &&
-      isTextInputWasFocused.current &&
-      !textInputRef.current.isFocused()
-    )
-      textInputRef.current.focus()
-
-    // Reset the indicator since the keyboard is shown
-    isTextInputWasFocused.current = false
-  }, [textInputRef])
-
   const scrollToBottom = useCallback(
     (isAnimated = true) => {
-      if (!messageContainerRef?.current)
+      if (!messagesContainerRef?.current)
         return
 
       if (isInverted) {
-        messageContainerRef.current.scrollToOffset({
+        messagesContainerRef.current.scrollToOffset({
           offset: 0,
           animated: isAnimated,
         })
         return
       }
 
-      messageContainerRef.current.scrollToEnd({ animated: isAnimated })
+      messagesContainerRef.current.scrollToEnd({ animated: isAnimated })
     },
-    [isInverted, messageContainerRef]
+    [isInverted, messagesContainerRef]
   )
 
   const renderMessages = useMemo(() => {
@@ -176,11 +108,11 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
 
     return (
       <View style={[stylesCommon.fill, messagesContainerStyle]}>
-        <MessageContainer<TMessage>
+        <MessagesContainer<TMessage>
           {...messagesContainerProps}
           isInverted={isInverted}
           messages={messages}
-          forwardRef={messageContainerRef}
+          forwardRef={messagesContainerRef}
           isTyping={isTyping}
         />
         {renderComponentOrElement(renderChatFooter, {})}
@@ -192,7 +124,7 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
     messages,
     props,
     isInverted,
-    messageContainerRef,
+    messagesContainerRef,
     renderChatFooter,
   ])
 
@@ -205,10 +137,8 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
 
     notifyInputTextReset()
 
-    setComposerHeight(minComposerHeight!)
     setText(getTextFromProp(''))
   }, [
-    minComposerHeight,
     getTextFromProp,
     textInputRef,
     notifyInputTextReset,
@@ -238,18 +168,6 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
     [messageIdGenerator, onSend, user, resetInputToolbar, scrollToBottom]
   )
 
-  const onInputSizeChanged = useCallback(
-    (size: { height: number }) => {
-      const newComposerHeight = Math.max(
-        minComposerHeight!,
-        Math.min(maxComposerHeight!, size.height)
-      )
-
-      setComposerHeight(newComposerHeight)
-    },
-    [maxComposerHeight, minComposerHeight]
-  )
-
   const _onChangeText = useCallback(
     (text: string) => {
       props.textInputProps?.onChangeText?.(text)
@@ -274,10 +192,9 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
       notifyInputTextReset()
 
       setIsInitialized(true)
-      setComposerHeight(minComposerHeight!)
       setText(getTextFromProp(initialText))
     },
-    [isInitialized, initialText, minComposerHeight, notifyInputTextReset, getTextFromProp]
+    [isInitialized, initialText, notifyInputTextReset, getTextFromProp]
   )
 
   const inputToolbarFragment = useMemo(() => {
@@ -287,9 +204,7 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
     const inputToolbarProps = {
       ...props,
       text: getTextFromProp(text!),
-      composerHeight: Math.max(minComposerHeight!, composerHeight),
       onSend: _onSend,
-      onInputSizeChanged,
       textInputProps: {
         ...textInputProps,
         onChangeText: _onChangeText,
@@ -305,12 +220,9 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
     isInitialized,
     _onSend,
     getTextFromProp,
-    minComposerHeight,
-    onInputSizeChanged,
     props,
     text,
     renderInputToolbar,
-    composerHeight,
     textInputRef,
     textInputProps,
     _onChangeText,
@@ -334,78 +246,55 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
       setText(props.text)
   }, [props.text])
 
-  // Only set up keyboard animation when keyboard is internally handled
-  useAnimatedReaction(
-    () => isKeyboardInternallyHandled ? keyboard.height.value : 0,
-    (value, prevValue) => {
-      // Skip keyboard handling when not internally handled
-      if (!isKeyboardInternallyHandled)
-        return
-
-      if (prevValue !== null && value !== prevValue) {
-        const isKeyboardMovingUp = value < prevValue
-        if (isKeyboardMovingUp !== trackingKeyboardMovement.value) {
-          trackingKeyboardMovement.value = isKeyboardMovingUp
-          keyboardBottomOffsetAnim.value = withTiming(
-            isKeyboardMovingUp ? keyboardBottomOffset : 0,
-            {
-              // If `keyboardBottomOffset` exists, we change the duration to a smaller value to fix the delay in the keyboard animation speed
-              duration: keyboardBottomOffset ? 150 : 400,
-            }
-          )
-
-          if (shouldFocusInputOnKeyboardOpen)
-            if (isKeyboardMovingUp)
-              runOnJS(handleTextInputFocusWhenKeyboardShow)()
-            else
-              runOnJS(handleTextInputFocusWhenKeyboardHide)()
-        }
-      }
-    },
-    [
-      keyboard,
-      trackingKeyboardMovement,
-      shouldFocusInputOnKeyboardOpen,
-      handleTextInputFocusWhenKeyboardHide,
-      handleTextInputFocusWhenKeyboardShow,
-      keyboardBottomOffset,
-      isKeyboardInternallyHandled,
-    ]
-  )
-
   return (
     <GiftedChatContext.Provider value={contextValues}>
       <ActionSheetProvider ref={actionSheetRef}>
-        <View
-          testID={TEST_ID.WRAPPER}
-          style={[stylesCommon.fill, styles.contentContainer]}
-          onLayout={onInitialLayoutViewLayout}
+        {/* @ts-expect-error */}
+        <KeyboardAvoidingView
+          behavior='padding'
+          style={stylesCommon.fill}
+          {...props.keyboardAvoidingViewProps}
         >
-          {isInitialized
-            ? (
-              <Animated.View style={[stylesCommon.fill, isKeyboardInternallyHandled && contentStyleAnim]}>
-                {renderMessages}
-                {inputToolbarFragment}
-              </Animated.View>
-            )
-            : (
-              renderComponentOrElement(renderLoading, {})
-            )}
-        </View>
+          <View
+            testID={TEST_ID.WRAPPER}
+            style={[stylesCommon.fill, styles.contentContainer]}
+            onLayout={onInitialLayoutViewLayout}
+          >
+            {isInitialized
+              ? (
+                <>
+                  {renderMessages}
+                  {inputToolbarFragment}
+                </>
+              )
+              : (
+                renderComponentOrElement(renderLoading, {})
+              )}
+          </View>
+        </KeyboardAvoidingView>
       </ActionSheetProvider>
     </GiftedChatContext.Provider>
   )
 }
 
 function GiftedChatWrapper<TMessage extends IMessage = IMessage> (props: GiftedChatProps<TMessage>) {
+  const {
+    keyboardProviderProps,
+    ...rest
+  } = props
+
   return (
-    <KeyboardProvider>
-      <GestureHandlerRootView style={styles.fill}>
-        <SafeAreaProvider>
-          <GiftedChat<TMessage> {...props} />
-        </SafeAreaProvider>
-      </GestureHandlerRootView>
-    </KeyboardProvider>
+    <GestureHandlerRootView style={styles.fill}>
+      <SafeAreaProvider>
+        <KeyboardProvider
+          statusBarTranslucent
+          navigationBarTranslucent
+          {...keyboardProviderProps}
+        >
+          <GiftedChat<TMessage> {...rest} />
+        </KeyboardProvider>
+      </SafeAreaProvider>
+    </GestureHandlerRootView>
   )
 }
 

package/src/GiftedChat/types.ts

@@ -8,13 +8,14 @@ import {
 import {
   ActionSheetOptions,
 } from '@expo/react-native-action-sheet'
+import { KeyboardProvider, KeyboardAvoidingViewProps } from 'react-native-keyboard-controller'
 import { ActionsProps } from '../Actions'
 import { AvatarProps } from '../Avatar'
 import { BubbleProps } from '../Bubble'
 import { ComposerProps } from '../Composer'
 import { InputToolbarProps } from '../InputToolbar'
-import { AnimatedList, MessageContainerProps } from '../MessageContainer'
 import { MessageImageProps } from '../MessageImage'
+import { AnimatedList, MessagesContainerProps } from '../MessagesContainer'
 import { MessageTextProps } from '../MessageText'
 import {
   IMessage,
@@ -28,9 +29,9 @@ import { SendProps } from '../Send'
 import { SystemMessageProps } from '../SystemMessage'
 import { TimeProps } from '../Time'
 
-export interface GiftedChatProps<TMessage extends IMessage> extends Partial<MessageContainerProps<TMessage>> {
-  /* Message container ref */
-  messageContainerRef?: RefObject<AnimatedList<TMessage>>
+export interface GiftedChatProps<TMessage extends IMessage> extends Partial<MessagesContainerProps<TMessage>> {
+  /* Messages container ref */
+  messagesContainerRef?: RefObject<AnimatedList<TMessage>>
   /* text input ref */
   textInputRef?: RefObject<TextInput>
   /* Controls whether or not to show user.name property in the message bubble */
@@ -50,8 +51,6 @@ export interface GiftedChatProps<TMessage extends IMessage> extends Partial<Mess
   dateFormat?: string
   /* Format to use for rendering relative times; Today - for now. See more: https://day.js.org/docs/en/plugin/calendar */
   dateFormatCalendar?: object
-  /* Determine whether to handle keyboard awareness inside the plugin. If you have your own keyboard handling outside the plugin set this to false; default is `true` */
-  isKeyboardInternallyHandled?: boolean
   /* Whether to render an avatar for the current user; default is false, only show avatars for other users */
   isUserAvatarVisible?: boolean
   /* When false, avatars will only be displayed when a consecutive message is from the same user on the same day; default is false */
@@ -60,10 +59,6 @@ export interface GiftedChatProps<TMessage extends IMessage> extends Partial<Mess
   isAvatarOnTop?: boolean
   /* Extra props to be passed to the <Image> component created by the default renderMessageImage */
   imageProps?: MessageImageProps<TMessage>
-  /* Distance of the chat from the bottom of the screen (e.g. useful if you display a tab bar); default is 0 */
-  keyboardBottomOffset?: number
-  /* Focus on <TextInput> automatically when opening the keyboard; default is true */
-  shouldFocusInputOnKeyboardOpen?: boolean
   /* Minimum height of the input toolbar; default is 44 */
   minInputToolbarHeight?: number
   /*  Extra props to be passed to the <TextInput>. See https://reactnative.dev/docs/textinput */
@@ -120,13 +115,13 @@ export interface GiftedChatProps<TMessage extends IMessage> extends Partial<Mess
   renderMessageImage?: (props: MessageImageProps<TMessage>) => React.ReactNode
   /* Custom message video */
   renderMessageVideo?: (props: MessageVideoProps<TMessage>) => React.ReactNode
-  /* Custom message video */
+  /* Custom message audio */
   renderMessageAudio?: (props: MessageAudioProps<TMessage>) => React.ReactNode
   /* Custom view inside the bubble */
   renderCustomView?: (props: BubbleProps<TMessage>) => React.ReactNode
   /* Custom time inside a message */
   renderTime?: (props: TimeProps<TMessage>) => React.ReactNode
-  /* Custom component to render below the MessageContainer (separate from the ListView) */
+  /* Custom component to render below the MessagesContainer */
   renderChatFooter?: () => React.ReactNode
   /* Custom message composer container. Can be a component, element, render function, or null */
   renderInputToolbar?: React.ComponentType<InputToolbarProps<TMessage>> | React.ReactElement | ((props: InputToolbarProps<TMessage>) => React.ReactNode) | null
@@ -146,4 +141,8 @@ export interface GiftedChatProps<TMessage extends IMessage> extends Partial<Mess
     quickReplies: QuickRepliesProps<TMessage>,
   ) => React.ReactNode
   renderQuickReplySend?: () => React.ReactNode
+  keyboardProviderProps?: React.ComponentProps<typeof KeyboardProvider>
+  keyboardAvoidingViewProps?: KeyboardAvoidingViewProps
+  /** Enable animated day label that appears on scroll; default is true */
+  isDayAnimationEnabled?: boolean
 }