React-native-gifted-chat: How to add the attach button, the video button and the microphone button next to the text field

[EbrahimiM]

First of all, I would like to thank everyone who is trying to develop this software and In advance I apologize if my question is simple and obvious

I want to add the attach button, the video button and the microphone button next to the text field like WhatsApp.

Would you please guide me how to do this?
is there any sample how doing that?

thank you very much for taking the time to answer my questions

[evertonco]

You have to use render functions provided by GiftedChat. In your case, use renderComposer and renderSend.

renderSend (Function) - Custom send button; you can pass children to the original Send component quite easily, for example to use a custom icon

renderComposer (Function) - Custom text input message composer

General example:

import { Composer } from 'react-native-gifted-chat'

...
renderComposer = props => {
  return (
    <View style={{flexDirection: 'row'}}>
      <Composer {...props} />
      <CustomImageButton />
      <CustomAttachButton />
    </View>
  );
}

renderSend = props => {

  if (!props.text.trim()) { // text box empty
    return <AudioButton />;
  }

  return <SendTextButton />;
}

render () {
  return  <GiftedChat 
  ...
  renderComposer={this.renderComposer}
  renderSend={this.renderSend}
  />
}

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[geneho]

hi @evertonco or anyone , if i were to add something like

renderComposer = props => { return ( <View style={{flexDirection: 'row', textAlign:'left'}}> <Composer {...props} /> <Ionicons name="md-camera" color="grey" size={40}> </Ionicons> </View> ); }

my send button will be replaced, how do I make use of the
return ( <SendTextButton />; );

as currently now it will return me an error of unexpected token, expected "," at the SendTextButton.

Thanks!

[evertonco]

Remove ";"
return <SendTextButton />

SendTextButton is only example. You must implement it

[lakshayma]

From where can i import The Components like (SendTextButton , AudioButton , CustomAttachButton , CustomImageButton) ? As it is not available in the react-native-gifted-chat

[evertonco]

You must implement all these components. It's just a example.