Platforms capabilities and limitations
This library relies on WindowInsetsCompat
API on Android
and keyboard listeners (NotificationCenter
) on iOS.
Since two platforms are totally different (see below for more details) the purpose of this API is to provide a common API for both platforms, which will work in the same way on both platforms, but at the same time give an access to all power of the platform features.
Android
To track each keyboard frame in Android you need to perform 3 steps:
- enter edge-to-edge mode (
KeyboardControllerView
already does it for you, andKeyboardProvider
usesKeyboardControllerView
, so once you've wrapped your app inKeyboardProvider
- you've completed this step 🎉). - change
android:windowSoftInputMode
toadjustResize
(this library exposes KeyboardController and you can change it in runtime - default hooks changes soft input mode on mount and restore default behavior on unmount, but you can control it as you wish (change mode on focus/unfocus screen etc.)) - this is needed to deliver the best backward compatibility and prevent automatic window resizing (adjustResize
+edge-to-edge
makes window not automatically resizable anymore); - setup
WindowInsetsAnimationCallback
and track keyboard frames.KeyboardControllerView
maps events from this callback and forward them inonKeyboardMove
callback on JS side (KeyboardProvider
handles it and maps these events toAnimated
values + stores it incontext
).
iOS
iOS doesn't give an API to track each keyboard frame. But it gives an information when keyboard will appear and when it appeared (i.e. the start and the end of the keyboard movement) and also it schedules layout animation.
Unlike Android, progress
value on iOS will have only two values (0
or 1
) - i.e. it will not have an intermediate values, like 0.07, 0.12, 0.27 etc (same is applied to height
property - it doesn't have an intermediate values). It's not a big problem, but some interpolations (which are relying on intermediate values) may not work properly.
If you are animating non UI props (such as width
, height
, etc.) and you need to have intermediate values - consider to use useKeyboardHandler hook.