Add children props to Send component

[sf27]

With this fix, you can set an image as a sender button or anything you want to.

renderSend(props) {
        return (
            <Send
                {...props}
            >
                <View style={{marginRight: 10, marginBottom: 5}}>
                    <Image source={require('../../assets/send.png')} resizeMode={'center'}/>
                </View>
            </Send>
        );
    }

[cooperka]

Thank you @sf27. FYI I couldn't push to your branch, so I added an extra commit manually: b669f3b.

[ryskiz]

For some reason @cooperka , I'm getting an error saying that the send component is undefined. I'm not sending a bound function.

[mafiusu]

@ryskiz you have to import Send from 'react-native-gifted-chat like this code-line.
import { GiftedChat, Actions, SystemMessage, Send } from 'react-native-gifted-chat';

[pavanmehta91]

How to center the image. Does image needs be given dimensions?

[skizzo]

Similar to @pavanmehta91 's question, I'd like to know how I can stretch my custom component to all of the input's height. Is that somehow possible?

[vladvmoisuc]

@skizzo @pavanmehta91 this is how I've done it.

renderSend={(props) => (
          <Send
            {...props}
            containerStyle={{
              height: 60,
              width: 60,
              justifyContent: 'center',
              alignItems: 'center',
            }}
          >
            <Image
              source={SendIcon}
              style={{
                width: 40,
                height: 40,
              }}
            />
          </Send>

[latovicalmin]

I resolved vertical center issue like this:

  renderSend = (props) => {
    return (
      <Send
        {...props}
        containerStyle={styles.sendContainer}
      >
        <SendIcon width={22.7} height={22.38} />
      </Send>
    );
  }

Styling

  sendContainer: {
    justifyContent: 'center',
    alignItems: 'center',
    alignSelf: 'center',
    marginRight: 15,
  },

Don't forget to import Send
import { GiftedChat, Send } from 'react-native-gifted-chat';

In my case SendIcon is svg, so you can use your custom styling inside Send component.

[AMoktar]

@latovicalmin is SendIcon part of 'react'native'gifted-chat' ?

[chinyart]

@latovicalmin is SendIcon part of 'react'native'gifted-chat' ?

No

[iway1]

Just remember to set alwaysShowSend={true} if you want the send button to always be present! this confused me for a few minutes.

[FaisalKhawaj]

 I can't send message when I click on my button image:
 Here is the code
     <GiftedChat
                    messages={messages}
                    inverted={true}
                    alwaysShowSend={true}
                    placeholder="Type any text here"
                    color="#39325C"
                    onSend={messages => onSend(messages)}
                    user={{
                        _id: 1,
                    }}
                    renderSend={props => {
                        return (
                            <Send {...props}>
                                <TouchableOpacity onPress={(messages) => onSend(messages)} style={styles.sendBtn}>
                                    <Image style={{ width: 25, height: 25 }} resizeMode="contain" source={require('../../assets/images/send.png')} />
                                </TouchableOpacity>
                            </Send>
                        )
                    }}

renderBubble={props => {
return (
<Bubble
{...props}

                                textStyle={{
                                    right: {
                                        padding: 10,
                                        color: '#000',

                                    },
                                    left: {

                                        color: '#ffff',
                                        padding: 10,

                                    },
                                }}
                                wrapperStyle={{
                                    left: styles.leftTextView,
                                    right: styles.rightTextView,
                                }}
                            />

                        );
                    }}

                    renderComposer={(props) => {
                        const { text, messageIdGenerator, user, onSend } = props

                        return (
                            <View style={{
                                backgroundColor: '#FFFF',
                                flexDirection: 'row',
                                flex: 1,
                                // width: wp('90%'),
                                alignItems: "center",

                            }}>
                                <TouchableOpacity
                                    style={{
                                        marginHorizontal: 2
                                    }}

                                >
                                    <Icon name="mic-outline" size={20} color={greenText} />

                                </TouchableOpacity>
                                <TouchableOpacity>
                                    <FontAwesome name="image" size={20} color={greenText} />
                                </TouchableOpacity>
                                <View style={{
                                    borderColor: LightGreyColor,
                                    backgroundColor: LightGreyColor,
                                    borderWidth: 1,
                                    width: wp('70%'),
                               
                                    margin: 2,
                                    borderRadius: 25, flexDirection: 'row'
                                }}>

                                    <Composer {...props} />
                                    <TouchableOpacity
                                  

                                        // }}
                                        style={{ alignSelf: 'center', marginLeft: 10 }}>
                                        <Icon name="happy-outline" size={30}
                                            color={greenText}
                                            style={{
                                                alignSelf: "center",
                                                marginRight: 5
                                            }} />
                                    </TouchableOpacity>
                                    {/* {
                                        text == '' ? (<>

                                        </>
                                        ) : (
                                            <TouchableOpacity
                                                style={{
                                                    marginHorizontal: '4%',
                                                    alignSelf: 'center'
                                                }}
                                       
                                            >
                                                <Icon name="send" size={30} color="#007AFF" />
                                            </TouchableOpacity>
                                        )
                                    } */}
                                </View>

                            </View>
                        );
                    }}

[NicolasAlt128]

@FaisalKhawaj Old, but it can help : You don't need to use TouchableOpacity when using Send :

  const renderSend = (props) => {
    return (
      <Send {...props} containerStyle={{
        justifyContent: 'center',
        alignItems: 'center',
        alignSelf: 'center',
        marginRight: 20,
      }}>
          <FontAwesome name="send" size={24} color="white" />
      </Send>
    );
  }