Extra Space showing on top of keyboard

[sushantsaho]

While using SafeAreaView in iPhoneX, There is a extra space on top of keyboard

Environment

OS: macOS High Sierra 10.13.1
Node: 9.4.0
Yarn: 1.3.2
npm: 4.6.1
Watchman: 4.9.0
Xcode: Xcode 9.2 Build version 9C40b

Packages: (wanted => installed)
react: 16.0.0 => 16.0.0
react-native: 0.51.0 => 0.51.0

Expected Behavior

Extra space should not not be there on Top of keyboard.

Actual Behavior

Keyboard has extra space

Steps to Reproduce

(Link to Snack, or steps to reproduce.)

[b4stien]

I can confirm I have the same issue with Expo 26 (that's react native 0.54).

[catherinepricillas]

hi, do you find any solution to this problem? I'm currently dealing with same issue @b4stien @sushantsaho

[razor1895]

I found a tricky solution. Im using react-navigation's implementation of SaveAreaView and it has the same issue, but fortunately it has a forceInset prop to decide whether to show top/bottom/horizontal safe area. So the solution could be very simple, and i'll just post part of my code here.

import { Keyboard } from 'react-native';
import { SafeAreaView } from 'react-navigation';
 ...
keyboardWillShow = e => {
  this.setState({ disableBottomSafeArea: true });
};

keyboardWillHide = () => {
  this.setState({  disableBottomSafeArea: false });
};

<SafeAreaView forceInset={{ bottom: this.state.disableBottomSafeArea ? 'never' : 'always' }} style={{ flex: 1, backgroundColor: '#fff' }}>
  ...
</SafeAreaView>

[react-native-bot]

I am closing this issue because it does not appear to have been verified on the latest release, and there has been no followup in a while.

If you found this thread after encountering the same issue in the latest release, please feel free to create a new issue with up-to-date information by clicking here.