TypeError: Attempted to assign to readonly property.

[kapilmhjn]

I am using GiftedChat to implement a chat component within my React Native APP using the code below. When I click the back button, I get the error "TypeError: Attempted to assign to read-only property." Below is the call stack for the error. I would appreciate any help here.

Versions:
Expo : 50.0
"react-native": "^0.73.6",
"react-native-gifted-chat": "^2.8.0"
"react-native-reanimated": "^3.8.1",
"react-native-responsive-screen": "^1.4.2",
"react-native-safe-area-context": "^3.1.9",
"react-native-screens": "^3.30.1",

function ChatScreen(props: any) {
return (


<TouchableOpacity
onPress={async () => {
props.navigation.goBack();
}}
>


Your Journal



<GiftedChat
messages={[
{
_id: "123",
text: "ABC",
createdAt: new Date(),
user: { _id: "1" },
},
]}
onSend={(messagesLocal) => {}}
user={{
_id: 5,
name: "", // Replace with user's actual name or identifier
}}
/>

);
}

Call Stack:
This error is located at:

in FlatList (at createAnimatedComponent.tsx:591)

in AnimatedComponent(FlatList) (at createAnimatedComponent.tsx:608)

in Unknown (at MessageContainer/index.js:204)

in RCTView (at View.js:116)

in View (at MessageContainer/index.js:200)

in MessageContainer (at GiftedChat/index.js:115)

in RCTView (at View.js:116)

in View (at GiftedChat/index.js:114)

in RCTView (at View.js:116)

in View (at createAnimatedComponent.tsx:591)

in AnimatedComponent(View) (at createAnimatedComponent.tsx:608)

in Unknown (at GiftedChat/index.js:272)

in RCTView (at View.js:116)

in View (at GiftedChat/index.js:270)

in RCTView (at View.js:116)

in View (at CustomActionSheet.tsx:93)

in RCTView (at View.js:116)

in View (at CustomActionSheet.tsx:101)

in CustomActionSheet (at ActionSheetProvider.tsx:49)

in ActionSheetProvider (at GiftedChat/index.js:269)

in GiftedChat (at GiftedChat/index.js:283)

in KeyboardControllerView (at createAnimatedComponent.js:54)

in Unknown (at createAnimatedComponent.tsx:591)

in AnimatedComponent(Component) (at createAnimatedComponent.tsx:608)

in Unknown (at animated.tsx:223)

in KeyboardProvider (at GiftedChat/index.js:282)

in GiftedChatWrapper (at ChatScreen.tsx:55)

in RCTView (at View.js:116)

in View (at ChatScreen.tsx:38)

in ChatScreen (created by SceneView)

in SceneView (created by CardContainer)

in RCTView (at View.js:116)

in View (created by CardContainer)

in RCTView (at View.js:116)

in View (created by CardContainer)

in RCTView (at View.js:116)

in View

in CardSheet (created by Card)

in RCTView (at View.js:116)

in View (at createAnimatedComponent.js:54)

in Unknown (created by PanGestureHandler)

in PanGestureHandler (created by PanGestureHandler)

in PanGestureHandler (created by Card)

in RCTView (at View.js:116)

in View (at createAnimatedComponent.js:54)

in Unknown (created by Card)

in RCTView (at View.js:116)

in View (created by Card)

in Card (created by CardContainer)

in CardContainer (created by CardStack)

in RNSScreen (at createAnimatedComponent.js:54)

in Unknown (at Screen.tsx:126)

in Suspender (at src/index.tsx:40)

in Suspense (at src/index.tsx:39)

in Freeze (at DelayedFreeze.tsx:24)

in DelayedFreeze (at Screen.tsx:125)

in InnerScreen (at Screen.tsx:214)

in Screen (created by MaybeScreen)

in MaybeScreen (created by CardStack)

in RNSScreenContainer (at ScreenContainer.tsx:28)

in ScreenContainer (created by MaybeScreenContainer)

in MaybeScreenContainer (created by CardStack)

in CardStack

in KeyboardManager (created by SafeAreaInsetsContext)

in RNCSafeAreaProvider (at SafeAreaContext.tsx:76)

in SafeAreaProvider (created by SafeAreaInsetsContext)

in SafeAreaProviderCompat (created by StackView)

in RNGestureHandlerRootView (at GestureHandlerRootView.android.tsx:21)

in GestureHandlerRootView (created by StackView)

in StackView (created by StackView)

in StackView

in Unknown (created by Navigator)

in Navigator (created by NavigationContainer)

in NavigationContainer (at App.tsx:139)

in LoginDataProvider (at App.tsx:138)

in App (at withDevTools.js:18)

in withDevTools(App) (at renderApplication.js:57)

in RCTView (at View.js:116)

in View (at AppContainer.js:127)

in RCTView (at View.js:116)

in View (at AppContainer.js:155)

in AppContainer (at renderApplication.js:50)

in main(RootComponent) (at renderApplication.js:67)

ERROR TypeError: Attempted to assign to readonly property.

Thanks,

Kapil

[dipantan]

@kapilmhjn Have you found any solution?

[Abhinav-kk]

Hi could you try this? I got this solution after a lot of searching and debugging.

    const flatListInstanceRef = useRef(null);

  // Callback ref to get the FlatList instance from GiftedChat
      const messageContainerRefCallback = useCallback(node => {
          // Store the instance when the component mounts
          flatListInstanceRef.current = node;
      }, []); // Empty dependency array ensures the callback itself doesn't change
  

Then in your gifted chat return component add this containerRef.

    // In your gifted chat component add this
    <GiftedChat
                // Use the callback ref instead of the ref object
                messageContainerRef={messageContainerRefCallback}  // Line to be added
                messages={messages}
                onSend={onSend}
     />

This fixed it for me, hope it works for you too.

[justalexok]

Thanks @Abhinav-kk that worked for me