Multiple errors when using GiftedChat with its FlashList dependency in Expo SDK 51

[invisicow]

When using the GiftedChat component, I'm encountering multiple errors related to its internal FlashList dependency.

Environment:

• Expo SDK: 51.0.28
• React Native: 0.74.1
• react-native-gifted-chat: 2.7.3
• @shopify/flash-list: ^1.7.3
• react-native-reanimated: ~3.10.1
• react-native-keyboard-controller: ^1.16.4
• Platform: iOS

Errors:

1. TypeError: Cannot assign to read-only property 'isOverridden'
2. TypeError: Cannot assign to read-only property 'x'
3. Warning: "You have passed a style to FlashList. This list doesn't support styling, use contentContainerStyle or wrap the list in a parent and apply style to it instead."

The errors originate in GiftedChat's internal usage of FlashList through its ProgressiveListView component, suggesting compatibility issues between GiftedChat's implementation and its required dependencies.

Attempted solutions:

• Added all required dependencies per documentation
• Cleared Metro cache and rebuilt app
• Configured reanimated plugin in babel.config.js

Steps to reproduce:

1. Install GiftedChat and its required dependencies
2. Add GiftedChat component (defined below) to page
3. Run application
4. Multiple errors appear on component mount

My implementation:

<GiftedChat
	messages={messages}
	user={{ _id: userId }}
	alignTop={false}
	showUserAvatar={false}
	alwaysShowSend={true}
	renderAvatar={null}
	onSend={messages => onSend(messages)}
/>

Component Stack (truncated to relevant section):

    in ProgressiveListView (created by StickyContainer)
    in RCTView (created by View)
    in View (created by StickyContainer)
    in StickyContainer (created by FlashList)
    in FlashList (created by AnimatedComponent(FlashList))
    in AnimatedComponent(FlashList)
    in Unknown (created by MessageContainer)
    in RCTView (created by View)
    in View (created by MessageContainer)
    in MessageContainer (created by GiftedChat)
    in RCTView (created by View)
    in View (created by GiftedChat)
    in RCTView (created by View)
    in View (created by AnimatedComponent(View))
    in AnimatedComponent(View)
    in Unknown (created by GiftedChat)
    in RCTView (created by View)
    in View (created by GiftedChat)
    in RCTView (created by View)
    in View (created by ActionSheet)
    in ActionSheet
    in ActionSheetProvider (created by GiftedChat)
    in GiftedChat (created by GiftedChatWrapper)
    in KeyboardControllerView (created by Animated(Anonymous))
    in Animated(Anonymous) (created by AnimatedComponent(Animated(Anonymous)))
    in AnimatedComponent(Animated(Anonymous))
    in Unknown (created by KeyboardProvider)
    in KeyboardProvider (created by GiftedChatWrapper)
    in GiftedChatWrapper (created by Messages)

Thank you.

[kesha-antonov]

Hi

Does it break your app or is it just warnings?

[uniquarkD]

Hi

Does it break your app or is it just warnings?

It's crashing the app.

[kesha-antonov]

Could you reproduce it in the example app?

Since I was testing there and it worked

[invisicow]

Hi

Does it break your app or is it just warnings?

When GiftedChat mounts, I get: Warning: "You have passed a style to FlashList. This list doesn't support styling, use contentContainerStyle or wrap the list in a parent and apply style to it instead."

When I send a message, it crashes the app with: TypeError: Cannot assign to read-only property 'x'

I also get TypeError: Cannot assign to read-only property 'isOverridden' sometimes, but I can't consistently reproduce it.

[invisicow]

Could you reproduce it in the example app?

Since I was testing there and it worked

I've reproduced the FlashList warning here:
https://github.com/invisicow/gifted-chat-issue

I couldn't reproduce the errors, but hopefully this will help somehow. Let me know if there's any other way I can help.

Thanks!

[dksingla]

I am facing the same issue.

[ThomasGuenard]

I encountered the same problems (crash and several warning logs) and I'm on a bare react native project (no expo)

[kesha-antonov]

Could you make repro example?

Since example app & bare rn in our project works fine

[featlast]

### 🥲the same thing happens to me...

Stack: IOs - Android
"expo": "^52.0.37",
"react-native-keyboard-controller": "^1.16.5",
"@shopify/flash-list": "1.7.3",
"react-native-reanimated": "~3.16.1",

[TowhidKashem]

I had to pin the dependency down to 2.6.5 after suddenly finding the following bugs appear:

