A gap between text input and keyboard on iOS

[dmitryusikriseapps]

Issue Description

There is a gap between input text and keyboard on iOS. I tried to fix it with bottomOffset, but it didn't help.

Steps to Reproduce / Code Snippets

https://pastebin.com/pAJz5W2C
https://pastebin.com/RGCWP2JL
https://ibb.co/09NTN9Q

Expected Results

There shouldn't be nay gaps.

Additional Information

• Nodejs version: "8.12.0"
• React version: "16.8.3"
• React Native version: "0.59.9"
• react-native-gifted-chat version: "0.9.11"
• Platform(s) (iOS, Android, or both?): iOS
• TypeScript version: just pure JS

[nadav2051]

Also experiencing this:

It looks to be happening when the keyboard changes it's side - when the auto correct component vanishes, the keyboard does not re-adjust which causes the GiftedChat component not to cover the entire screen leaving this gap

Edit: It seems to happen on iPhone XR and X, on iPhone 6, 8 it works perfectly, I suspect it might have something to do with the SafeAreaView

[MaggieRezo]

I am having this same issue and am using SafeAreaView. Tested on my Xs max.

[aniciom]

I had a similar issue at #1294 i marked it as closed, but now with the new updates it happens again, even using that patch, any idea @xcarpentier ?

[Ariavm95]

It seems if you add "renderInputToolbar" prop, and only return <InputToolbar /> component as the value of the prop, it will work fine.

[dmitryusikriseapps]

@Ariavm95 Hi, thank you for the advice, but it doesn't help

[hatemalimam]

any workaround here ? something is really wrong with the layout

[dmitryusikriseapps]

@hatemalimam https://pastebin.com/B8r0dHK2

[hatemalimam]

yes putting autoCorrect: false fixed the problem temporarily, but it's an annoying compromise though, sometimes also on some refresh, it gets broken again, not sure what's the behaviour here

[tconlin]

bottomOffset={50} works so far for me. #1202

[keith-kurak]

I found this happens even on the latest version (0.11.2). It seems most likely to happen if I navigate to my chat screen, lock the phone, and then unlock it. It went away when I commented out the iPhone X logic to get around the home bar found at

react-native-gifted-chat/src/GiftedChat.tsx

Line 563 in e4576d4

