react-native-gifted-chat Video message is not displayed -Video not not implemented by GiftedChat

Question

Video is not being displayed in the message. Got message " Video is not implemented by GiftedChat. You need to provide your own implementation by using renderMessageVideo prop.

Message[] has the following values:
_id:
text: 
createdAt:
user:{
       _id:
       name:
       avatar:
     },
     image: 
     video:


<GiftedChat
messages={this.state.messages}
onSend={this.onSend.bind(this)}
user={{
_id: this.state.LoggedinuserID,
}}
/>

Please help what am I doing wrong

Answer 1

What its saying that you need to provide your custom component to wrap the video into

In your case you are rendering the messages directly to the GiftedChat so we will pass our custom video component to GiftedChat as below

Reference: https://github.com/FaridSafi/react-native-gifted-chat/#react-native-video-and-expo-av

import { Video,Audio } from 'expo-av';

   const renderMessageVideo = (props: any) => {
     const { currentMessage } = props;
     return (
       <View style={{ padding: 20 }}>
          <Video
           resizeMode="contain"
           useNativeControls
           shouldPlay={false}
           source={{ uri: currentMessage.video }}
           style={styles.video}
         />
       </View>
     );
   };


<GiftedChat
messages={this.state.messages}
onSend={this.onSend.bind(this)}
renderMessageVideo={renderMessageVideo}
user={{
_id: this.state.LoggedinuserID,
}}
/>