Bug: UI shifts down when navigating from chat list (tab) to chat screen using react-native-gifted-chat

[gdalkesh]

Description

I am facing a UI layout issue when navigating from a chat listing screen (bottom tab) to a chat messages screen that uses react-native-gifted-chat.

Libraries Used

• react-native-gifted-chat: ^3.2.3
• @react-navigation/bottom-tabs: ^7.4.2
• @react-navigation/native: ^7.1.14
• @react-navigation/native-stack: ^7.3.21

Issue

When navigating from the Chat List (Tab Screen) to the Chat Messages screen, the entire application UI shifts downward by a certain height.

Because of this:

• The bottom tab bar becomes partially hidden
• The overall UI appears cut off from the bottom
• It feels like extra bottom spacing is applied unexpectedly

Observed Behavior

• This issue occurs on devices using:

  • Button navigation
  • Gesture navigation

• The issue is more noticeable on button navigation, where the UI shift is clearly visible

Expected Behavior

The UI should remain stable when navigating between screens, and the bottom tab bar should remain fully visible without any layout shift or cut-off.

Additional Notes

This issue only happens when navigating to the screen that renders react-native-gifted-chat. Other screens do not show this behavior.

Please let me know if any additional information, reproduction steps is needed.
Thanks for your support!

[ahmedu007]

We've got the same issue. Mind you this is an Android only problem.

Tested it on latest GiftedChat: 3.3.0 aswell. Issue persists

Navigating to the screen, while <GiftedChat /> is commented out, it works normally. Enabling Gifted chat bring the issue back. I've tried to comment out all the props, but it seems like its an internal issue.

Screen.Recording.2026-01-21.at.15.12.27.mov

[zcdev01]

Аналогичная проблема с реальном андроиде
Как только открывается экран с чатом - буквально все приложение уходит вниз
Методом проб и тыков - проблема в KeyboardProvider, что в компоненте GiftedChat/index

[ahmedu007]

This diff fixed it for me on the latest version 3.3.2:

diff --git a/node_modules/react-native-gifted-chat/src/GiftedChat/index.tsx b/node_modules/react-native-gifted-chat/src/GiftedChat/index.tsx
index 2858b6c..013f476 100644
--- a/node_modules/react-native-gifted-chat/src/GiftedChat/index.tsx
+++ b/node_modules/react-native-gifted-chat/src/GiftedChat/index.tsx
@@ -19,7 +19,7 @@ import {
 import dayjs from 'dayjs'
 import localizedFormat from 'dayjs/plugin/localizedFormat'
 import { GestureHandlerRootView, TextInput } from 'react-native-gesture-handler'
-import { KeyboardAvoidingView, KeyboardProvider } from 'react-native-keyboard-controller'
+import { KeyboardAvoidingView } from 'react-native-keyboard-controller'
 import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context'
 import { TEST_ID } from '../Constant'
 import { GiftedChatContext } from '../GiftedChatContext'
@@ -354,13 +354,7 @@ function GiftedChatWrapper<TMessage extends IMessage = IMessage> (props: GiftedC
   return (
     <GestureHandlerRootView style={styles.fill}>
       <SafeAreaProvider>
-        <KeyboardProvider
-          statusBarTranslucent
-          navigationBarTranslucent
-          {...keyboardProviderProps}
-        >
           <GiftedChat<TMessage> {...rest} />
-        </KeyboardProvider>
       </SafeAreaProvider>
     </GestureHandlerRootView>
   )

[qaezrun]

Im at version 3.3.2 still having this issue.