|
| 1 | +--- |
| 2 | +slug: interactive-keyboard-ios-with-offset |
| 3 | +title: Interactive keyboard on iOS with offset 🔥 |
| 4 | +authors: [kirill] |
| 5 | +tags: [react-native, keyboard, interactive, ios, offset, selection] |
| 6 | +keywords: |
| 7 | + [ |
| 8 | + react-native-keyboard-controller, |
| 9 | + interactive keyboard, |
| 10 | + offset, |
| 11 | + keyboard gesture area, |
| 12 | + selection, |
| 13 | + ] |
| 14 | +--- |
| 15 | + |
| 16 | +Say hello to the first release of the year for `react-native-keyboard-controller` version `1.16.0`! 🎉 |
| 17 | + |
| 18 | +This update is packed with new features, critical bug fixes, crash resolutions, and performance optimizations. Let’s dive in and explore what’s new! 👇 |
| 19 | + |
| 20 | +import Video from "@site/src/components/Video"; |
| 21 | + |
| 22 | +<Video src="/video/ios-offset-demo.mp4" width={30} /> |
| 23 | + |
| 24 | +<!-- truncate --> |
| 25 | + |
| 26 | +## `KeyboardGestureArea` with `offset` on iOS 🔥 |
| 27 | + |
| 28 | +The cherry on the cake of this release is making `KeyboardGestureArea` available on iOS 🍒 |
| 29 | + |
| 30 | +Previously, react-native developers relied on `InputAccessoryView` to extend the keyboard area, but it had several limitations: |
| 31 | + |
| 32 | +- Multiline `TextInput` [fields couldn't](https://github.com/facebook/react-native/issues/18997); |
| 33 | +- Conditional positioning and padding weren't [fully customizable](https://github.com/facebook/react-native/issues/20157); |
| 34 | +- Weird animations when screen gets [mounted](https://stackoverflow.com/a/29110384/9272042). |
| 35 | + |
| 36 | +These issues made `InputAccessoryView` challenging to use in real-world apps. 😭 |
| 37 | + |
| 38 | +Starting with this release, `KeyboardGestureArea` is now available on iOS! Currently, it supports the `offset` property, but I plan to add more features soon. 😎 |
| 39 | + |
| 40 | +## `useFocusedInput` improvements |
| 41 | + |
| 42 | +### More Accurate Selection Events |
| 43 | + |
| 44 | +#### Improved precision |
| 45 | + |
| 46 | +Previously, `onSelectionChange`events could produce imprecise coordinates, especially when using different `paddingTop`/`paddingBottom` values or the `textAlignVertical` property. |
| 47 | + |
| 48 | +This update fixes those inaccuracies, ensuring more precise coordinates and eliminating the need for workarounds to align positioning between Android and iOS. |
| 49 | + |
| 50 | +#### Fully compatible with iOS < 13 |
| 51 | + |
| 52 | +`onSelectionChange` didn’t work for single-line `TextInput`s on iOS versions below 13. This issue has now been resolved, ensuring compatibility across all iOS versions. |
| 53 | + |
| 54 | +### Works Seamlessly with Stripe Inputs on Android |
| 55 | + |
| 56 | +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. |
| 57 | + |
| 58 | +I’ve reworked the code to interact directly with `EditText` whenever possible, ensuring full compatibility with **Stripe** and other third-party SDKs. |
| 59 | + |
| 60 | +### No crashes on iOS |
| 61 | + |
| 62 | +While rare, some users experienced crashes due to incorrect Key-Value Observing (KVO) removal when attempting to remove KVO from a view that didn’t have it. |
| 63 | + |
| 64 | +This release introduces a block-based KVO handling approach, eliminating those crashes. |
| 65 | + |
| 66 | +### More Robust Focus Detection (Even When the Keyboard Is Hidden) |
| 67 | + |
| 68 | +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}`. |
| 69 | + |
| 70 | +Now, focus detection has been improved to work reliably even without keyboard events. |
| 71 | + |
| 72 | +## New `preserveEdgeToEdge` prop for `KeyboardProvider` |
| 73 | + |
| 74 | +Thanks to [Mathieu Acthernoene](https://github.com/zoontek), `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. |
| 75 | + |
| 76 | +With `edge-to-edge` mode becoming the standard, this option helps prevent conflicts with other libraries. |
| 77 | + |
| 78 | +## Improved animation performance |
| 79 | + |
| 80 | +While most users won’t notice a difference (since previous animations were already computed in under `1ms`), I’ve made further optimizations to improve performance. |
| 81 | + |
| 82 | +Even small performance gains are valuable, as they free up CPU resources for other intensive tasks — such as `ShadowTree` traversal in `react-native-reanimated`. |
| 83 | + |
| 84 | +## What's next? |
| 85 | + |
| 86 | +As always, my immediate priority is addressing open issues. Additionally, I have plans for upcoming updates: |
| 87 | + |
| 88 | +- Adding support for `[email protected]`; |
| 89 | +- 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). |
| 90 | + |
| 91 | +Stay tuned and follow me on [Twitter](https://twitter.com/ziusko) and [GitHub](https://github.com/kirillzyusko) for updates. Thank you for your support! 😊 |
0 commit comments