question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Views are moved by the Keyboard opening even when not wrapped in a KeyboardAvoidingView

See original GitHub issue

🐛 Bug Report

Creating a new SDK37 project, or upgrading an existing one, causes all views to be pushed up when the Android Keyboard appears on the screen, regardless of the presence of a KeyboardAvoidingView.

SDK36 with Client v2.14.0 SDK37 with Client v2.15.0
SDK36 SDK37

Environment

Expo CLI 3.17.5 environment info:
    System:
      OS: Linux 4.4 Ubuntu 18.04.1 LTS (Bionic Beaver)
      Shell: 5.4.2 - /usr/bin/zsh
    Binaries:
      Node: 12.9.1 - ~/.nvm/versions/node/v12.9.1/bin/node
      Yarn: 1.22.4 - ~/.yarn/bin/yarn
      npm: 6.14.4 - ~/.nvm/versions/node/v12.9.1/bin/npm
    npmPackages:
      expo: ^37.0.0 => 37.0.3
      react: 16.9.0 => 16.9.0
      react-native: https://github.com/expo/react-native/archive/sdk-37.0.0.tar.gz => 0.61.4
      react-navigation: ^4.2.2 => 4.2.2

Targeting Android via Standalone and Client. Reproduced on a Samsung Galaxy S10+, with the latest version of the Expo Client installed (v2.15.0).

Steps to Reproduce

  1. Create project in SDK37
  2. Create a view with at least 1 text input, and a child view that has the style properties { flex: 1, justifyContent: "flex-end" }
  3. Run the project via Expo Android App.
  4. Tap on the text input to open the keyboard

Expected Behavior

Views should only be moved by the Keyboard when they are specifically wrapped in a KeyboardAvoidingView or similar component.

Actual Behavior

Views are moved by the keyboard regardless of the presence of a KeyboardAvoidingView

Reproducible Demo

Here is a snack that reproduces the effect. However, the effect does not seem to manifest itself using the in-built Android simulator.
https://snack.expo.io/QOSLGAihc

To reproduce the effect, scan the QR code via a real Android Device. To reproduce the pre-SDK37 behaviour, change the Snack to run on SDK36 or below AND downgrade the Expo Client to v2.14.0 via this link or by copying the url from the “Download APK” link here, and modifying the version number in the URL.

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:24
  • Comments:36 (8 by maintainers)

github_iconTop GitHub Comments

50reactions
Ksedlinecommented, May 17, 2020

I found the solution that fix the problem on Android with StatusBar. Maybe it will be useful for someone. Just add to the root View of a Screen this style code: { minHeight: Math.round(Dimensions.get('window').height) } Then keyboard will not resize the view.

(Tested in Android Google Pixel Emulator, and Xiaomi Mi9T with GBoard)

11reactions
adlmecommented, Apr 19, 2020

This sucks guys! We should be able to switch from adjustResize to adjustPan. Please give us a fix!

Read more comments on GitHub >

github_iconTop Results From Across the Web

keyboard pushing view up on react native expo - Stack Overflow
Then the keyboard will not resize the view. ... Try to wrap everything inside your KeyboardAvoidingView inside a ScrollView
Read more >
Avoid Keyboard in React Native Like a Pro - Netguru
In KeyboardAvoidingView screen, after opening the bottom sheet and focusing input, content is not changing its position, which makes it covered ...
Read more >
Using KeyboardAwareScrollView and KeyboardAvoidingView ...
As you can see, when the keyboard opened, the input field became hidden behind the keyboard. This is a problem, and this is...
Read more >
Prevent the On-screen Keyboard from Covering up Text Inputs
[00:15] Then wrap the entire screen with a KeyboardAvoidingView component. The KeyboardAvoidingView will automatically move components around on ...
Read more >
react native keyboard avoiding view not working - You.com
So I wrapped it in a KeyboardAvoidingView.But regardless of the behavior that I set for this view, the TextInput won't move above the...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found