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.

Android: screen not resizing when shifting focus to next empty TextInput

See original GitHub issue

Is this a bug report?

YES

Have you read the Contributing Guidelines?

YES

Environment

Environment: OS: macOS High Sierra 10.13.2 Node: 8.9.1 Yarn: 1.3.2 npm: 5.5.1 Watchman: 4.9.0 Xcode: Xcode 9.2 Build version 9C40b Android Studio: 3.0 AI-171.4443003

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

Target Platform: Android

Steps to Reproduce

  1. Create a blank react-native app and add a scrollview with 7-8 TextInput inside it. (just making sure some of the input will be under keyboard when it shows up)
  2. For the bottom inputs, add blurOnSubmit={false} and onSubmitEditing to focus to the next input when submitting. Example: (Notice the last input value is empty.)
<TextInput
  ref={(r) => { this.pqr = r; }}
  blurOnSubmit={false}
  onSubmitEditing={() => { this.stu.focus(); }}
  value='pqr'
  onChangeText={() => null}
  returnKeyType='next'
/>
<TextInput
  ref={(r) => { this.stu = r; }}
  blurOnSubmit={false}
  onSubmitEditing={() => { this.vwx.focus(); }}
  value='stu'
  onChangeText={() => null}
  returnKeyType='next'
/>
<TextInput
  ref={(r) => { this.vwx = r; }}
  value=''
  onChangeText={() => null}
  returnKeyType='go'
/>
  1. Now focus the input which has a value pqr and press ‘Next’ from keyboard. Screen will push up the next input which has a value set to stu. Now press ‘Next’ again, in this case screen doesn’t push up the next input because it’s value is empty.

Expected Behavior

Next input should be pushed up by screen

Actual Behavior

Next input (ref vwx) is not getting pushed up above the keyboard cause it’s initial value is empty.

Demo

input_bug

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:4
  • Comments:12 (2 by maintainers)

github_iconTop GitHub Comments

5reactions
ozberkctncommented, Jan 25, 2019

I found the solution can you take a look @hramos Pull request

4reactions
fghiggicommented, Oct 1, 2018

Still happening on RN 0.57.1. ScrollView don’t focus on empty input, more examples:

focus

Expo example

Read more comments on GitHub >

github_iconTop Results From Across the Web

Adjust layout when soft keyboard is on - android
The activity's main window is always resized to make room for the soft keyboard on screen. "adjustPan" The activity's main window is not...
Read more >
Handle input method visibility | Android Developers
When input focus moves in or out of an editable text field, Android shows or hides the input method—such as the on-screen keyboard—as ......
Read more >
Text Input — Kivy 2.1.0 documentation
When changing a TextInput property that requires re-drawing, e.g. modifying the text , the updates occur on the next clock cycle and not...
Read more >
Accommodating The On Screen Keyboard in Xamarin Forms
If you want the screen to resize you need to implement two pieces of code. First, in the MainActivity set the SoftInputMode to...
Read more >
How to make your React Native app respond gracefully when ...
You can take the base code, which has the keyboard covering the inputs, and update that so that the inputs are no longer...
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