safeAreaIphoneX = (bottomOffset: number) => {

. In my case, I already have iPhone X home bar avoidance logic in my parent views, so I think it was getting accounted for twice.

I'm of the opinion that home bar/ notch avoidance is so contextual that I prefer component libraries to not handle it and leave it to the implementing developer. In my case, I have a tab bar showing at the bottom sometimes that already needs to avoid the home bar. I understand that having it in there may be more friendly for some, though, and may be more in line with the goals of the library. @xcarpentier I'd be happy to put in a pull request to fix, but want to do it in a way that's consistent with your outlook on this. I could see removing the iPhone X logic entirely, or leaving it on by default but providing a flag for users to turn it off.

[Miyou]

Just wanted to share that this is what worked for me: bottomOffset={isIphoneX() ? 125 : 55}
Where isIphoneX() is:

import { Dimensions, Platform } from 'react-native';
function isIphoneX() {
  const dimen = Dimensions.get("window");
  return (
    Platform.OS === "ios" &&
    !Platform.isPad &&
    !Platform.isTVOS &&
    (dimen.height === 812 ||
      dimen.width === 812 ||
      (dimen.height === 896 || dimen.width === 896))
  );
}

from npm package react-native-iphone-x-helper.

No clue why those numbers are the ones that work. The size of the gap seems linear with the distance from those numbers for me.

Edit: I'm also using SafeAreaView as the top level component of my app.

[ZaidAbo]

In my case the problem was the bottom tab navigator ,,, when i removed it ,, everything worked perfectly

[PaitoAnderson]

@ZaidAbo same here, I used the tabBarVisible: false, option in react-navigation-tabs for the tab that has react-native-gifted-chat.

[skylus]

The same thing @nadav2051 describes still happens to me in 0.13.0 - ios. removed the tab bar. did anyone find a workaround ?

Also experiencing this:

It looks to be happening when the keyboard changes it's side - when the auto correct component vanishes, the keyboard does not re-adjust which causes the GiftedChat component not to cover the entire screen leaving this gap

Edit: It seems to happen on iPhone XR and X, on iPhone 6, 8 it works perfectly, I suspect it might have something to do with the SafeAreaView

[abdielou]

I don't quite understand these lines of code and they might be the culprit for some people.

    if (isIphoneX()) {
      return bottomOffset === this._bottomOffset ? 33 : bottomOffset
    }

https://github.com/FaridSafi/react-native-gifted-chat/blob/master/src/GiftedChat.tsx#L589

Why is it being set to 33? The first render will leave my custom bottomOffset intact (83 in my case). Further renders will reset it to 33. This seems to cause the gap on iPhone X.

Also, I don't see any possible workaround as this is internally handled. Removing these lines fixes the issue for me.

Also, I'm not sending a PR for this as I'm still uncertain why this was added. thoughts?

@JesuHrz

[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.

[abdielou]

@JesuHrz

Can you help explain the purpose of this change?

https://github.com/FaridSafi/react-native-gifted-chat/blob/master/src/GiftedChat.tsx#L589

[NMVikings]

You can hide your keyboard each time your app is going to background by using this code:

AppState.addEventListener('change', nextAppState => {
  if (nextAppState === 'background') {
    Keyboard.dismiss()
  }
})

But this is temporary hack! I think that GiftedChat should not ignore bottomOffset that developer passes to it. Or it should have to bottomOffsets: bottomOffset and bottomOffsetX, and if developer passes only bottomOffset, than summarise bottomOffset and 33, if there is bottomOffsetX to use only it.

[robert-narrate]

I am also having the same issue as @abdielou. the bottomOffset toggles between what I have set and 33

[alexpchin]

I currently have this to add to bottomOffset:

export const CHAT_BOTTOM_OFFSET = () => {
  // When the keyboard opens, there seems to be a gap at the bottom of the input on iOS
  // We hide the bottomTabBar when the keyboard opens, the gap is the same height
  //
  // C.getStatusBarHeight(C.isIphoneX() -> iPhoneX 44 / iPhone8 20
  //
  // When coming back into the app when focused on the input on iPhoneX only there is a problem
  if (Platform.OS === 'ios') {
    if (isIphoneX()) {
      return getStatusBarHeight(isIphoneX()) + MIN_COMPOSER_HEIGHT; // iPhoneX = (44+33)=77
    } else {
      return HEADER_BAR_HEIGHT; // 44
    }
  }
  if (Platform.OS === 'android') return 0;
  return 0;
};

as well as:

// https://github.com/FaridSafi/react-native-gifted-chat/issues/1306#issuecomment-591956022
  const dismissKeyboardOnBackground = nextAppState => {
    if (nextAppState.match(/inactive|background/)) {
      // Close keyboard when the app goes into the background to fix an issue on iPhoneX where the bottomOffset is not being applied and whitespace added to the bottom.
      Keyboard.dismiss();
    }
  };

  useEffect(() => {
    AppState.addEventListener('change', dismissKeyboardOnBackground);
    return () => {
      AppState.removeEventListener('change', dismissKeyboardOnBackground);
    };
  }, []);

It seems to have resolved the problem but it's hurting my soul.

[JesuHrz]

Hey guys.
I added the value of 33 because the default value of SafeAreaView is 34 and I subtracted 1 to make it fit better as you can see in the following pictures:

I did this in order to support devices with Notch.

I see some of you are adding the GiftedChat component as a BottomTabNavigator component and in which you are not contemplating the height of the BottomTabNavigator, which by default in react-navigation is 50

DEFAULT_TABBAR_HEIGHT = 50

Then not to contemplate it, you must add

bottomOffset = DEFAULT_TABBAR_HEIGHT + Height of SafeAreaView

The height of SafeAreaView can be taken out in this way if

import { getInset } from 'react-native-safe-area-view'

getInset('bottom')

and this library is already installed with react-navigation so you can access it without having to reinstall it

if not, you can do this:

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

getBottomSpace()

@abdielou

[yasircodingcrafts]

react-native-safe-area-view

thanks but getInset is gone from the 'react-native-safe-area-view' and this library was not installed with react-navigation 5
Alternatively I found we can use 'react-native-safe-area-context' which is installed with react-navigation 5

import {useSafeArea} from 'react-native-safe-area-context';
const insets = useSafeArea();
const SAFEAREA_HEIGHT = insets.bottom;

[Thrillhop]

This worked for me. I set a const for footerHeight that I pass to my navigation logic, and then use it as apart of the input offset:

bottomOffset={
    isIphoneX() ?
    getBottomSpace() + Variables.footerHeight :
    Variables.footerHeight
}

[yasircodingcrafts]

react-native-safe-area-view

thanks but getInset is gone from the 'react-native-safe-area-view' and this library was not installed with react-navigation 5
Alternatively I found we can use 'react-native-safe-area-context' which is installed with react-navigation 5

import {useSafeArea} from 'react-native-safe-area-context';
const insets = useSafeArea();
const SAFEAREA_HEIGHT = insets.bottom;

The bug still appears randomly.
So I than tried

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

getBottomSpace()

And in your giftedchat set bottomOffset like this

bottomOffset={getBottomSpace() + DEFAULT_TABBAR_HEIGHT}

And for react-navigation 5 after searching alot I used DEFAULT_TABBAR_HEIGHT = 49 instead of 50 now so far it's not appeared again.
🥂

[hirbod]

Try the new version. I supplied a fix for that which should cover the issue.

[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.

[abdielou]

Try the new version. I supplied a fix for that which should cover the issue.

@hirbod Can you reference this issue in your fix?

[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.

[nickblumenthal]

In case others find this with a similar issue, the commit @abdielou was asking about is here:
dcf8f0a

Unfortunately, I'm still having an occasional issue where multiple keyboardWillShow events are detected by GiftedChat even if the keyboard is already open. This can happen if the user starts typing and then hits the input bar again. This sets the internal ._bottomOffset that is used to help calculate screen size each time an event is detected. Unfortunately, if you don't set the bottomOffset prop this can lead to a state where the internal ._bottomOffset is correctly set initially only to be set to zero by the second event.

[nickblumenthal]

I'm solving this by setting bottomOffset: getBottomSpace() in the GiftedChat props. This should manually override for notched IphoneX phones and let chat control it the rest of the time.

[tmhao2005]

For someone who uses react-native-safe-area-context from the version ^3.x, the solution is to use hook like this:

import { useSafeAreaInsets } from "react-native-safe-area-context";

function App() {
  const insets = useSafeAreaInsets();
  
  return (
    <GiftedChat
       // ...
       bottomOffset={insets.bottom}
    />
  )
}

[sumanbhattarai]

If you have a bottom tab navigator, then this might be a useful solution.

import { useBottomTabBarHeight } from "@react-navigation/bottom-tabs";

const App = () => {
    const DEFAULT_TABBAR_HEIGHT = useBottomTabBarHeight();

    return (
       <GiftedChat
           // other props
           bottomOffset={DEFAULT_TABBAR_HEIGHT}
       />
    )
}

[irodeanu]

import { useSafeAreaInsets } from 'react-native-safe-area-context';
const insets = useSafeAreaInsets()

and

<GiftedChat wrapInSafeArea={false} bottomOffset={insets.bottom} ... />

[2DTW]

@irodeanu Thank you. This is the answer that works best for me. Also eliminated a random empty gap at the top of the gifted chat component and my header.

[jettb2]

I added the following code into GiftedChat and it fixed it for me
bottomOffset={33}