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!

Answer 1

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.