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.

KeyboardAvoidingView stop working if the keyboard type changes (iOS)

See original GitHub issue

I’m implementing the KeyboardAvoidingView inside of a modal that takes in user input as a string and also a currency value. This requires different keyboard types. It seems that when switching between the normal keyboard and the numeric keyboard, the view (and I’m using height to make sure the view is centered) stops adjusting the container based on the keyboard.

info 
  React Native Environment Info:
    System:
      OS: macOS 10.15
      CPU: (8) x64 Intel(R) Core(TM) i7-7920HQ CPU @ 3.10GHz
      Memory: 734.70 MB / 16.00 GB
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 12.5.0 - /usr/local/bin/node
      Yarn: 1.16.0 - /usr/local/bin/yarn
      npm: 6.9.0 - /usr/local/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.2, macOS 10.14, tvOS 12.2, watchOS 5.2
    IDEs:
      Xcode: 10.2.1/10E1001 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.8.3 => 16.8.3 
      react-native: https://github.com/expo/react-native/archive/sdk-34.0.0.tar.gz => 0.59.8 
    npmGlobalPackages:
      react-native-cli: 2.0.1
      react-native-git-upgrade: 0.2.7

KAV-broken mov

https://snack.expo.io/SyqoJRYrB

The strange thing is: it works sometimes when on my actual device because I use Gboard but the numberpad comes from the apple keyboard. So it has to switch entirely. But the whole thing flashes and glitches out (not a very elegant animation)

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:15
  • Comments:13

github_iconTop GitHub Comments

9reactions
samiactocommented, Nov 22, 2019

I’m experiencing this too in RN 0.61.2 when switching between default keyboard and emoji keyboard on iOS

3reactions
KA-32commented, Sep 25, 2019

Confirm the same in RN 0.60.5

Read more comments on GitHub >

github_iconTop Results From Across the Web

KeyboardAvoidingView not Working Properly - Stack Overflow
This appears to be only a partial solution, although it works initially, if the android phone is locked on the screen with the...
Read more >
KeyboardAvoidingView not working properly? Check your ...
KeyboardAvoidingView not working properly? Check your Flexbox Layout first. Keyboard overlaying Input or Submit button is a common problem in ...
Read more >
KeyboardAvoidingView - React Native
KeyboardAvoidingView. This component will automatically adjust its height, position, or bottom padding based on the keyboard height to ...
Read more >
Using KeyboardAwareScrollView and KeyboardAvoidingView ...
This tutorial explains what KeyboardAvoidingView and KeyboardAwareScrollView are and how to use them for different purposes.
Read more >
Prevent the On-screen Keyboard from Covering up Text Inputs
When you bring up the on screen keyboard in a mobile app, it will cover any text input or buttons on the bottom...
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