Quantcast
Channel: Active questions tagged react-native+android - Stack Overflow
Viewing all articles
Browse latest Browse all 29622

App crashes when sending message in react-native-gifted-chat

$
0
0

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:

  1. Build the Expo app as a preview build (APK).
  2. Install the APK on a physical Android device.
  3. Open the app and navigate to the chat screen.
  4. Type a message and press the send button.
  5. 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

Viewing all articles
Browse latest Browse all 29622

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>