Display an image or video in gifted chat

Question

On react-native-gifted-chat main page, there is an example of message object with text, image and video all together:

{
  _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
}

here is the code which works fine rendering text message:

render() {
      return (
          <GiftedChat 
            messages={this.state.messages}
            onSend={messages => this._onSend(messages)}
            user={{_id: this.props.navigation.state.params.user.id,
                   name: this.props.navigation.state.params.user.name,
                   avatar: this.props.navigation.state.params.user.user_data.avatar}}
          /> 
      );
    }

I added both image and video to the message data:

 r = {
            _id: '',
            text: '',
            image:"",
            video:"",
            createdAt : '',
            user: {
              _id: '',
              name: '',
              avatar: ''
            }
          };

and created a message with video equal to a string of http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4. But the video is not shown in chat screen and therefore I can't click and play this video. What is missing with the code above to show a video (image) in gifted chat? Do I need to enable certain props for video or image?

Made some progress by fixing the message data. now it show a blank miniature screen with blue backgroud. When I clicked the miniature screen and it opened a full black screen. I tried the URL on browser and it rendered the image. How to fix the blank screen? — user938363, Jun 29 '19 at 05:58

score 1 · Answer 1 · edited Dec 06 '22 at 21:13

When messing around with the example code, I found that in the source code of Gifted chat that there is a ts file called Bubble.tsx

gifted-chat Bubble.tsx

And I can show images and video after putting it into the Gifted chat, just remember to do the followings

import the Bubble.tsx
write a render Bubble function
finally put the renderBubble function into props

this will be the import of gifted chat, import it at the start of your code that contains gifted-chat

import { GiftedChat, Bubble } from 'react-native-gifted-chat';

The renderBubble function, add into the class that will render gifted-chat

renderBubble = props => {
  return (
    <Bubble
      {...props}
      wrapperStyle={{
        left: {
          backgroundColor: '#f0f0f0',
        },
      }}
    />
  )
}

then in the render function, return the followings, make sure the renderBubble props are filled with your renderBubble function

return(
  <GiftedChat
    messages={this.state.messages}
    onSend={firebaseSvc.send}
    loadEarlier={this.state.loadEarlier}
    onLoadEarlier={this.onLoadEarlier}
    isLoadingEarlier={this.state.isLoadingEarlier}
    parsePatterns={this.parsePatterns}
    user={this.user}
    scrollToBottom
    onQuickReply={this.onQuickReply}
    renderAccessory={this.renderAccessory}
    renderActions={this.renderCustomActions}
    renderBubble={this.renderBubble}//This is what you must add in the code
    renderSystemMessage={this.renderSystemMessage}
    renderCustomView={this.renderCustomView}
    quickReplyStyle={{borderRadius:2}}
    renderQuickReplySend={this.renderQuickReplySend}
    timeTextStyle={{left:{color:'red'},right:{color:'yellow'}}}
  />
)

Actually you can find a working demo in Gifted-chat app.js , but due to the strange structure of gifted chat on Github, it will spend a little bit more time to figure out how gifted chat works and get all the dependencies

Link to sample app is broken – phatmann Feb 05 '20 at 21:19 — phatmann, Feb 05 '20 at 21:19

Display an image or video in gifted chat

1 Answers1