React-native-gifted-chat: Chat input hidden behind keyboard when using react-navigation and createBottomTabNavigator

[ajrn-riguy]

Issue Description

With the gifted-chat inside of a createBottomTabNavigator from react-navigation, the message container height doesn't change when the keyboard comes on screen so the input is hidden behind the keyboard. Once you start typing, the layout fixes itself. If you swap the "createBottomTabNavigator" for "createStackNavigator", the problem doesn't occur. The latest versions of all packages and the code from the gifted-chat expo-example are being used. Looked through the existing issues and couldn't find one that matches this.

Steps to Reproduce / Code Snippets

Run the example code from the readme on an iOS simulator or actual device but put the chat in a tab within a createBottomTabNavigator from react-navigation.

Expected Results

Input should show up at the bottom of the view and above the keyboard (same as it does when NOT in a tab navigator).

Additional Information

• Nodejs version: v11.10.0
• React version: 16.8.3
• React Native version: 0.59.8 (Expo SDK33)
• react-native-gifted-chat version: 0.9.6
• Platform(s) (iOS, Android, or both?): iOS (simulator & physical device)
• TypeScript version: n/a

[deepankarsandy]

I think internally it's using <KeyboardAvoidingView/> but for some reason it's not working with <createBottomTabNavigator/>.
Try below fix

<KeyboardAvoidingView
behavior={Platform.OS === "ios" ? "padding" : ""}
keyboardVerticalOffset={90} //this value is depends upon your view/component height
>
..your component
</KeyboardAvoidingView>

this should be root of your chat screen

[ajrn-riguy]

Adding that around it caused it to not show at all. So I added a style prop with flex: 1 to the <KeyboardAvoidingView/> and that made things look right after tapping into the input, but then cause the input to become most of the view and block most of the messages once I started typing. Any thoughts?

[alexpchin]

I have found that this is still a problem if you use a custom tabBarComponent on createBottomTabNavigator's options but not if you don't?

[alexpchin]

After a long time debugging, I have found that to get this to work with react-navigation you must ensure that the option on a custom tabBarComponent of keyboardHidesTabBar is set to false. If not, the animations conflict and the input is hidden behind the keyboard.

I hope this helps someone else!

[Lightsalot]

After a long time debugging, I have found that to get this to work with react-navigation you must ensure that the option on a custom tabBarComponent of keyboardHidesTabBar is set to false. If not, the animations conflict and the input is hidden behind the keyboard.

I hope this helps someone else!

from https://reactnavigation.org/docs/en/bottom-tab-navigator.html it seems that keyboardHidesTabBar is already default to false right? I have added keyboardHidesTabBar to tabBarOptions but i'm still having the same issue as you :(

i'm using createMaterialBottomTabNavigator
https://reactnavigation.org/docs/en/material-bottom-tab-navigator.html

[alexpchin]

@Lightsalot are you using a custom Tabbar? I was and it meant that I had to manually make it false

[Lightsalot]

no I'm not, im using i'm using createMaterialBottomTabNavigator, there's no custom tab bar there, and there's no props for keyboardHidesTabBar.

So annoying its only happening on iOS! :(

Anyway my work around is to put the chat in a stack navigator instead of it being part of the bottomTabNavigator

[kesha-antonov]

Exactly same issue here like @Lightsalot !

[kesha-antonov]

Fix for createMaterialBottomTabNavigator:

<GiftedChat
                bottomOffset={54}

let BottomNavigation = createMaterialBottomTabNavigator(
    {
        Chat: { getScreen: () => require('./app/Chat').default },
        Settings: { getScreen: () => require('./app/Settings').default },
    },
    {
        keyboardHidesNavigationBar: false,
        initialRouteName: 'Chat',

No need to use KeyboardAvoidingView

[ajrn-riguy]

Hey @kesha-antonov , can you confirm that this stays true when you actually build the app on Android? If so, what versions of everything are you using (RN, GiftChat, Expo)?
Everything I try looks good in Expo, but once I build out the apk file and load it onto an Android simulator or phone, the keyboard still covers the input. I've spent way too much time trying to fix this...

[smxdevst]

This fixes it for me

tabBarOptions: {
    keyboardHidesTabBar: false,
}

[michaelAdewunmi]

Hey @kesha-antonov , can you confirm that this stays true when you actually build the app on Android? If so, what versions of everything are you using (RN, GiftChat, Expo)?
Everything I try looks good in Expo, but once I build out the apk file and load it onto an Android simulator or phone, the keyboard still covers the input. I've spent way too much time trying to fix this...

Hello! I am having the same problem. Everything works fine in EXPO but once I built the APK, the keyboard stays above the input. Please did you end up getting a fix for this? I willl be so glad to know how you fixed it. Thanks

[stale[bot]]

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.