In react native gifted chat, which props is used for adding extra function like image and camera etc to the tool bar? And how do I achieve it?

Question

I am new to react native gifted chat. I try to add features like camera, gallery etc to the chat tool bar. I read through the props. I think it is either renderInputToolbar or renderComposer. But the website doesn't have any description of how to use its props. It just says what is a for and what type you can pass.

Can someone please explain more about how to use those props? Thanks a lot!

score 4 · Accepted Answer · answered Dec 28 '19 at 07:24

I have added camera button with send button as below :

<GiftedChat
  ...
  textInputStyle={styles.composer}
  minComposerHeight={40}
  minInputToolbarHeight={60}
  renderSend={(props) => (
    <View style={{ flexDirection: 'row', alignItems: 'center', height: 60 }}>
      <BtnRound icon="camera" iconColor={Colors.primaryBlue} size={40} style={{ marginHorizontal: 5 }} onPress={() => this.choosePicture()} />
      <Send {...props}>
        <View style={styles.btnSend}>
          <Icon name="ios-send" size={24} color="#ffffff" />
        </View>
      </Send>
    </View>
  )}
  ...
/>

Style

composer:{
  borderRadius: 25, 
  borderWidth: 0.5,
  borderColor: '#dddddd',
  marginTop: 10,
  marginBottom: 10,
  paddingLeft: 10,
  paddingTop: 5,
  paddingBottom: 5,
  paddingRight: 10,
  fontSize: 16
},
btnSend: {
  height: 40,
  width: 40,
  alignItems: 'center',
  justifyContent: 'center',
  marginRight: 10,
  backgroundColor: Colors.primary,
  ...getShadow(),
  borderRadius: 50
}

BtnRound is simple custom TouchableOpacity button which renders round button with provided icon. BtnRound code here.

In react native gifted chat, which props is used for adding extra function like image and camera etc to the tool bar? And how do I achieve it?

1 Answers1