-
-
Notifications
You must be signed in to change notification settings - Fork 86
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
## 📜 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
- Loading branch information
1 parent
06f5c53
commit 0e4ed17
Showing
3 changed files
with
94 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,91 @@ | ||
--- | ||
slug: interactive-keyboard-ios-with-offset | ||
title: Interactive keyboard on iOS with offset 🔥 | ||
authors: [kirill] | ||
tags: [react-native, keyboard, interactive, ios, offset, selection] | ||
keywords: | ||
[ | ||
react-native-keyboard-controller, | ||
interactive keyboard, | ||
offset, | ||
keyboard gesture area, | ||
selection, | ||
] | ||
--- | ||
|
||
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! 👇 | ||
|
||
import Video from "@site/src/components/Video"; | ||
|
||
<Video src="/video/ios-offset-demo.mp4" width={30} /> | ||
|
||
<!-- truncate --> | ||
|
||
## `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: | ||
|
||
- Multiline `TextInput` [fields couldn't](https://github.com/facebook/react-native/issues/18997); | ||
- Conditional positioning and padding weren't [fully customizable](https://github.com/facebook/react-native/issues/20157); | ||
- Weird animations when screen gets [mounted](https://stackoverflow.com/a/29110384/9272042). | ||
|
||
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, `onSelectionChange`events 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 `TextInput`s 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 didn’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](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. | ||
|
||
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 previous 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](https://twitter.com/ziusko) and [GitHub](https://github.com/kirillzyusko) for updates. Thank you for your support! 😊 |
Binary file not shown.