CODEWITHSUNDEEP
react-nativereact-native-gifted-chat
Umair Asif
Umair Asif

Reputation: 1

React Native Gifted Chat - Video message is not clickable

Can any one help me through react native gifted chat? I'm making a full fledged chat app, having all features like text, image, video, document etc. By default I can chat using text and image. Can anyone help me with the code snippet of Video implementation? I need to show a video player onPress Video Message.

https://github.com/FaridSafi/react-native-gifted-chat

There are some custom props which can be used but I'm stuck, would appreciate any help or snippets I can get for running video in chat.

I've tried almost every prop regarding video:
1. renderBubble={this.renderBubble}
2. renderMessage={this.renderMessage}
3. renderCustomView={this.renderCustomView}

This is the following code which is showing the video (auto plays & then stops, no video button overlay):

this.setState({
messages: [
{
_id: 3,
video: 'https://www.w3schools.com/html/mov_bbb.mp4',
createdAt: new Date(),
user: {
_id: 2,
name: 'React Native',
avatar: 'https://placeimg.com/140/140/any'
}
]
});

<GiftedChat
messages={this.state.messages}
user={{
_id: userId
}}
renderActions={!socialize && this.renderActions}
onSend={this.sendMsesage}
onInputTextChanged={this.onChangeText}
text={this.state.message}
/>

When I press the video message, the message should open in video player which can be lightbox or react-native-video.

Upvotes: 0

Views: 2241

Answers (2)

Bhol
Bhol

Reputation: 145

I tried renderMessageVideo , could see the video. However encountered a different problem, the video is also being displayed along with empty space for text and image component 

renderMessageVideo(props) {
  console.log("videoprop:", 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,
    }}
    shouldPlay
  isLooping
  rate={1.0}
  resizeMode="cover"
    height={150}
    width={250}
    muted={true}
    source={{ uri: "https://www.w3schools.com/html/mov_bbb.mp4" }}
    allowsExternalPlayback={false}></Video>

    </View>
}

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

renderSend={this.renderSend}
scrollToBottom
scrollToBottomComponent={this.scrollToBottomComponent}
renderActions={this.renderActions}
renderMessageVideo={this.renderMessageVideo}
/>

Upvotes: 0

Egizas
Egizas

Reputation: 317

The video dependencies were removed as of 0.11.0 But you can still try to use this prop renderMessageVideo

Upvotes: 0

Related Questions