CODEWITHSUNDEEP
react-native
Leonel Salazar Videaux
Leonel Salazar Videaux

Reputation: 121

Custom Send button and clear textInput react-native-gifted-chat

I'm using react-native-gifted-chat and have a custom Send button, but how can I properly call onSend using my own Send button and after that how can I clear the inpuxText element?

Thanks.

Upvotes: 4

Views: 9293

Answers (3)

osama somy
osama somy

Reputation: 543

Better solution

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

  <Send {...props} >
                    <View style={{justifyContent: 'center', height: '100%', marginRight: 10}}>
                      <Icon
                          name='send'
                          type='ionicon'
                          size={24}
                          color={Colors.primaryColor}
                        />
                    </View>
                </Send>

Upvotes: 1

Daniel Ifechukwu
Daniel Ifechukwu

Reputation: 41

So it took me a while but I finally got it

 <GiftedChat
          messages={messages}
          textInputStyle={styles.textInput}
          onSend={messages => onSend(messages)}
          multiline
          user={{
            _id: 1,
          }}
          renderSend={(props)=>{
            const {text,messageIdGenerator,user, onSend} = props
            return(
              <TouchableOpacity onPress= {
                ()=>{
                   if (text && onSend) {
                       onSend({ text: text.trim(), user:user,_id:messageIdGenerator()}, true);
                 }
                 }
                } style={styles.sendButton}>
                   <Send/>
            </TouchableOpacity>
            )}} 
    />

as for using redux to clear it is a bit redundant, and you will have to work with a large object in redux which is not too go for performance

Just go to the main implementation of send.js in react native gifted chat

https://www.github.com/FaridSafi/react-native-gifted-chat/tree/master/src%2FSend.tsx

Upvotes: 1

theberbie
theberbie

Reputation: 94

You can define the renderSend function:

renderSend = (sendProps) => {
        <TouchableOpacity>
          <Image source={require('path/to/your/button/icon')} />
        </TouchableOpacity>
      );
  }

<GiftedChat renderSend={this.renderSend} />

More info here: https://github.com/FaridSafi/react-native-gifted-chat/issues/480

As for clearing the text input, perhaps you could use redux and clear the textInput by returning a blank textInput?

For example:

case MESSAGE_SENT:
      return { ...state, error: action.payload, loading: false, textInput: '' };

Upvotes: 1

Related Questions