Skip to content

Commit 0e4ed17

Browse files
authored
docs: blogpost for 1.16.0 (#781)
## 📜 Description Blogpost for upcoming `1.16.0` version. ## 💡 Motivation and Context To keep people aware about new changes. ## 📢 Changelog <!-- High level overview of important changes --> <!-- For example: fixed status bar manipulation; added new types declarations; --> <!-- If your changes don't affect one of platform/language below - then remove this platform/language --> ### Docs - added blogpost for 1.16 ## 🤔 How Has This Been Tested? Tested on `localhost:3000`. ## 📸 Screenshots (if appropriate): <img width="1347" alt="image" src="https://github.com/user-attachments/assets/bc895f2c-0a45-44fb-9f5c-6068de2f7f70" /> ## 📝 Checklist - [x] CI successfully passed - [x] I added new mocks and corresponding unit-tests if library API was changed
1 parent 06f5c53 commit 0e4ed17

File tree

3 files changed

+94
-1
lines changed

3 files changed

+94
-1
lines changed

cspell.json

+3-1
Original file line numberDiff line numberDiff line change
@@ -130,7 +130,9 @@
130130
"chatwoot",
131131
"obytes",
132132
"kitsu",
133-
"drakula"
133+
"drakula",
134+
"mathieu",
135+
"acthernoene"
134136
],
135137
"ignorePaths": [
136138
"node_modules",
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
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! 😊

docs/static/video/ios-offset-demo.mp4

3.91 MB
Binary file not shown.

0 commit comments

Comments
 (0)