1

I've been using the GitedChat library and I want to add a button next to Bubble on the right "Reply".How do I do that?

Example Image

Bubble.JS

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

export const renderBubble = props => {
  return (
    <Bubble
      {...props}
      wrapperStyle={{
        left: {
          backgroundColor: '#FFFFFF',
          display: 'flex',
          flexDirection: 'row',
          borderBottomLeftRadius: 0,
        },
        right: {
          backgroundColor: '#1D4ED8',
          left: 0,
          marginBottom: 15,
          borderBottomRightRadius: 0,
        },
      }}
      tickStyle={{color: 'red'}}
    />
  );
};
Nam Vu
  • 5,669
  • 7
  • 58
  • 90
Material
  • 49
  • 1
  • 9

1 Answers1

0

Just renderBubble and create Image on right side

renderBubble(props) {
return (
  <View
    style={{ flex: 1, flexDirection: 'row'}}>
    <Bubble
      {...props}
    />
    <Image
      style={{
        width: 30,
        height: 30,
        marginTop: 'auto',
        bottom: 0,
      }}
      source={{
        uri:
          'https://icons-for-free.com/iconfiles/png/512/next+reply+icon-1320165657413388724.png',
      }}
    />
  </View>
);}

enter image description here

Nam Vu
  • 5,669
  • 7
  • 58
  • 90