szydlovsky
commented
6 days ago Hey @LuisTejedaDev, useAnimatedKeyboard hook doesn't really care whether there is a SafeAreaView or not. It has just one task - to return the height that keyboard takes up. And it does it well. See, when I looked at your example, the view before clicking the TextInput looks like this:
You can clearly see, that the accessory bar isn't perfectly in the bottom of the screen but rather moved up by SafeAreaView. You can fix it in one of such ways:
- Have the accessory bar at the very bottom of the screen (e.g. by removing safeAreaView)
- Somehow find out what is the margin that SafeAreaView adds at the bottom and substract its height from the animatedStyle translateY.
- Have the bar use absolute position and be not dependent on SafeAreaView (so far example make it at the same view hierarchy level as the mentioned SafeAreaView). Then you will know exactly how far it is from the bottom.
There is not much more I can help you with, unfortunately. The hook does everything it is supposed to do.
Description
When a device like the iPhone 15 Pro opens its keyboard and I make use of useAnimatedKeyboard to move my elements so that the keyboard does not cover them as for example a TextInput, this one presents a failure in the design since the space that occupies the inferior SafeAreaView is not considered by the useAnimatedKeyboard, reason why a completely empty space is left between my element and the keyboard.
On Android and devices that do not have this "SafeAreaView" feature there is no problem, but on new devices specifically on iOS they present it.
Steps to reproduce
just open keyboard
Snack or a link to a repository
https://github.com/LuisTejedaDev/useAnimatedKeyboard-bug
Reanimated version
^3.10.0
React Native version
0.74.1
Platforms
iOS
JavaScript runtime
None
Workflow
None
Architecture
None
Build type
None
Device
None
Device model
iPhone 15 Pro
Acknowledgements
Yes