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

package/README.md

@@ -1,11 +1,3 @@
-<p align="center">
-<p align="center">
-   <a href="https://reactnative.gallery/FaridSafi/gifted-chat">
-    <img alt="react-native-gifted-chat" src="https://thumbs.gfycat.com/AbsoluteSadDobermanpinscher-size_restricted.gif" width="260" height="510" />
- </a>
-
-</p>
-
 <h3 align="center">
   💬 Gifted Chat
 </h3>
@@ -16,26 +8,59 @@
   <a href="https://www.npmjs.com/package/react-native-gifted-chat">
   <img alt="npm downloads" src="https://img.shields.io/npm/dm/react-native-gifted-chat.svg"/></a>
   <a href="https://www.npmjs.com/package/react-native-gifted-chat"><img alt="npm version" src="https://badge.fury.io/js/react-native-gifted-chat.svg"/></a>
+  <a href="https://circleci.com/gh/FaridSafi/react-native-gifted-chat"><img src="https://circleci.com/gh/FaridSafi/react-native-gifted-chat.svg?style=shield" alt="build"></a>
 </p>
+
+---
+
+<h3 align="center">
+  🚀 Try it now in your browser!
+</h3>
 <p align="center">
-  <a href="https://circleci.com/gh/FaridSafi/react-native-gifted-chat"><img src="https://circleci.com/gh/FaridSafi/react-native-gifted-chat.svg?style=shield" alt="build"></a>
-  <a title='License' href="https://github.com/FaridSafi/react-native-gifted-chat/blob/master/LICENSE" height="18">
-    <img src='https://img.shields.io/badge/license-MIT-blue.svg' />
+  <a href="https://snack.expo.dev/@kesha-antonov/gifted-chat-playground" target="_blank">
+    <img src="https://img.shields.io/badge/▶️_Try_GiftedChat_Playground-4630EB?style=for-the-badge&logo=expo&logoColor=white" alt="Try GiftedChat on Expo Snack"/>
   </a>
-  <a href="#hire-an-expert"><img src="https://img.shields.io/badge/%F0%9F%92%AA-hire%20an%20expert-brightgreen"/></a>
 </p>
+<p align="center">
+  <strong>No installation required • Interactive examples • Edit and run in real-time</strong>
+</p>
+
+<br />
+
+<!-- previews -->
 
 <p align="center">
-  <a href="https://snack.expo.dev/@kesha-antonov/gifted-chat-playground" target="_blank">Snack GiftedChat playground</a>
-  <img height="18" src="https://snack.expo.io/favicon.ico" />
+  <img width="200" src="https://github.com/user-attachments/assets/c9da88f5-0b20-471c-8cd7-373bdb767517" />
+  &nbsp;&nbsp;&nbsp;&nbsp;
+  <img width="200" src="https://github.com/user-attachments/assets/f72b17f1-6c2e-43b5-87e7-477011aa3b07" />
+  &nbsp;&nbsp;&nbsp;&nbsp;
+  <img width="200" src="https://github.com/user-attachments/assets/86711e73-ee3c-4527-b38d-e4dab47a44fe" />
 </p>
 
