React-native-gifted-chat: Video isn't displaying

[luisar]

Issue Description

I'm trying to display video by using the property as per the example:

````
e.g. Chat Message

{
_id: 1,
text: 'My message',
createdAt: new Date(Date.UTC(2016, 5, 11, 17, 20, 0)),
user: {
_id: 2,
name: 'React Native',
avatar: 'https://facebook.github.io/react/img/logo_og.png',
},
image: 'https://facebook.github.io/react/img/logo_og.png',
// You can also add a video prop:
video: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4',
// Any additional custom parameters are passed through
}
````

I've googled and found others with this issue: https://github.com/FaridSafi/react-native-gifted-chat/issues/720 but I can't find a clear example of usage. By simply adding a video: param I get nothing. The message loads but no video. When hitting the URL of the video on a browser that works just fine.

What am I missing?
````
import { AppLoading, Video } from 'expo'
...

botSend = (step = 0) => {
let newMessage =
{
_id: this.state.messages.length + 1,
text: 'Video test',
createdAt: new Date(),
contentType: 'text',
user: bot,
video: 'https://media.giphy.com/media/SGkufeMafyuBhIw796/giphy.mp4'
}
if (newMessage) {
this.setState(previousState => ({
messages: GiftedChat.append(previousState.messages, newMessage),
}))
}
}
````

My component is:

<GiftedChat messages={this.state.messages} onSend={messages => this.onSend(messages)} renderInputToolbar={(props) => this.renderInputToolbar(props)} renderMessageVideo={(props) => this.renderMessageVideo(props)} user={USER} showAvatarForEveryMessage={true} renderUsernameOnMessage={true} />
and I also have the renderMessageVideo method:

renderMessageVideo(props){ return( <Video {...props} /> ); }

Additional Information

• React Native version: 0.57.1
• react-native-gifted-chat version: "^0.9.6"
• Platform(s) (iOS, Android, or both?): both

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[EdisonDevadoss]

I am also facing the same error could not access renderMessageVideo.
Please, anybody, help me.

[yuyanghh]

You may try the below codes~~

I wrapped the Video in View and it worked

renderMessageVideo(props) {
    console.log(props.currentMessage.video);
    return <View style={{ position: 'relative', height: 150, width: 250 }}><Video
      style={{
        position: 'absolute',
        left: 0,
        top: 0,
        height: 150,
        width: 250,
        borderRadius: 20,
      }}
      resizeMode="cover"
      height={150}
      width={250}
      muted={true}
      source={{ uri: props.currentMessage.video }}
      allowsExternalPlayback={false}></Video></View>
  }