InputToolBar spacing on iPhoneX

Issue Description

There is an issue with iPhoneX where you either have the message that you are typing overlap with the bottom bar and can’t see all of your text, or if you add a marginBottom you overlap with the avatar from the most recent message.

Here is some text entered into the text box:

If you add one more character you get this strange artifact:

If you style the input toolbar then it overlaps the Initials Avatar of the last message:

Steps to Reproduce / Code Snippets

Default inputToolbar code:

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

Here is the styling:

inputToolbarStyle: {
    marginLeft: 15,
    marginRight: 15,
    marginBottom: 10,
    borderWidth: StyleSheet.hairlineWidth,
    borderColor: CommonStyles.colors.middleGrey,
    borderRadius: 25
  },

Expected Results

Should be able to add some padding below the avatar or at least line up the bottom of the avatar with the bottom of the last message

Additional Information

• Nodejs version: 9.3.0
• React version: 16.3.1
• React Native version: Expo version 27
• react-native-gifted-chat version: 0.4.3
• Platform(s) (iOS, Android, or both?): Both

[anceque]

@ewal and what to do when you have it inside of SafeAreaView? it created some nasty bottom spacing when the keyboard is open 😦

OK, i found out you can use bottomOffset and offset the chat by the height of bottom safeArea… nice 😃

[diamont1001]

@msqar

Solved it by setting bottomOffset and react-native-iphone-x-helper.getBottomSpace

like this:

import {getBottomSpace} from 'react-native-iphone-x-helper';

<View style={paddingBottom: getBottomSpace()}>
...
  <GiftedChat
    messages={this.state.messages}
    bottomOffset={getBottomSpace()}
    onSend={messages => this.onSend(messages)}
    user={{
      _id: 1,
    }}
  />
</View>