Gap between Keyboard & text input component when using createBottomTabNavigator

[abhishrek]

Issue Description

I used createBottomTabNavigator from react-navigation to create a bottom tab bar.
One of the tabs is messages tab, where I added the example chat code (given in readme)
When running this ios simulator, as soon as the keyboard shows up, there is a big gap between the keyboard and the text input component.

When no keyboard, its fine :

When click inside the text input box, and keyboard shows up :

Steps to Reproduce / Code Snippets

Run the example code given in readme in a tab within createBottomTabNavigator from react-navigation, on ios simulator.

Expected Results

No gap between keyboard and text input box

Additional Information

• Nodejs version: 10.6.2
• React version: 16.5.2
• React Native version: 0.56.0
• react-native-gifted-chat version: 0.7.3
• Platform(s) (iOS, Android, or both?): ios
• react-navigation: 2.12.1

props

render() {
    return (
      <GiftedChat
        messages={this.state.messages}
        onSend={messages => this.onSend(messages)}
        alwaysShowSend={true}
        user={{
          _id: 1
        }}
      />
    );
  }

[prozwang]

+1

[untilla]

If you look to source code, you will see what only two constants are used to set up tab bar height:
const DEFAULT_HEIGHT = 49;
const COMPACT_HEIGHT = 29;

And if you put this value to bottomOffset parameter of GiftedChat - problem will be solved.

[stale]

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.

[ethanyuwang]

@untilla its working for ios but not for android. there's still a gap when keyboard is up. how should i fix this?

[sohailmadan]

I am facing the same issue do we have any solution for it yet