-
-
Notifications
You must be signed in to change notification settings - Fork 75
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
## 📜 Description Added blogpost for upcoming release. ## 💡 Motivation and Context To highlight all upcoming changes on a single page 👀 ## 📢 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 - wrote blogpost for 1.12.0; ## 🤔 How Has This Been Tested? <!-- Please describe in detail how you tested your changes. --> <!-- Include details of your testing environment, and the tests you ran to --> <!-- see how your change affects other areas of the code, etc. --> ## 📸 Screenshots (if appropriate): <img width="1446" alt="image" src="https://github.com/kirillzyusko/react-native-keyboard-controller/assets/22820318/7d80a09d-1264-4655-95ce-bd66d290d9be"> ## 📝 Checklist - [x] CI successfully passed - [x] I added new mocks and corresponding unit-tests if library API was changed
- Loading branch information
1 parent
4cabd4d
commit 3be37df
Showing
2 changed files
with
76 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,74 @@ | ||
--- | ||
slug: release-1-12 | ||
title: Announcing upcoming release 📣 | ||
authors: [kirill] | ||
tags: [react-native, keyboard, bridgeless] | ||
keywords: | ||
[react-native-keyboard-controller, keyboard, bridgeless, keyboard toolbar] | ||
--- | ||
|
||
I'm excited to announce the latest release, version 1.12.0, of react-native-keyboard-controller! | ||
|
||
Although this release may not seem monumental, it's significant, and I'm thrilled to share it with you. 😍 | ||
|
||
The key features of this release are: **bridgeless** support, selection tracking, enhanced `KeyboardToolbar` component and synchronous `onMove` handler on iOS among other bug fixes and improvements. | ||
|
||
<!-- truncate --> | ||
|
||
## Bridgeless support | ||
|
||
This library starting from `1.12.0` is now compatible RN 0.74 and fully supports bridgeless mode, offering improved performance and streamlined communication between native and JavaScript layers. | ||
|
||
## Selection tracking | ||
|
||
In the previous version, `react-native-keyboard-controller` was not able to track selection changes in the text input fields. Starting from `1.12.0` this library exposes a new event and handlers making it possible to track selection changes. | ||
|
||
In addition to duplicating the react-native API, this event provides information not only about the `start` and `end` positions but also the `x` and `y` coordinates for the top-left and bottom-right corners of the selection. | ||
|
||
These details allow you to draw elements behind the cursor, making interaction with focused inputs more intuitive: | ||
|
||
import Video from "@site/src/components/Video"; | ||
|
||
<Video src="/video/selection-demo.mov" width={65} /> | ||
<br /> | ||
|
||
Later on I'm planning to extend `KeyboardAwareScrollView` to react on selection tracking, so if your selection is overlapped with keyboard then `KeyboardAwareScrollView` will automatically scroll and avoid an overlap. | ||
|
||
## `KeyboardToolbar` enhancements | ||
|
||
The `KeyboardToolbar` component was initially introduced in version `1.10.0`. In this release, I've added new features to make it even more customizable and HID compatible. | ||
|
||
### `blur` effect | ||
|
||
Starting with version `1.12.0`, you can apply a blur effect to the `KeyboardToolbar` component by using the `blur` prop. You can use any compatible component, such as `react-native-blur` or `expo-blur`. Since iOS 16, the keyboard itself is translucent with a blur effect, which causes all components behind it to be blurred too. | ||
|
||
With the new version of `react-native-keyboard-controller`, you can extend this effect to the `KeyboardToolbar` component! 😎 | ||
|
||
### Button callbacks | ||
|
||
From version `1.12.0`, the `KeyboardToolbar` component supports various callbacks for specific events, such as `onNextCallback`, `onPrevCallback`, and `onDoneCallback`. | ||
|
||
These callbacks let you add **haptic** feedback, **play sounds**, or implement other creative responses based on your needs. | ||
|
||
## Synchronous `onMove` handler on iOS | ||
|
||
Since version `1.4.0`, when the `useKeyboardHandler` hook was introduced, the `onMove` handler was always a frame behind. | ||
|
||
As a result, it created a parallax effect that prevented elements from precisely following the keyboard. | ||
|
||
With a new release this problem is solved, and the `onMove` handler is now synchronized with the keyboard animation. 😊 | ||
|
||
## No need to patch `react-native-text-input-mask` anymore | ||
|
||
If you used `react-native-text-input-mask` alongside `useFocusedInputHandler` or `KeyboardAwareScrollView`, you might have needed to patch it to ensure that the `onChangeText` event was triggered. | ||
|
||
With the new release of `react-native-keyboard-controller`, you can now safely remove this patch and keep your existing code intact. 👍 | ||
|
||
## What's next? | ||
|
||
This release refines the previous version and at the same time introduces crucial improvements that will unlock the full potential of `react-native-keyboard-controller` in future updates: | ||
|
||
- on iOS, we now inject a delegate into `TextInput`, providing greater control over input and keyboard events; | ||
- the fully synchronous `onMove` handler will enable frame-by-frame keyboard control in the future, particularly when an interactive keyboard offset is implemented. 👀 | ||
|
||
To stay tuned follow me on [Twitter](https://twitter.com/ziusko) and [GitHub](https://github.com/kirillzyusko) for updates. Thank you for your support! 😊 |