iOS - Fix unwanted bottom inset when keyboard is open#448
Conversation
etoledom
left a comment
There was a problem hiding this comment.
At first I wasn't sure about installing a new library (react-native-safe-area) for such a small detail, specially having the SafeArea component from Facebook.
After investigating, testing and understanding the issue and the solution, I'm quite convinced that the use of this new SafeArea library is not just necessary to fix this issue, but also will be super useful in the future. Specially thanks to this method:
SafeArea.getSafeAreaInsetsForRootView()
So sad that the "original" SafeArea component doesn't expose the paddings added to the view, or any way to get in JS the SafeArea insets.
This new react-native-safe-area will allow us to avoid embedding all our content in the SafeArea view and implement the the design with the toolbar borders going until the end of the screen (and probably will help us with other details later on too).
It's working great in both the example project and the WPiOS app ✅
Amazing job @pinarol !
|
@etoledom agreed, I wasn't also %100 sure at the beginning but |
Fixes #395
Child PR needs to be merged first. After that I'll tag that commit and update the dependency to point to the tag.
Parent PR is needed for testing with WPiOS.
Implementation details
The basic problem is solved with the first commit 09cb2f0 which updates the dependency to refer to our fork of the
react-native-keyboard-aware-scroll-viewlibrary.But still a small amount of extra padding was left on iPhone X variant devices, that was resulted from the safe area inset. So the rest of the commits solves only that small amount of extra padding. If you checkout 09cb2f0 and test on iPhone X you can view that extra padding.
To Test
yarn installDo below steps with iPhone 8, iPhone X(or variant), iPad
WPiOS
rake dependenciesAndroid
Open example app with Android
Verify it doesn't crash <- this is actually enough
Verify tapping to input text fields makes keyboard open properly by keeping text viewable.