Chat.js - Sending Media Message - React Native Gifted Chat App

Chat.js

...
const Chat = () => {
  ...
  const { cometChat, selectedConversation, user } = useContext(Context);

  const [messages, setMessages] = useState([]);
  const [selectedFile, setSelectedFile] = useState(null);
  ...
  useEffect(() => {
    if (selectedFile && selectedFile.name && selectedFile.uri) {
      sendMediaMessageCometChat();
    }
  }, [selectedFile]);
  ...
  const isValidMessage = (message) => {
    return message &&
      message.id &&
      message.sentAt &&
      message.sender &&
      message.sender.uid &&
      message.sender.name &&
      message.sender.avatar &&
      message.category &&
      message.category === 'message'
  };

  const transformSingleMessage = (message) => {
    if (isValidMessage(message)) {
      let transformedMessage = {
        _id: message.id ? message.id : uuidv4(),
        createdAt: new Date(message.sentAt * 1000),
        user: {
          _id: message.sender.uid,
          name: message.sender.name,
          avatar: message.sender.avatar,
        },
      }
      if (message.text) {
        transformedMessage.text = message.text;
      }
      if (message.data && message.data.url) {
        if (message.type && message.type === 'video') {
          transformedMessage.video = message.data.url;
        } else {
          transformedMessage.image = message.data.url;
        }
      }
      return transformedMessage;
    }
    return message;
  };
  ...
  const sendMediaMessageCometChat = () => {
    const receiverID = getReceiverId();
    const receiverType = getReceiverType();
    const messageType = selectedFile && selectedFile.type && selectedFile.type.includes('video') ? cometChat.MESSAGE_TYPE.VIDEO : cometChat.MESSAGE_TYPE.FILE;

    if (receiverID && receiverType) {
      const mediaMessage = new cometChat.MediaMessage(
        receiverID,
        selectedFile,
        messageType,
        receiverType
      );

      cometChat.sendMediaMessage(mediaMessage).then(
        message => {
          // Message sent successfully.
          const transformedSingleMessage = transformSingleMessage(message);
          setMessages(previousMessages => GiftedChat.append(previousMessages, [transformedSingleMessage]))
        },
        error => {
          // Handle exception.
        }
      );
    }
  };

  const getReceiverId = () => {
    if (selectedConversation && selectedConversation.guid) {
      return selectedConversation.guid;
    }
    if (selectedConversation && selectedConversation.uid) {
      return selectedConversation.uid;
    }
    return null;
  };

  const getReceiverType = () => {
    if (selectedConversation && selectedConversation.guid) {
      return cometChat.RECEIVER_TYPE.GROUP;
    }
    return cometChat.RECEIVER_TYPE.USER;
  };
  ...
  const handleSelectFile = () => {
    const options = {
      mediaType: 'mixed'
    };
    launchImageLibrary(options, (response) => {
      if (response.didCancel) {
        return null;
      } else if (response.assets && response.assets.length !== 0) {
        const uri = response.assets[0].uri;
        const fileName = response.assets[0].fileName;
        const type = response.assets[0].type;
        if (uri && fileName) {
          const file = {
            name: getFileName(fileName, type),
            uri: Platform.OS === 'android' ? uri : uri.replace('file://', ''),
            type: type || 'video/quicktime'
          };
          setSelectedFile(() => file);
        }
      }
    });
  };

  const renderActions = () => {
    return (<View style={{ flexDirection: 'row', paddingBottom: 12 }}>
      <TouchableOpacity style={styles.select} onPress={handleSelectFile}>
        <Image source={imageIcon} style={{ width: 24, height: 24 }} />
      </TouchableOpacity>
    </View>);
  };
  ...
  return (
    <>
      <View style={{ backgroundColor: '#fff', flex: 1 }}>
        <GiftedChat
          scrollToBottom
          messages={messages}
          onSend={messages => onSend(messages)}
          user={{
            _id: user.uid,
            name: user.name,
            avatar: user.avatar,
          }}
          renderActions={renderActions}
          renderMessageVideo={renderVideo}
        />
      </View>
    </>
  )
  ...
};
...