Skip to main content

Interactive keyboard on iOS with offset 🔥

· 3 min read
Kirill Zyusko
Kirill Zyusko
Library author

Say hello to the first release of the year for react-native-keyboard-controller version 1.16.0! 🎉

This update is packed with new features, critical bug fixes, crash resolutions, and performance optimizations. Let’s dive in and explore what’s new! 👇

KeyboardGestureArea with offset on iOS 🔥​

The cherry on the cake of this release is making KeyboardGestureArea available on iOS 🍒

Previously, react-native developers relied on InputAccessoryView to extend the keyboard area, but it had several limitations:

These issues made InputAccessoryView challenging to use in real-world apps. 😭

Starting with this release, KeyboardGestureArea is now available on iOS! Currently, it supports the offset property, but I plan to add more features soon. 😎

useFocusedInput improvements​

More Accurate Selection Events​

Improved precision​

Previously, onSelectionChangeevents could produce imprecise coordinates, especially when using different paddingTop/paddingBottom values or the textAlignVertical property.

This update fixes those inaccuracies, ensuring more precise coordinates and eliminating the need for workarounds to align positioning between Android and iOS.

Fully compatible with iOS < 13​

onSelectionChange didn’t work for single-line TextInputs on iOS versions below 13. This issue has now been resolved, ensuring compatibility across all iOS versions.

Works Seamlessly with Stripe Inputs on Android​

Previously, some third-party SDKs, like Stripe, used custom EditText subclasses that caused issues when casting to ReactEditText, preventing the library from recognizing focused inputs.

I’ve reworked the code to interact directly with EditText whenever possible, ensuring full compatibility with Stripe and other third-party SDKs.

No crashes on iOS​

While rare, some users experienced crashes due to incorrect Key-Value Observing (KVO) removal when attempting to remove KVO from a view that doesn’t have it.

This release introduces a block-based KVO handling approach, eliminating those crashes.

More Robust Focus Detection (Even When the Keyboard Is Hidden)​

Previously, the library relied on the keyboardWillShow event as an indicator that an input field was focused. However, this event doesn’t always trigger—such as when using a physical keyboard or setting showSoftInputOnFocus={false}.

Now, focus detection has been improved to work reliably even without keyboard events.

New preserveEdgeToEdge prop for KeyboardProvider​

Thanks to Mathieu Acthernoene, preserveEdgeToEdge has been introduced! This property lets you control whether edge-to-edge mode is disabled when calling setEnabled(false), or if you want to keep it enabled.

With edge-to-edge mode becoming the standard, this option helps prevent conflicts with other libraries.

Improved animation performance​

While most users won’t notice a difference (since before animations were already computed in under 1ms), I’ve made further optimizations to improve performance.

Even small performance gains are valuable, as they free up CPU resources for other intensive tasks — such as ShadowTree traversal in react-native-reanimated.

What's next?​

As always, my immediate priority is addressing open issues. Additionally, I have plans for upcoming updates:

  • Adding support for react-native@0.77;
  • A major rewrite of KeyboardAwareScrollView to consider cursor positioning (this release lays the groundwork by improving event precision to minimize breaking changes in the future).

Stay tuned and follow me on Twitter and GitHub for updates. Thank you for your support! 😊