Skip to content

Commit

Permalink
docs: blogpost for 1.16.0 (#781)
Browse files Browse the repository at this point in the history
## 📜 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
kirillzyusko authored Jan 27, 2025
1 parent 06f5c53 commit 0e4ed17
Show file tree
Hide file tree
Showing 3 changed files with 94 additions and 1 deletion.
4 changes: 3 additions & 1 deletion cspell.json
Original file line number Diff line number Diff line change
Expand Up @@ -130,7 +130,9 @@
"chatwoot",
"obytes",
"kitsu",
"drakula"
"drakula",
"mathieu",
"acthernoene"
],
"ignorePaths": [
"node_modules",
Expand Down
91 changes: 91 additions & 0 deletions docs/blog/2025-01-27-release-1-16/index.mdx
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 added docs/static/video/ios-offset-demo.mp4
Binary file not shown.

0 comments on commit 0e4ed17

Please sign in to comment.