KeyboardAvoidingView stop working if the keyboard type changes (iOS) #26293
Description
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
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)
Reacted by Jandrell Ian Formoso, Clem Freeman, Lucas Carvalho, Eran Pinhas, Marian Beuther, samiacto, Mikkel Løkke, Louis Chavane, naixy28, Patrick Lussan and 5 more
Activity
KA-32 commentedon Sep 25, 2019
Confirm the same in RN 0.60.5
samiacto commentedon Nov 22, 2019
I'm experiencing this too in RN 0.61.2 when switching between default keyboard and emoji keyboard on iOS
ArthurBugan commentedon Jan 6, 2020
Any fix to this problem?, I got this problem on android 10 and expo sdk 35
ramisalem commentedon Jan 22, 2020
Any fix to this problem?
bockc commentedon Mar 25, 2020
Still happening in RN 0.61.5, when switching from default keyboard to emoji keyboard. I really would like a fix for this, it's been more than 6 months this has been reported :(
iKrushYou commentedon Mar 28, 2020
This is not a solution to the actual bug here...however I have had success in using Native Base's
ContentcomponentUnfortunately, you need to add an entire UI library, but it does handle the keyboard switching issue (and actually adds a lot more functionality like dismissing the keyboard if you scroll down)
ArthurBugan commentedon Mar 30, 2020
@iKrushYou Did you just replace ScrollView with Container and Content, or did something special? I'm going to try later, thanks for the tip!
iKrushYou commentedon Mar 31, 2020
@ArthurBugan so all I've been doing is solely replacing any instances of
ScrollViewwithContentActually, for that matter, I've been replacing all usages of
SafeAreaViewwithContentas well because it just works better.But, again,
native-baseis a pretty big library to add to your project if you're not already using it but theContentcomponent just works so well in my experience.ArthurBugan commentedon Apr 2, 2020
It worked, thanks! @iKrushYou
stale commentedon Jul 3, 2020
Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.
stale commentedon Jul 11, 2020
Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.
lordofflakes commentedon Aug 7, 2020
I was able to fix this issue using react-native-keyboard-aware-scrollview module instead of using the whole NativeBase library.
ebaynaud commentedon Dec 8, 2020
Seems to be better with
behaviourset topaddinginstead ofheight