0

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.

Umair Asif
  • 1
  • 1

2 Answers2

0

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

Egizas
  • 317
  • 2
  • 10
  • Thanks for responding. but i've already modified the library as per my requirement. i am making chat app with all the functionalities having text, document, video, image, location, business card, contact, voice message. later on i'll work on live voice and video call. – Umair Asif Nov 17 '19 at 21:19
  • @UmairAsif Which one library did you prefer? We need to use the same parameters. And now we have a problem with react-native-gifted-chat. – Ilja Tomilovych Mar 11 '20 at 14:49
0

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}
/>
Bhol
  • 145
  • 3
  • 16