App stürzt beim Senden einer Nachricht im React-Native-Gifted-Chat ab ⇐ Android

[Guest]

Ich erlebe einen Absturz in meiner Expo-App, wenn ich eine Nachricht über die Gifted Chat-Komponente sende. Die App funktioniert im Android-Simulator einwandfrei, stürzt jedoch ab, wenn ich das APK erstelle und auf einem physischen Gerät ausführe.
Schritte zur Reproduktion:

• Erstellen Sie die Expo-App als Vorschau-Build (APK).
• Installieren Sie die APK auf einem physischen Android-Gerät.
• Öffnen Öffnen Sie die App und navigieren Sie zum Chat-Bildschirm.
• Geben Sie eine Nachricht ein und klicken Sie auf „Senden“. Schaltfläche.
• Die App stürzt sofort ab.

Code: Select all

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) => (





);

const renderBubble = (props) => (
 (


{new Date(props.currentMessage.createdAt).toLocaleTimeString([], {
hour: "2-digit",
minute: "2-digit",
})}

{props.currentMessage.isStarred && (

)}

)}
/>
);

return (



);
};

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
  < li>React Native-Version: 0.74.5
• react-native-gifted-chat-Version: 2.6.4
• Plattform(en) (iOS, Android oder beides?): Android
• TypeScript-Version: 5.3.3