react-native-gifted-chat 2.8.2-alpha.1 → 2.8.2-alpha.2

package/README.md

@@ -85,21 +85,19 @@
 
 ## Features
 
-- 🎉 **_`react-native-web`able_ (since 0.10.0)** [web configuration](#react-native-web)
-- Write with **TypeScript** (since 0.8.0)
 - Fully customizable components
 - Composer actions (to attach photos, etc.)
 - Load earlier messages
 - Copy messages to clipboard
-- Touchable links using [react-native-parsed-text](https://github.com/taskrabbit/react-native-parsed-text)
+- 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
-- Redux support
 - System message
 - Quick Reply messages (bot)
 - Typing indicator
+- react-native-web [web configuration](#react-native-web)
 
 # Getting started
 
@@ -117,18 +115,18 @@ Readme for this version: [2.6.5 readme](https://github.com/FaridSafi/react-nativ
 
 Yarn:
 ```bash
-yarn add react-native-gifted-chat react-native-reanimated react-native-keyboard-controller
+yarn add react-native-gifted-chat react-native-reanimated react-native-keyboard-controller react-native-gesture-handler react-native-safe-area-context
 ```
 
 Npm:
 
 ```bash
-npm install --save react-native-gifted-chat react-native-reanimated react-native-keyboard-controller
+npm install --save react-native-gifted-chat react-native-reanimated react-native-keyboard-controller react-native-gesture-handler react-native-safe-area-context
 ```
 
 Expo
 ```bash
-npx expo install react-native-gifted-chat react-native-reanimated react-native-keyboard-controller
+npx expo install react-native-gifted-chat react-native-reanimated react-native-keyboard-controller react-native-gesture-handler react-native-safe-area-context
 ```
 
 ### Non-expo users
@@ -173,9 +171,15 @@ fireEvent(loadingWrapper, 'layout', {
 ```jsx
 import React, { useState, useCallback, useEffect } from 'react'
 import { GiftedChat } from 'react-native-gifted-chat'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
 
 export function Example() {
   const [messages, setMessages] = useState([])
+  const insets = useSafeAreaInsets()
+
+  // If you have a tab bar, include its height
+  const tabbarHeight = 50
+  const keyboardBottomOffset = insets.bottom + tabbarHeight
 
   useEffect(() => {
     setMessages([
@@ -205,6 +209,7 @@ export function Example() {
       user={{
         _id: 1,
       }}
+      keyboardBottomOffset={keyboardBottomOffset}
     />
   )
 }
@@ -212,7 +217,7 @@ export function Example() {
 
 ## Advanced example
 
-See [`App.tsx`](https://github.com/FaridSafi/react-native-gifted-chat/blob/master/example/App.tsx) for a working demo!
+See [`examples`](example) for a working demo!
 
 ## "Slack" example
 
@@ -354,8 +359,8 @@ interface QuickReplies {
 - **`textInputRef`** _(TextInput ref)_ - Ref to the text input
 - **`messages`** _(Array)_ - Messages to display
 - **`isTyping`** _(Bool)_ - Typing Indicator state; default `false`. If you use`renderFooter` it will override this.
+- **`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`
-- **`disableKeyboardController`** _(Bool)_ - Completely disable react-native-keyboard-controller. Useful when using react-native-navigation or other conflicting keyboard libraries; default is `false`
 - **`text`** _(String)_ - Input text; default is `undefined`, but if specified, it will override GiftedChat's internal state (e.g. for redux; [see notes below](#notes-for-redux))
 - **`onInputTextChanged`** _(Function)_ - Callback when the input text changes
 - **`messageIdGenerator`** _(Function)_ - Generate an id for new messages. Defaults to UUID v4, generated by [uuid](https://github.com/kelektiv/node-uuid)
@@ -391,7 +396,6 @@ interface QuickReplies {
 - **`renderMessageVideo`** _(Function)_ - Custom message video
 - **`imageProps`** _(Object)_ - Extra props to be passed to the [`<Image>`](https://reactnative.dev/docs/image.html) component created by the default `renderMessageImage`
 - **`videoProps`** _(Object)_ - Extra props to be passed to the video component created by the required `renderMessageVideo`
-- **`lightboxProps`** _(Object)_ - Extra props to be passed to the `MessageImage`'s [Lightbox](https://github.com/oblador/react-native-lightbox)
 - **`isCustomViewBottom`** _(Bool)_ - Determine whether renderCustomView is displayed before or after the text, image and video views; default is `false`
 - **`renderCustomView`** _(Function)_ - Custom view inside the bubble
 - **`renderDay`** _(Function)_ - Custom day above a message
@@ -405,22 +409,42 @@ interface QuickReplies {
 - **`renderSend`** _(Function)_ - Custom send button; you can pass children to the original `Send` component quite easily, for example, to use a custom icon ([example](https://github.com/FaridSafi/react-native-gifted-chat/pull/487))
 - **`renderAccessory`** _(Function)_ - Custom second line of actions below the message composer
 - **`onPressActionButton`** _(Function)_ - Callback when the Action button is pressed (if set, the default `actionSheet` will not be used)
-- **`bottomOffset`** _(Integer)_ - Distance of the chat from the bottom of the screen (e.g. useful if you display a tab bar)
 - **`focusOnInputWhenOpeningKeyboard`** _(Bool)_ - Focus on <TextInput> automatically when opening the keyboard; default `true`
 - **`minInputToolbarHeight`** _(Integer)_ - Minimum height of the input toolbar; default is `44`
 - **`listProps`** _(Object)_ - Extra props to be passed to the messages [`<FlatList>`](https://reactnative.dev/docs/flatlist.html); some props can't be overridden, see the code in `MessageContainer.render()` for details
 - **`textInputProps`** _(Object)_ - props to be passed to the [`<TextInput>`](https://reactnative.dev/docs/textinput.html).
-- **`matchers`** _(Array)_ - Custom matchers for [react-native-autolink](https://github.com/joshswan/react-native-autolink) used to linking message content (like URLs and phone numbers), e.g.:
+- **`messageTextProps`** _(Object)_ - Extra props to be passed to the MessageText component. Useful for customizing link parsing behavior, text styles, and matchers. Supports all [react-native-autolink](https://github.com/joshswan/react-native-autolink) props including:
+  - `matchers` - Custom matchers for linking message content (like URLs, phone numbers, hashtags, mentions)
+  - `linkStyle` - Custom style for links
+  - `email` - Enable/disable email parsing (default: true)
+  - `phone` - Enable/disable phone number parsing (default: true)
+  - `url` - Enable/disable URL parsing (default: true)
+
+Example:
 
 ```js
- <GiftedChat
-   matchers={[
-     { type: 'phone', style: linkStyle, onPress: onPressPhoneNumber },
-     { pattern: /#(\w+)/, style: [linkStyle, styles.hashtag], onPress: onPressHashtag },
-   ]}
- />
+<GiftedChat
+  messageTextProps={{
+    matchers: [
+      {
+        pattern: /#(\w+)/g,
+        style: { color: '#0084ff', fontWeight: 'bold' },
+        onPress: (match) => console.log('Hashtag:', match.getAnchorText()),
+      },
+      {
+        pattern: /(?<![\.\w])@(?!__ELEMENT-)([\w-]+)/g,
+        style: { color: '#0084ff', fontWeight: 'bold' },
+        onPress: (match) => console.log('Mention:', match.getAnchorText()),
+      },
+    ],
+    linkStyle: { left: { color: 'blue' }, right: { color: 'lightblue' } },
+    phone: false,
+  }}
+/>
 ```
 
+- **`matchers`** _(Array)_ - **Deprecated:** Use `messageTextProps.matchers` instead. Custom matchers for [react-native-autolink](https://github.com/joshswan/react-native-autolink) used to linking message content (like URLs and phone numbers).
+
 - **`extraData`** _(Object)_ - Extra props for re-rendering FlatList on demand. This will be useful for rendering footer etc.
 - **`minComposerHeight`** _(Object)_ - Custom min-height of the composer.
 - **`maxComposerHeight`** _(Object)_ - Custom max height of the composer.
@@ -514,7 +538,7 @@ If you use React Navigation, additional handling may be required to account for
 module.exports = function override(config, env) {
   config.module.rules.push({
     test: /\.js$/,
-    exclude: /node_modules[/\\](?!react-native-gifted-chat|react-native-lightbox|react-native-parsed-text)/,
+    exclude: /node_modules[/\\](?!react-native-gifted-chat)/,
     use: {
       loader: 'babel-loader',
       options: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gifted-chat",
-  "version": "2.8.2-alpha.1",
+  "version": "2.8.2-alpha.2",
   "description": "The most complete chat UI for React Native",
   "keywords": [
     "android",
@@ -53,8 +53,7 @@
     "dayjs": "^1.11.19",
     "lodash.isequal": "^4.5.0",
     "react-native-autolink": "^4.2.0",
-    "react-native-communications": "^2.2.1",
-    "react-native-lightbox-v2": "^0.9.2"
+    "react-native-zoom-reanimated": "^1.4.10"
   },
   "devDependencies": {
     "@babel/core": "^7.28.5",
@@ -80,16 +79,12 @@
     "@typescript-eslint/eslint-plugin": "^8.46.4",
     "@typescript-eslint/parser": "^8.46.4",
     "babel-jest": "^29.7.0",
-    "eslint": "^8.57.0",
-    "eslint-config-standard": "^17.1.0",
-    "eslint-config-standard-jsx": "^11.0.0",
+    "eslint": "^9.18.0",
     "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-jest": "^28.11.0",
-    "eslint-plugin-json": "^4.0.1",
-    "eslint-plugin-n": "^17.23.1",
-    "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-promise": "^7.2.1",
+    "eslint-plugin-perfectionist": "^4.15.1",
     "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^5.1.0",
     "husky": "^9.1.7",
     "jest": "^29.7.0",
     "json": "^11.0.0",
@@ -97,16 +92,20 @@
     "react": "19.1.0",
     "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-reanimated": "^3.19.4",
+    "react-native-safe-area-context": "^5.6.2",
     "react-test-renderer": "19.1.0",
     "typescript": "^5.9.3"
   },
   "peerDependencies": {
     "react": ">=18.0.0",
     "react-native": "*",
+    "react-native-gesture-handler": ">=2.0.0",
     "react-native-keyboard-controller": ">=1.0.0",
-    "react-native-reanimated": ">=3.0.0 || ^4.0.0"
+    "react-native-reanimated": ">=3.0.0 || ^4.0.0",
+    "react-native-safe-area-context": ">=5.0.0"
   },
   "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e",
   "engines": {

package/src/Actions.tsx

@@ -2,13 +2,13 @@ import React, { ReactNode, useCallback } from 'react'
 import {
   StyleSheet,
   Text,
-  TouchableOpacity,
   View,
   StyleProp,
   ViewStyle,
   TextStyle,
 } from 'react-native'
 import Color from './Color'
+import { TouchableOpacity } from './components/TouchableOpacity'
 import { useChatContext } from './GiftedChatContext'
 
 import stylesCommon from './styles'

package/src/Avatar.tsx

@@ -7,8 +7,8 @@ import {
   ViewStyle,
 } from 'react-native'
 import { GiftedAvatar } from './GiftedAvatar'
-import { isSameUser, isSameDay } from './utils'
 import { IMessage, LeftRightStyle, User } from './types'
+import { isSameUser, isSameDay } from './utils'
 
 interface Styles {
   left: {

package/src/Bubble/index.tsx

@@ -6,19 +6,19 @@ import {
 } from 'react-native'
 
 import { useChatContext } from '../GiftedChatContext'
-import { QuickReplies } from '../QuickReplies'
-import { MessageText } from '../MessageText'
+import { MessageAudio } from '../MessageAudio'
 import { MessageImage } from '../MessageImage'
+import { MessageText } from '../MessageText'
 import { MessageVideo } from '../MessageVideo'
-import { MessageAudio } from '../MessageAudio'
-import { Time } from '../Time'
+import { QuickReplies } from '../QuickReplies'
+import stylesCommon from '../styles'
 
-import { isSameUser, isSameDay } from '../utils'
+import { Time } from '../Time'
 import { IMessage } from '../types'
-import { BubbleProps } from './types'
+import { isSameUser, isSameDay } from '../utils'
 
-import stylesCommon from '../styles'
 import styles from './styles'
+import { BubbleProps, RenderMessageTextProps } from './types'
 
 export * from './types'
 
@@ -142,14 +142,17 @@ const Bubble = <TMessage extends IMessage = IMessage>(props: BubbleProps<TMessag
         /* eslint-disable @typescript-eslint/no-unused-vars */
         containerStyle,
         wrapperStyle,
+        messageTextProps,
         /* eslint-enable @typescript-eslint/no-unused-vars */
-        ...messageTextProps
+        ...messageTextPropsRest
       } = props
 
+      const combinedProps = { ...messageTextPropsRest, ...messageTextProps } as RenderMessageTextProps<TMessage>
+
       if (props.renderMessageText)
-        return props.renderMessageText(messageTextProps)
+        return props.renderMessageText(combinedProps)
 
-      return <MessageText {...messageTextProps} />
+      return <MessageText {...combinedProps} />
     }
 
     return null

package/src/Bubble/types.ts

@@ -4,9 +4,9 @@ import {
   ViewStyle,
   TextStyle,
 } from 'react-native'
-import { QuickRepliesProps } from '../QuickReplies'
-import { MessageTextProps, MessageOption } from '../MessageText'
 import { MessageImageProps } from '../MessageImage'
+import { MessageTextProps, MessageOption } from '../MessageText'
+import { QuickRepliesProps } from '../QuickReplies'
 import { TimeProps } from '../Time'
 import {
   User,
@@ -18,7 +18,7 @@ import {
   MessageAudioProps,
 } from '../types'
 
-/* eslint-disable no-use-before-define */
+ 
 export type RenderMessageImageProps<TMessage extends IMessage> = Omit<
   BubbleProps<TMessage>,
   'containerStyle' | 'wrapperStyle'
@@ -42,7 +42,7 @@ export type RenderMessageTextProps<TMessage extends IMessage> = Omit<
   'containerStyle' | 'wrapperStyle' | 'options'
 > &
   MessageTextProps<TMessage>
-/* eslint-enable no-use-before-define */
+ 
 
 export interface BubbleProps<TMessage extends IMessage> {
   user?: User
@@ -66,6 +66,7 @@ export interface BubbleProps<TMessage extends IMessage> {
   quickReplyStyle?: StyleProp<ViewStyle>
   quickReplyTextStyle?: StyleProp<TextStyle>
   quickReplyContainerStyle?: StyleProp<ViewStyle>
+  messageTextProps?: Partial<MessageTextProps<TMessage>>
   onPressMessage?(context?: unknown, message?: unknown): void
   onLongPressMessage?(context?: unknown, message?: unknown): void
   onQuickReply?(replies: Reply[]): void

package/src/Composer.tsx

@@ -8,8 +8,8 @@ import {
   TextInputContentSizeChangeEventData,
   useColorScheme,
 } from 'react-native'
-import { MIN_COMPOSER_HEIGHT } from './Constant'
 import Color from './Color'
+import { MIN_COMPOSER_HEIGHT } from './Constant'
 import stylesCommon from './styles'
 
 export interface ComposerProps {

package/src/Day/index.tsx

@@ -4,15 +4,15 @@ import {
   View,
 } from 'react-native'
 import dayjs from 'dayjs'
-import relativeTime from 'dayjs/plugin/relativeTime'
 import calendar from 'dayjs/plugin/calendar'
+import relativeTime from 'dayjs/plugin/relativeTime'
 
 import { DATE_FORMAT } from '../Constant'
-import { DayProps } from './types'
-
 import { useChatContext } from '../GiftedChatContext'
+
 import stylesCommon from '../styles'
 import styles from './styles'
+import { DayProps } from './types'
 
 export * from './types'
 

package/src/GiftedAvatar.tsx

@@ -2,7 +2,6 @@ import React, { useCallback, useMemo } from 'react'
 import {
   Image,
   Text,
-  TouchableOpacity,
   View,
   StyleSheet,
   StyleProp,
@@ -10,8 +9,9 @@ import {
   TextStyle,
 } from 'react-native'
 import Color from './Color'
-import { User } from './types'
+import { TouchableOpacity } from './components/TouchableOpacity'
 import stylesCommon from './styles'
+import { User } from './types'
 
 const {
   carrot,

package/src/GiftedChat/index.tsx

@@ -7,17 +7,26 @@ import React, {
   useCallback,
   RefObject,
 } from 'react'
+import {
+  TextInput,
+  View,
+  LayoutChangeEvent,
+} from 'react-native'
 import {
   ActionSheetProvider,
   ActionSheetProviderRef,
 } from '@expo/react-native-action-sheet'
 import dayjs from 'dayjs'
 import localizedFormat from 'dayjs/plugin/localizedFormat'
-import {
-  TextInput,
-  View,
-  LayoutChangeEvent,
-} from 'react-native'
+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 { Actions } from '../Actions'
 import { Avatar } from '../Avatar'
 import Bubble from '../Bubble'
@@ -32,25 +41,17 @@ import Message from '../Message'
 import MessageContainer, { AnimatedList } from '../MessageContainer'
 import { MessageImage } from '../MessageImage'
 import { MessageText } from '../MessageText'
-import {
-  IMessage,
-} from '../types'
 import { Send } from '../Send'
+import stylesCommon from '../styles'
 import { SystemMessage } from '../SystemMessage'
 import { Time } from '../Time'
-import * as utils from '../utils'
-import Animated, {
-  useAnimatedStyle,
-  useAnimatedReaction,
-  useSharedValue,
-  withTiming,
-  runOnJS,
-} from 'react-native-reanimated'
-import { KeyboardProvider, useReanimatedKeyboardAnimation } from 'react-native-keyboard-controller'
-import { GiftedChatProps } from './types'
+import {
+  IMessage,
+} from '../types'
 
-import stylesCommon from '../styles'
+import * as utils from '../utils'
 import styles from './styles'
+import { GiftedChatProps } from './types'
 
 dayjs.extend(localizedFormat)
 
@@ -75,14 +76,13 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
     textInputProps,
     renderChatFooter,
     renderInputToolbar,
-    bottomOffset = 0,
+    keyboardBottomOffset = 0,
     focusOnInputWhenOpeningKeyboard = true,
     onInputTextChanged,
     inverted = true,
     minComposerHeight = MIN_COMPOSER_HEIGHT,
     maxComposerHeight = MAX_COMPOSER_HEIGHT,
     isKeyboardInternallyHandled = true,
-    disableKeyboardController = false,
   } = props
 
   const actionSheetRef = useRef<ActionSheetProviderRef>(null)
@@ -108,23 +108,24 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
   // Always call the hook, but conditionally use its data
   const keyboardControllerData = useReanimatedKeyboardAnimation()
 
-  // Create a mock keyboard object when disabled
+  // Create a mock keyboard object when keyboard is not internally handled
   const keyboard = useMemo(() => {
-    if (disableKeyboardController)
+    if (!isKeyboardInternallyHandled)
       return { height: { value: 0 } }
+
     return keyboardControllerData
-  }, [disableKeyboardController, keyboardControllerData])
+  }, [isKeyboardInternallyHandled, keyboardControllerData])
 
   const trackingKeyboardMovement = useSharedValue(false)
-  const keyboardOffsetBottom = useSharedValue(0)
+  const keyboardBottomOffsetAnim = useSharedValue(0)
 
   const contentStyleAnim = useAnimatedStyle(
     () => ({
       transform: [
-        { translateY: keyboard.height.value - keyboardOffsetBottom.value },
+        { translateY: keyboard.height.value + keyboardBottomOffsetAnim.value },
       ],
     }),
-    [keyboard, keyboardOffsetBottom]
+    [keyboard, keyboardBottomOffsetAnim]
   )
 
   const getTextFromProp = useCallback(
@@ -278,6 +279,7 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
 
   const onInitialLayoutViewLayout = useCallback(
     (e: LayoutChangeEvent) => {
+      console.log('onInitialLayoutViewLayout', e.nativeEvent.layout.height)
       if (isInitialized)
         return
 
@@ -349,23 +351,23 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
       setText(props.text)
   }, [props.text])
 
-  // Only set up keyboard animation when keyboard controller is enabled
+  // Only set up keyboard animation when keyboard is internally handled
   useAnimatedReaction(
-    () => disableKeyboardController ? 0 : -keyboard.height.value,
+    () => isKeyboardInternallyHandled ? keyboard.height.value : 0,
     (value, prevValue) => {
-      // Skip keyboard handling when disabled
-      if (disableKeyboardController)
+      // Skip keyboard handling when not internally handled
+      if (!isKeyboardInternallyHandled)
         return
 
       if (prevValue !== null && value !== prevValue) {
-        const isKeyboardMovingUp = value > prevValue
+        const isKeyboardMovingUp = value < prevValue
         if (isKeyboardMovingUp !== trackingKeyboardMovement.value) {
           trackingKeyboardMovement.value = isKeyboardMovingUp
-          keyboardOffsetBottom.value = withTiming(
-            isKeyboardMovingUp ? bottomOffset : 0,
+          keyboardBottomOffsetAnim.value = withTiming(
+            isKeyboardMovingUp ? keyboardBottomOffset : 0,
             {
-              // If `bottomOffset` exists, we change the duration to a smaller value to fix the delay in the keyboard animation speed
-              duration: bottomOffset ? 150 : 400,
+              // If `keyboardBottomOffset` exists, we change the duration to a smaller value to fix the delay in the keyboard animation speed
+              duration: keyboardBottomOffset ? 150 : 400,
             }
           )
 
@@ -383,8 +385,8 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
       focusOnInputWhenOpeningKeyboard,
       handleTextInputFocusWhenKeyboardHide,
       handleTextInputFocusWhenKeyboardShow,
-      bottomOffset,
-      disableKeyboardController,
+      keyboardBottomOffset,
+      isKeyboardInternallyHandled,
     ]
   )
 
@@ -398,7 +400,7 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
         >
           {isInitialized
             ? (
-              <Animated.View style={[stylesCommon.fill, (isKeyboardInternallyHandled && !disableKeyboardController) && contentStyleAnim]}>
+              <Animated.View style={[stylesCommon.fill, isKeyboardInternallyHandled && contentStyleAnim]}>
                 {renderMessages}
                 {inputToolbarFragment}
               </Animated.View>
@@ -413,14 +415,16 @@ function GiftedChat<TMessage extends IMessage = IMessage> (
 }
 
 function GiftedChatWrapper<TMessage extends IMessage = IMessage> (props: GiftedChatProps<TMessage>) {
-  // Don't use KeyboardProvider when keyboard controller is disabled
-  if (props.disableKeyboardController)
+  // Don't use KeyboardProvider when keyboard is not internally handled
+  if (!props.isKeyboardInternallyHandled)
     return <GiftedChat<TMessage> {...props} />
 
   return (
-    <KeyboardProvider>
-      <GiftedChat<TMessage> {...props} />
-    </KeyboardProvider>
+    <GestureHandlerRootView style={styles.fill}>
+      <KeyboardProvider>
+        <GiftedChat<TMessage> {...props} />
+      </KeyboardProvider>
+    </GestureHandlerRootView>
   )
 }
 

package/src/GiftedChat/styles.ts

@@ -1,6 +1,9 @@
 import { StyleSheet } from 'react-native'
 
 export default StyleSheet.create({
+  fill: {
+    flex: 1,
+  },
   contentContainer: {
     overflow: 'hidden',
   },

package/src/GiftedChat/types.ts

@@ -1,21 +1,26 @@
 import React, { RefObject } from 'react'
-import {
-  ActionSheetOptions,
-} from '@expo/react-native-action-sheet'
 import {
   TextInput,
   StyleProp,
   TextStyle,
   ViewStyle,
 } from 'react-native'
-import { LightboxProps } from 'react-native-lightbox-v2'
+import {
+  ActionSheetOptions,
+} from '@expo/react-native-action-sheet'
 import { ActionsProps } from '../Actions'
 import { AvatarProps } from '../Avatar'
+import { BubbleProps } from '../Bubble'
 import { ComposerProps } from '../Composer'
 import { InputToolbarProps } from '../InputToolbar'
 import { MessageProps } from '../Message'
+import { AnimatedList, MessageContainerProps } from '../MessageContainer'
 import { MessageImageProps } from '../MessageImage'
 import { MessageTextProps } from '../MessageText'
+import { QuickRepliesProps } from '../QuickReplies'
+import { SendProps } from '../Send'
+import { SystemMessageProps } from '../SystemMessage'
+import { TimeProps } from '../Time'
 import {
   IMessage,
   LeftRightStyle,
@@ -23,12 +28,6 @@ import {
   MessageVideoProps,
   User,
 } from '../types'
-import { QuickRepliesProps } from '../QuickReplies'
-import { SendProps } from '../Send'
-import { SystemMessageProps } from '../SystemMessage'
-import { TimeProps } from '../Time'
-import { AnimatedList, MessageContainerProps } from '../MessageContainer'
-import { BubbleProps } from '../Bubble'
 
 export interface GiftedChatProps<TMessage extends IMessage> extends Partial<MessageContainerProps<TMessage>> {
   /* Message container ref */
@@ -54,8 +53,6 @@ export interface GiftedChatProps<TMessage extends IMessage> extends Partial<Mess
   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
-  /* Completely disable react-native-keyboard-controller. Useful when using react-native-navigation or other conflicting keyboard libraries; default is `false` */
-  disableKeyboardController?: boolean
   /* Whether to render an avatar for the current user; default is false, only show avatars for other users */
   showUserAvatar?: boolean
   /* When false, avatars will only be displayed when a consecutive message is from the same user on the same day; default is false */
@@ -64,10 +61,8 @@ export interface GiftedChatProps<TMessage extends IMessage> extends Partial<Mess
   renderAvatarOnTop?: boolean
   /* Extra props to be passed to the <Image> component created by the default renderMessageImage */
   imageProps?: MessageImageProps<TMessage>
-  /* Extra props to be passed to the MessageImage's Lightbox */
-  lightboxProps?: LightboxProps
   /* Distance of the chat from the bottom of the screen (e.g. useful if you display a tab bar); default is 0 */
-  bottomOffset?: number
+  keyboardBottomOffset?: number
   /* Focus on <TextInput> automatically when opening the keyboard; default is true */
   focusOnInputWhenOpeningKeyboard?: boolean
   /* Minimum height of the input toolbar; default is 44 */
@@ -148,7 +143,9 @@ export interface GiftedChatProps<TMessage extends IMessage> extends Partial<Mess
   onPressActionButton?(): void
   /* Callback when the input text changes */
   onInputTextChanged?(text: string): void
-  /* Custom parse patterns for react-native-parsed-text used to linking message content (like URLs and phone numbers) */
+  /* Extra props to be passed to the MessageText component */
+  messageTextProps?: Partial<MessageTextProps<TMessage>>
+  /* Custom parse patterns for react-native-autolink used to linking message content (like URLs and phone numbers) */
   matchers?: MessageTextProps<TMessage>['matchers']
   renderQuickReplies?(
     quickReplies: QuickRepliesProps<TMessage>,