Description
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