App crashes when sending message in Gifted Chat

altunf commented 1 month ago

App crashes when sending message in Gifted Chat

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.

Code Snippets

`
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: "random msg",
      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; `