React native – App crashes when sending message in react-native-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:

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