I am experiencing a crash in my Expo app when I send a message using the Gifted Chat component. The app works perfectly in the Android simulator but crashes when I build the APK and run it on a physical device.
Steps to reproduce:
- Build the Expo app as a preview build (APK).
- Install the APK on a physical Android device.
- Open the app and navigate to the chat screen.
- Type a message and press the send button.
- The app crashes immediately.
import React, { useState, useCallback, useEffect } from "react";import { Bubble, GiftedChat, Send } from "react-native-gifted-chat";import { SafeAreaView, View, Text } from "react-native";import { Colors } from "../../constants/Colors";import { Ionicons } from "@expo/vector-icons";import { useSafeAreaInsets } from "react-native-safe-area-context";const ChatScreen = () => { const insets = useSafeAreaInsets(); const [messages, setMessages] = useState([]); const [isTyping, setIsTyping] = useState(false); const [text, setText] = useState(""); useEffect(() => { test(); }, []); const test = async (userMessage) => { setIsTyping(true); try { const newMessage = { _id: Date.now(), text: "api response text", createdAt: new Date(), user: { _id: 2, name: "AI Assistant" }, isStarred: false, }; setMessages((prev) => GiftedChat.append(prev, [newMessage])); } catch (error) { console.error("API Error:", error); } finally { setIsTyping(false); } }; const onSend = useCallback(async (messages = []) => { setMessages((prev) => GiftedChat.append(prev, messages)); await test(messages[0].text); }, []); const onLongPress = (context, message) => { setMessages((prev) => prev.map((msg) => msg._id === message._id ? { ...msg, isStarred: !msg.isStarred } : msg ) ); }; const renderSend = (props) => (<View style={{ flexDirection: "row", alignItems: "center", padding: 14 }}><Send {...props} containerStyle={styles.sendButton}><Ionicons name="paper-plane" size={20} color="white" /></Send></View> ); const renderBubble = (props) => (<Bubble {...props} wrapperStyle={{ left: { backgroundColor: Colors.card }, right: { backgroundColor: Colors.primary }, }} renderTime={() => (<View style={styles.timeContainer}><Text style={styles.timeText}> {new Date(props.currentMessage.createdAt).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", })}</Text> {props.currentMessage.isStarred && (<Ionicons name="star" size={15} color="#FFD700" /> )}</View> )} /> ); return (<SafeAreaView style={{ flex: 1, backgroundColor: "white", paddingBottom: insets.bottom, }}><GiftedChat messages={messages} onSend={onSend} user={{ _id: 1 }} isTyping={isTyping} renderBubble={renderBubble} renderSend={renderSend} onLongPress={onLongPress} text={text} onInputTextChanged={setText} maxComposerHeight={100} textInputProps={styles.inputMsg} /></SafeAreaView> );};const styles = { timeContainer: { flexDirection: "row", alignItems: "center" }, timeText: { fontSize: 12, color: "#666", marginRight: 5 }, sendButton: { backgroundColor: Colors.primary, padding: 10, borderRadius: 10, justifyContent: "center", alignItems: "center", }, inputMsg: { backgroundColor: Colors.card, borderWidth: 1, borderRadius: 10, borderColor: "#666", paddingHorizontal: 10, fontSize: 16, marginVertical: 4, paddingTop: 8, },};export default ChatScreen;
- Nodejs version: v20.12.1
- React version: 18.2.0
- React Native version: 0.74.5
- react-native-gifted-chat version: 2.6.4
- Platform(s) (iOS, Android, or both?): Android
- TypeScript version: 5.3.3