GiftedChat flickering, wrong size

[levepic]

Issue Description

While 2.4.0 is perfect, upgraded to 2.6.x and its flickering. Its in a react-navigation fullscreen so there is no tab navigation. The chat appears, changes side (shrinks) then jumps back again. With exactly the same code, downgrading to 2.4.0 its perfect. Probably something about onlayout

Steps to Reproduce / Code Snippets

Its a production application with a lot of code

Expected Results

No flickering like in 2.4.0

Additional Information

• React Native version: 0.74.0
• react-native-gifted-chat version: 2.6.4
• Platform(s) (iOS, Android, or both?): Android

[nahooni0511]

I’m also encountering the same issue.

It appears the problem originates from the useAnimatedKeyboard module. Setting the isStatusBarTranslucentAndroid flag to true reduces the flickering, but it still occurs during the first invocation. Completely removing the useAnimatedKeyboard line eliminates the flickering.

From my observations, useAnimatedKeyboard seems to include logic (possibly using onLayout) to measure and store view dimensions. Interestingly, the flickering stops from the second invocation onward.

To investigate further, I initialized useAnimatedKeyboard during the app’s startup and then loaded GiftedChat. This resolved the flickering but introduced new issues with keyboard functionality.

The issue can be reproduced with a navigation structure combining bottomTabNavigation and StackNavigation. When navigating to GiftedChatScreen using navigation.navigate("GiftedChatScreen"), the screen transition causes a layout rearrangement, leading to flickering.

[mrkpatchaa]

On my side, I fixed the issue by hiding the react-router (react-navigation) header on the chat screen (headerShown: false), and creating a header my self. It's not the ideal, but at least it solves the issue for me for now.

[front-end-jeko]

@mrkpatchaa
I was happy, before analyzing that I already had headerShown: false on the Chat screen

[mrkpatchaa]

@front-end-jeko oops...
Depending on the way you're nesting the navigators you should check the right place.
Here is what I have, I am using expo-router
app/_layout.tsx

...
<Stack.Screen
  name="chat/[id]"
  options={{
    headerShown: false,
  }}
/>
...

app/(tabs)/_layout.tsx

...
<Tabs.Screen
  name="chats"
  options={{
    // @ts-expect-error href string
    href: '/account/chats',
    title: 'Chats',
  }}
/>
...

The chat list is in the tabs, but the chat screen is in the root stack. So the tabbar is not shown.
I navigate to each chat with a simple link

<Link
  href={{
    pathname: '/chat/[id]',
    params: { id: chat.id },
  }}
  asChild
>
...