I am building a chatbot screen in React Native CLI using the react-native-gifted-chat package (version 0.16.3). However, when I run even a minimal example, I get the following error:
Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
Here is my minimal ChatbotScreen code:
import React, { useState, useEffect } from 'react';
import { GiftedChat } from 'react-native-gifted-chat';
import { View, StyleSheet } from 'react-native';
const Chatbotscreen = () => {
const [messages, setMessages] = useState([]);
useEffect(() => {
setMessages([
{
_id: 1,
text: 'Hello! How can I assist you today?',
createdAt: new Date(),
user: {
_id: 2,
name: 'Bot',
},
},
]);
}, []);
const onSend = (newMessages = []) => {
setMessages(previousMessages => GiftedChat.append(previousMessages, newMessages));
};
return (
<View style={styles.container}>
<GiftedChat
messages={messages}
onSend={onSend}
user={{ _id: 1 }}
/>
</View>
);
};
const styles = StyleSheet.create({
container: { flex: 1 },
});
export default Chatbotscreen;
and here is my app.jsx
import React from 'react';
import Chatbotscreen from './Source/Screens/Chatbotscreen';
const App = () => {
return <Chatbotscreen />;
};
export default App;