Skip to content

Commit

Permalink
docs: blogpost for 1.12.0 (#438)
Browse files Browse the repository at this point in the history
## 📜 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
kirillzyusko authored May 13, 2024
1 parent 4cabd4d commit 3be37df
Show file tree
Hide file tree
Showing 2 changed files with 76 additions and 1 deletion.
3 changes: 2 additions & 1 deletion cspell.json
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,8 @@
"ivar",
"objc",
"QWERT",
"autoplayed"
"autoplayed",
"bridgeless"
],
"ignorePaths": [
"node_modules",
Expand Down
74 changes: 74 additions & 0 deletions docs/blog/2024-05-13-release-1-12/index.mdx
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! 😊

0 comments on commit 3be37df

Please sign in to comment.