• I use a custom component for renderComposer prop, there used to be a small amount of bottom empty spacing under the input field previously which became much larger
• The black date bubbles began to appear on the list even though I use custom components for many of the list's inner components including custom bubbles where I have my own date headers. So these are redundant, also one of them with "Today" as the text appears far above the rest of the messages which start ay the bottom of the screen.
• type error: previously I had this <GiftedChat<GiftedMessage> which started to throw an error with the new changes.
• possibly more, I just began testing...

Previously I had tried to roll my own chat ui with flashlist and encountered many many issues due to the virtualization and ended up using flatlist until turning to gifted chat. I think this is a huge change and shouldn't have been made as a minor version. Not even sure if anyone out there solved all those subtle issues that occur with flashlist.

[kesha-antonov]

You're welcome to make PRs or use old versions of the lib since almost nobody doesn't support this lib

[kesha-antonov]

I'm working on flatlist implementation now

Still PRs are welcome. I'm ready to review them and merge

[iM-GeeKy]

Here is a reproducible example of the crash along with the warnings and a video as well if that may be of any help.

test2.mov

[kubacienciala]

I am getting isOverridden error like previous guys while trying to setState which renders additional content inside my renderBubble function. so its like:

{show && ()} inside renderBubble, then error occurs while show is true

[kesha-antonov]

Made FlatList implementation e46403f

[invisicow]

Made FlatList implementation e46403f

Awesome. Thank you for your contributions.

[kesha-antonov]

Published https://github.com/FaridSafi/react-native-gifted-chat/releases/tag/2.8.0

Please try new version

See updated installation instructions: https://github.com/FaridSafi/react-native-gifted-chat?tab=readme-ov-file#installation

[invisicow]

Published https://github.com/FaridSafi/react-native-gifted-chat/releases/tag/2.8.0

Please try new version

See updated installation instructions: https://github.com/FaridSafi/react-native-gifted-chat?tab=readme-ov-file#installation

2.8.0 fixed the errors and warnings. It works great, thanks again!

[invisicow]

Published https://github.com/FaridSafi/react-native-gifted-chat/releases/tag/2.8.0

Please try new version

See updated installation instructions: https://github.com/FaridSafi/react-native-gifted-chat?tab=readme-ov-file#installation

Unfortunately I am observing a new error, but this time with FlatList: ERROR TypeError: Cannot assign to read-only property 'current'

This error is located at:
    in FlatList (created by AnimatedComponent(FlatList))
    in AnimatedComponent(FlatList)
    in Unknown (created by MessageContainer)
    in RCTView (created by View)
    in View (created by MessageContainer)
    in MessageContainer (created by GiftedChat)
...

I am unsure what is triggering this error, but it's occurred while scrolling and leaving the page with GiftedChat in it.

Also, opening a MessageImage only shows a black screen without the image.

[kesha-antonov]

Published https://github.com/FaridSafi/react-native-gifted-chat/releases/tag/2.8.0
Please try new version
See updated installation instructions: https://github.com/FaridSafi/react-native-gifted-chat?tab=readme-ov-file#installation

Unfortunately I am observing a new error, but this time with FlatList: ERROR TypeError: Cannot assign to read-only property 'current'

This error is located at:
    in FlatList (created by AnimatedComponent(FlatList))
    in AnimatedComponent(FlatList)
    in Unknown (created by MessageContainer)
    in RCTView (created by View)
    in View (created by MessageContainer)
    in MessageContainer (created by GiftedChat)
...

I am unsure what is triggering this error, but it's occurred while scrolling and leaving the page with GiftedChat in it.

Also, opening a MessageImage only shows a black screen without the image.

Can you make repro?

[kubacienciala]

Published https://github.com/FaridSafi/react-native-gifted-chat/releases/tag/2.8.0
Please try new version
See updated installation instructions: https://github.com/FaridSafi/react-native-gifted-chat?tab=readme-ov-file#installation

Unfortunately I am observing a new error, but this time with FlatList: ERROR TypeError: Cannot assign to read-only property 'current'

This error is located at:
    in FlatList (created by AnimatedComponent(FlatList))
    in AnimatedComponent(FlatList)
    in Unknown (created by MessageContainer)
    in RCTView (created by View)
    in View (created by MessageContainer)
    in MessageContainer (created by GiftedChat)
...

I am unsure what is triggering this error, but it's occurred while scrolling and leaving the page with GiftedChat in it.
Also, opening a MessageImage only shows a black screen without the image.

Can you make repro?

As I noticed it happens when you want to lose focus of the screen with or you make reload on that page