renderInputToolbar and renderSend UI styling.

Issue Description

Hello! I would like to style giftedchat for my app but I’m having difficulties. I can’t seem to get the inputToolbar or renderSend styling to work. See image for explanation:

I have tried to use bottomOffset but this doesn’t seem to be having any effect. I have no idea what is causing the border around the send Icon.

Steps to Reproduce / Code Snippets

GiftedChat Code:

return (
  <View style={{flex: 1}}>
    <GiftedChat
      renderSend={this.renderSend}
      renderInputToolbar={this.renderInputToolbar}
      messages={this.state.messages}
      onSend={messages => this.onSend(messages)}
      user={{_id: 1,}} 
      renderMessage={this.renderMessage}
      alwaysShowSend={true}
    />
  </View>
)

InputToolbar Code:

renderInputToolbar (props) {
        return <InputToolbar {...props} containerStyle={styles.inputToolbar} />
      }

InputToolbar Styling:

inputToolbar: {
        marginLeft: 15,
        marginRight: 15,
        marginBottom: 10,
        borderWidth: 0.5,
        borderColor: 'grey',
        borderRadius: 25
    }

renderSend Code:

renderSend(props) {
        return (
          <Send {...props}>
              <Icon
                name="send"
                style={styles.sendIcon}
              />
          </Send>
        );
      }

sendIcon Styling:

    sendIcon: {
        fontSize: 25,
        color: '#3A97F9'
    },

Expected Results

No border around send Icon. The bottom message should not be obstructed by the input toolbar.

Additional Information

• Nodejs version: “12.6.0”
• React version: “16.8.6”
• React Native version: “0.60.4”
• react-native-gifted-chat version: “^0.9.11”
• Platform(s) (iOS, Android, or both?): Both

[HNCW]

This is my solution to remove the border that covers the send icon. This help solved my problem which is same as yours. The problem gifted chat does not provide the Send component props. In order to read all of the props. In windows, ctrl + left click on the <Send/> component. For mac, cmd + left click. Hope it solves your problem too

renderSend(props) { return ( <Send {…props} containerStyle={{ borderWidth: 0}} > <Icon name="send" style={styles.sendIcon} /> </Send> ); }

[gouravgoel]

Please help how can I reduce the distance between top of the keyboard and the input toolbar