+---
+
+## Features
+
+- Fully customizable components
+- Composer actions (to attach photos, etc.)
+- Load earlier messages
+- Copy messages to clipboard
+- Touchable links using [react-native-autolink](https://github.com/joshswan/react-native-autolink)
+- Avatar as user's initials
+- Localized dates
+- Multi-line TextInput
+- InputToolbar avoiding keyboard
+- System message
+- Quick Reply messages (bot)
+- Typing indicator
+- react-native-web [web configuration](#react-native-web)
+
 ## Sponsor
 
 <p align="center">
   <br/>
   <a href="https://www.lereacteur.io" target="_blank">
-    <img src="https://raw.githubusercontent.com/FaridSafi/react-native-gifted-chat/master/media/logo_sponsor.png">
+    <img src="https://raw.githubusercontent.com/FaridSafi/react-native-gifted-chat/master/media/logo_sponsor.png" height="60">
   </a>
   <br>
   <p align="center">
@@ -51,7 +76,7 @@
 <p align="center">
   <br/>
   <a href="https://getstream.io/chat/?utm_source=Github&utm_medium=Github_Repo_Content_Ad&utm_content=Developer&utm_campaign=Github_Jan2022_Chat&utm_term=react-native-gifted-chat" target="_blank">
-    <img src="https://raw.githubusercontent.com/FaridSafi/react-native-gifted-chat/master/media/stream-logo.png" height="50">
+    <img src="https://raw.githubusercontent.com/FaridSafi/react-native-gifted-chat/master/media/stream-logo.png" height="40">
   </a>
   <br>
   <p align="center">
@@ -65,7 +90,7 @@
 <p align="center">
   <br/>
   <a href="https://www.ethora.com" target="_blank">
-    <img src="https://www.dappros.com/wp-content/uploads/2023/12/Ethora-Logo.png" width="300px">
+    <img src="https://www.dappros.com/wp-content/uploads/2023/12/Ethora-Logo.png" height="60">
   </a>
   <br>
   <p align="center">
@@ -80,50 +105,26 @@
  <a href="https://amzn.to/3ZmTyb2" target="_blank">React Key Concepts: Consolidate your knowledge of React’s core features (2nd ed. Edition)</a>
 </p>
 
-## Features
-
-- Fully customizable components
-- Composer actions (to attach photos, etc.)
-- Load earlier messages
-- Copy messages to clipboard
-- Touchable links using [react-native-autolink](https://github.com/joshswan/react-native-autolink)
-- Avatar as user's initials
-- Localized dates
-- Multi-line TextInput
-- InputToolbar avoiding keyboard
-- System message
-- Quick Reply messages (bot)
-- Typing indicator
-- react-native-web [web configuration](#react-native-web)
-
 # Getting started
 
-## 🚧👷 Important notice
-
-There's currently WIP going on to make the library more performant, modern in terms of chat UI and easier to maintain. If you have any issues, please report them. If you want to contribute, please do so.
-
-The most stable version is `2.6.5`. If you want to use the latest version, please be aware that it's a work in progress.
-
-Readme for this version: [2.6.5 readme](https://github.com/FaridSafi/react-native-gifted-chat/blob/eebab3751fcbe07715135e6e7b2aa3f76a10d8ac/README.md)
-
 ## Installation
 
 ### Install dependencies
 
 Yarn:
 ```bash
-yarn add react-native-gifted-chat react-native-reanimated react-native-keyboard-controller react-native-gesture-handler react-native-safe-area-context
+yarn add react-native-gifted-chat react-native-reanimated react-native-gesture-handler react-native-safe-area-context react-native-keyboard-controller
 ```
 
 Npm:
 
 ```bash
-npm install --save react-native-gifted-chat react-native-reanimated react-native-keyboard-controller react-native-gesture-handler react-native-safe-area-context
+npm install --save react-native-gifted-chat react-native-reanimated react-native-gesture-handler react-native-safe-area-context react-native-keyboard-controller
 ```
 
 Expo
 ```bash
-npx expo install react-native-gifted-chat react-native-reanimated react-native-keyboard-controller react-native-gesture-handler react-native-safe-area-context
+npx expo install react-native-gifted-chat react-native-reanimated react-native-gesture-handler react-native-safe-area-context react-native-keyboard-controller
 ```
 
 ### Non-expo users
@@ -136,7 +137,9 @@ npx pod-install
 
 Follow guide: [react-native-reanimated](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started/#step-2-add-reanimateds-babel-plugin)
 
-## Simple example
+## Examples
+
+### Basic usage
 
 ```jsx
 import React, { useState, useCallback, useEffect } from 'react'
@@ -149,7 +152,7 @@ export function Example() {
 
   // If you have a tab bar, include its height
   const tabbarHeight = 50
-  const keyboardBottomOffset = insets.bottom + tabbarHeight
+  const keyboardVerticalOffset = insets.bottom + tabbarHeight
 
   useEffect(() => {
     setMessages([
@@ -179,13 +182,14 @@ export function Example() {
       user={{
         _id: 1,
       }}
-      keyboardBottomOffset={keyboardBottomOffset}
+
+      keyboardAvoidingViewProps={{ keyboardVerticalOffset }}
     />
   )
 }
 ```
 
-## Different examples
+### Other examples
 
 Check out code of [`examples`](example)
 
@@ -210,9 +214,8 @@ Messages, system messages, quick replies etc.: [data structure](src/Models.ts)
 
 ### Keyboard & Layout
 
-- **`keyboardBottomOffset`** _(Integer)_ - Distance between the bottom of the screen and bottom of the `GiftedChat` component. Useful when you have a tab bar or navigation bar; default is `0`. Needed for correct keyboard avoiding behavior. Without it you might see gap between the keyboard and the input toolbar if you have a tab bar, navigation bar, or safe area.
-- **`isKeyboardInternallyHandled`** _(Bool)_ - 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`
-- **`shouldFocusInputOnKeyboardOpen`** _(Bool)_ - Focus on <TextInput> automatically when opening the keyboard; default `true`
+- **`keyboardProviderProps`** _(Object)_ - Props to be passed to the [`KeyboardProvider`](https://kirillzyusko.github.io/react-native-keyboard-controller/docs/api/keyboard-provider) for keyboard handling.
+- **`keyboardAvoidingViewProps`** _(Object)_ - Props to be passed to the [`KeyboardAvoidingView`](https://kirillzyusko.github.io/react-native-keyboard-controller/docs/api/keyboard-avoiding-view). The `behavior` prop defaults to `'padding'`.
 - **`isAlignedTop`** _(Boolean)_ Controls whether or not the message bubbles appear at the top of the chat (Default is false - bubbles align to bottom)
 - **`isInverted`** _(Bool)_ - Reverses display order of `messages`; default is `true`
 
@@ -509,25 +512,16 @@ fireEvent(loadingWrapper, 'layout', {
 1. Find responses in existing issues
 1. Try to keep issues for issues
 
-## License
+## Hire an expert
 
-- [MIT](LICENSE)
+Looking for a React Native freelance expert with more than 14 years of experience? Contact Xavier from his [website](https://xaviercarpentier.com)
 
 ## Author
 
-Feel free to ask me questions on Twitter [@FaridSafi](https://www.twitter.com/FaridSafi)! or [@xcapetir](https://www.twitter.com/xcapetir)!
-
-## Contributors
-
-- Kevin Cooper [cooperka](https://github.com/cooperka)
-- Kfir Golan [kfiroo](https://github.com/kfiroo)
-- Bruno Cascio [brunocascio](https://github.com/brunocascio)
-- Xavier Carpentier [xcarpentier](https://github.com/xcarpentier)
-- Kesha Antonov [kesha-antonov](https://github.com/kesha-antonov)
-- [more](https://github.com/FaridSafi/react-native-gifted-chat/graphs/contributors)
+Feel free to ask me questions on Twitter [@FaridSafi](https://www.twitter.com/FaridSafi) or [@xcapetir](https://www.twitter.com/xcapetir)
 
-## Hire an expert!
+## Maintainer
 
-Looking for a React Native freelance expert with more than 14 years of experience? Contact Xavier from his [website](https://xaviercarpentier.com)!
+Have any questions? Reach out to [Kesha Antonov](https://github.com/kesha-antonov)
 
-Need expert help with React Native Gifted Chat? Reach out to [Kesha Antonov](mailto:innokenty.longway@gmail.com)
+Please note that I'm maintaining this project in my free time for free. If you find any issues, feel free to open them, and I'll do my best to address them as time permits.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gifted-chat",
-  "version": "3.0.0-alpha.0",
+  "version": "3.0.0-alpha.1",
   "description": "The most complete chat UI for React Native",
   "keywords": [
     "android",
@@ -94,7 +94,7 @@
     "react-dom": "19.1.0",
     "react-native": "0.81.5",
     "react-native-gesture-handler": "^2.29.1",
-    "react-native-keyboard-controller": "^1.19.5",
+    "react-native-keyboard-controller": "^1.19.6",
     "react-native-reanimated": "^3.19.4",
     "react-native-safe-area-context": "^5.6.2",
     "react-test-renderer": "19.1.0",

package/src/GiftedChat/index.tsx

@@ -19,14 +19,7 @@ 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 { GiftedChatContext } from '../GiftedChatContext'
@@ -61,12 +54,9 @@ 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)
@@ -81,37 +71,12 @@ 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,34 +87,6 @@ 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)
@@ -334,78 +271,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,6 +8,7 @@ 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'
@@ -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 */
@@ -146,4 +141,6 @@ export interface GiftedChatProps<TMessage extends IMessage> extends Partial<Mess
     quickReplies: QuickRepliesProps<TMessage>,
   ) => React.ReactNode
   renderQuickReplySend?: () => React.ReactNode
+  keyboardProviderProps?: React.ComponentProps<typeof KeyboardProvider>
+  keyboardAvoidingViewProps?: KeyboardAvoidingViewProps
 }

package/src/MessageContainer/index.tsx

@@ -401,6 +401,8 @@ export const MessageContainer = <TMessage extends IMessage>(props: MessageContai
         scrollEventThrottle={1}
         onEndReached={onEndReached}
         onEndReachedThreshold={0.1}
+        keyboardDismissMode='interactive'
+        keyboardShouldPersistTaps='handled'
         {...listProps}
         onScroll={scrollHandler}
         onLayout={onLayoutList}

package/src/MessageContainer/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/MessageImage.tsx

@@ -8,47 +8,25 @@ import {
   StyleProp,
   ImageStyle,
   ImageURISource,
-  Modal,
   TouchableOpacity,
   LayoutChangeEvent,
   useWindowDimensions,
+  StatusBar,
 } from 'react-native'
 import { BaseButton, GestureHandlerRootView, Text } from 'react-native-gesture-handler'
+import { OverKeyboardView } from 'react-native-keyboard-controller'
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+  runOnJS,
+  Easing,
+} from 'react-native-reanimated'
 import { 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%',
-  },
-
-  closeButtonContainer: {
-    flexDirection: 'row',
-    justifyContent: 'flex-end',
-  },
-  closeButtonContent: {
-    padding: 10,
-  },
-  closeButtonIcon: {
-    fontSize: 20,
-    lineHeight: 20,
-    color: 'white',
-  },
-})
-
 export interface MessageImageProps<TMessage extends IMessage> {
   currentMessage: TMessage
   containerStyle?: StyleProp<ViewStyle>
@@ -70,6 +48,10 @@ export function MessageImage<TMessage extends IMessage = IMessage> ({
 
   const insets = useSafeAreaInsets()
 
+  // Animation values
+  const modalOpacity = useSharedValue(0)
+  const modalScale = useSharedValue(0.9)
+
   const imageSource = useMemo(() => ({
     ...imageSourceProps,
     uri: currentMessage?.image,
@@ -88,15 +70,23 @@ export function MessageImage<TMessage extends IMessage = IMessage> ({
 
     setIsModalVisible(true)
 
+    // Animate modal entrance
+    modalOpacity.value = withTiming(1, { duration: 300, easing: Easing.out(Easing.ease) })
+    modalScale.value = withTiming(1, { duration: 300, easing: Easing.out(Easing.ease) })
+
     if (isImageSourceChanged.current || !imageDimensions)
       Image.getSize(imageSource.uri, (width, height) => {
         setImageDimensions({ width, height })
       })
-  }, [imageSource.uri, imageDimensions])
+  }, [imageSource.uri, imageDimensions, modalOpacity, modalScale])
 
   const handleModalClose = useCallback(() => {
-    setIsModalVisible(false)
-  }, [])
+    // Animate modal exit
+    modalOpacity.value = withTiming(0, { duration: 200, easing: Easing.in(Easing.ease) })
+    modalScale.value = withTiming(0.9, { duration: 200, easing: Easing.in(Easing.ease) }, () => {
+      runOnJS(setIsModalVisible)(false)
+    })
+  }, [modalOpacity, modalScale])
 
   const handleImageLayout = useCallback((e: LayoutChangeEvent) => {
     setImageDimensions({
@@ -125,6 +115,11 @@ export function MessageImage<TMessage extends IMessage = IMessage> ({
     }
   }, [imageDimensions, windowDimensions.height, windowDimensions.width])
 
+  const modalAnimatedStyle = useAnimatedStyle(() => ({
+    opacity: modalOpacity.value,
+    transform: [{ scale: modalScale.value }],
+  }), [modalOpacity, modalScale])
+
   useEffect(() => {
     isImageSourceChanged.current = true
   }, [imageSource.uri])
@@ -140,42 +135,80 @@ 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>
+      {isModalVisible && (
+        <OverKeyboardView visible={isModalVisible}>
+          <StatusBar animated barStyle='dark-content' />
+          <Animated.View style={[styles.modalOverlay, modalAnimatedStyle]}>
+            <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>
-              </BaseButton>
-            </View>
-
-            <View style={[commonStyles.fill, commonStyles.centerItems]}>
-              <Zoom>
-                <Image
-                  style={modalImageDimensions}
-                  source={imageSource}
-                  resizeMode='contain'
-                  {...imageProps}
-                />
-              </Zoom>
-            </View>
-          </View>
-        </GestureHandlerRootView>
-      </Modal>
+              </View>
+            </GestureHandlerRootView>
+          </Animated.View>
+        </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',
+  },
+  modalImageContainer: {
+    width: '100%',
+    height: '100%',
+  },
+
+  closeButtonContainer: {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+  },
+  closeButtonContent: {
+    padding: 20,
+  },
+  closeButtonIcon: {
+    fontSize: 20,
+    lineHeight: 20,
+    color: 'white',
+  },
+})

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}
     />
   )
 

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__/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,