React-native-gifted-chat: Keyboard height on iOS

[TimBroddin]

First: congrats on the release of the new component! Looks like a huge improvement over gifted-messenger!

I'm having trouble with the keyboard leaving a gap (same height as my navbar it seems):

Any idea on how to fix this? (The navigation I'm using is react-native-navigation)

Thanks

[FaridSafi]

Hello @TimBroddin,
Does your GiftedChat container has a paddingBottom ? If yes try to switch to a marginBottom

[TimBroddin]

Hi @FaridSafi,

You are quick. No it doesn't, but it's wrapped inside a Navigator that's wrapped inside a TabView.

Thanks!

[FaridSafi]

What if you wrap GiftedChat inside a <View style={{flex: 1}} /> ?
I tried to set up the react-native-navigation example but it's in RN 0.25.1

I will need a code sample to help you more

[ssmlee04]

same here. Mine is RN 0.28.0. Keyboard size is about the same as the one above.

[FaridSafi]

@ssmlee04 do you use react-native-navigation?

Can you share part of your code guys please? An example that I can run

[ssmlee04]

I used <TabBarIOS> and a <AdMobBanner>. And it seems the extra height equals to the sum of the two's height. I'll see if I can come up with something minimum.

[FaridSafi]

@ssmlee04 Did you try to wrap GiftedChat inside a <View style={{flex: 1}} /> ?

[TimBroddin]

@FaridSafi I'll try to make an example repo tonight

[FaridSafi]

@TimBroddin I can reproduce the issue, I will fix it

[TimBroddin]

Sorry it took so long @FaridSafi, I made an example repository: https://github.com/TimBroddin/gifted-chat-keyboard-bug

Thanks for all the hard work!

[FaridSafi]

I added bottomOffset prop in 0.0.6
You need to set the distance from the bottom of the screen

<GiftedChat bottomOffset={56} />

[TimBroddin]

Works, thanks a lot @FaridSafi!

[ckuijjer]

Hi @FaridSafi , thanks for the component and for adding the bottomOffset property.

We were having the same issue as @TimBroddin and tried the fix using the bottomOffset property. As expected the bottomOffset is applied when opening the keyboard, and isn't applied when closing the keyboard. In my case it unfortunately is applied on the initial render with the keyboard closed, as the _onType_ method gets called. This leads to the text input being pushed below the tabbar.

See https://github.com/FaridSafi/react-native-gifted-chat/pull/187 for my pull request

Unfortunately I couldn't get the example repo at https://github.com/TimBroddin/gifted-chat-keyboard-bug to work, to validate that the same issue holds there.

[ssmlee04]

Thanks @FaridSafi. bottomOffset can work. was carried away doing something.

[prabhaav]

Hi @FaridSafi, the bottomOffset property doesn't help when the textbox is hidden initially.

I'm using RN 0.32.1, navigator experimental and TabBarIOS. The chat input box is being hidden by the tab bar.

My render method:

render() {
    return (
      <View style={{flex: 1}}>
        <GiftedChat
          messages={this.state.messages}
          onSend={this.onSend}
          loadEarlier={this.state.loadEarlier}
          user={{
            _id: this.state.id,
            name: this.props.result.first_name,
            avatar: this.props.result.picture,
          }}
          renderBubble={this.renderBubble}
          renderFooter={this.renderFooter}
          bottomOffset={56} 
        />
      </View>
    )
  }

The output I see on my iPhone 6s+ simulator:

[prabhaav]

submitted a new issue: #232