Skip to content

Commit

Permalink
docs: blogpost 1.15 (#724)
Browse files Browse the repository at this point in the history
## 📜 Description

Added a blogpost about new `1.15` release.

## 💡 Motivation and Context

To keep people aware about upcoming 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 about new version;

## 🤔 How Has This Been Tested?

Tested locally on `localhost:3000`.

## 📸 Screenshots (if appropriate):

<img width="1598" alt="image"
src="https://github.com/user-attachments/assets/952c4241-728e-4249-90e5-41aec898def2"
/>

## 📝 Checklist

- [x] CI successfully passed
- [x] I added new mocks and corresponding unit-tests if library API was
changed
  • Loading branch information
kirillzyusko authored Dec 12, 2024
1 parent 62b76d5 commit bf9e349
Showing 1 changed file with 130 additions and 0 deletions.
130 changes: 130 additions & 0 deletions docs/blog/2024-12-12-release-1-15/index.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,130 @@
---
slug: mastering-keyboard-management
title: Mastering keyboard management 🥷🏼
authors: [kirill]
tags:
[
react-native,
keyboard,
dismiss,
keepFocus,
state,
isVisible,
type,
appearance,
]
keywords:
[
react-native-keyboard-controller,
keyboard,
dismiss,
keepFocus,
state,
isVisible,
type,
appearance,
]
---

Today I'm glad to announce a new `1.15.0` version of `react-native-keyboard-controller` 🎉

This release mainly focuses on managing keyboard state, improving keyboard dismissal interactions and API enhancements, so let's go and see which new features this release brings 👇

<!-- truncate -->

## Changes to `dismiss` method

### `dismiss` method now returns a promise

Previously, the `dismiss` method was synchronous, which meant that you couldn't determine the moment when keyboard is fully hidden. Typically many developers were using one time listener that was resolving a promise or executing the code that had to be executed after keyboard dismissal. The code could look like this:

```tsx
import {
KeyboardController,
KeyboardEvents,
} from "react-native-keyboard-controller";

const subscription = KeyboardEvents.addListener("keyboardDidHide", () => {
setVisible(true);
subscription.remove();
});

KeyboardController.dismiss();
```

Now, `dismiss` returns a promise, so you can use it in `async` way:

```ts
import { KeyboardController } from "react-native-keyboard-controller";

await KeyboardController.dismiss();
setVisible(true);
```

Much cleaner and more readable code! 💪

### `dismiss` now blurs input by default

The previous behavior of `dismiss` was keeping the focus on the input on Android and blurring the input on iOS. This behavior was not very intuitive and such inconsistency could causing a lot of issues. Now, the default behavior is to blur the input on both platforms 😎

Though a rhetorical question might be raised - **"I liked the old behavior, when input still hold the focus 🤷‍♂️. How to restore a previous behavior?"** We hear you! 👇

### `dismiss` now accepts a `keepFocus` parameter

Sometimes you might want to keep the focus on the input, even after keyboard is dismissed. This way users can understand which field was focused the last. If you want to achieve this behavior, you can pass `keepFocus` parameter to `dismiss` method:

```ts
KeyboardController.dismiss({ keepFocus: true });
```

## New `KeyboardController` API methods

We finished with dismissal part. But the counter part of dismissal is the checking current keyboard state. This release is packed with 2 new methods that aims to simplify the keyboard state checks and achieve a parity with `react-native` API 😊

### New `isVisible` method

This method acts as a `Keyboard.isVisible()` method from `react-native` and returns `true` if keyboard is currently visible and `false` otherwise.

You can use it to check keyboard visibility on demand without a need to create listeners.

### New `.state()` method

The new method returns the last keyboard state. It returns `null` if keyboard was not shown in the app yet.

This method acts similar to `Keyboard.metrics()` from `react-native` and returns the current keyboard state. The reason why it is named `state` instead of `metrics` is because it returns a different data structure and it's not a drop-in replacement for `Keyboard.metrics()`. However you can achieve the same results using `KeyboardController.state()` (because it gives an access to `height` value) and even more - you can use other properties, such as `type`, `appearance`, `target`, `timestamp` etc. to get more information about the keyboard.

## Better `KeyboardStickyView` and `KeyboardToolbar` interoperability

`KeyboardStickyView` and `KeyboardToolbar` also got some useful improvements 😊

### `KeyboardToolbar` now accepts `KeyboardStickyView` props

The `KeyboardToolbar` is based on `KeyboardStickyView`. However before it wasn't exposing some of `KeyboardStickyView` properties.

I fixed that problem and `KeyboardToolbar` now accepts the same properties that `KeyboardStickyView` has, thus making a better interoperability between these two components.

### `KeyboardStickyView` got new `enabled` prop

Before `KeyboardAwareScrollView` and `KeyboardAvoidingView` had `enabled` property, but somehow I forgot to add that property to `KeyboardStickyView` 😬. The `1.15.0` release fixes this problem and now `KeyboardStickyView` also has `enabled` property.

When this property is turned on, then `KeyboardStickyView` follows the keyboard. When property disabled, then it just moves the component into a position as keyboard wasn't shown yet.

## `KeyboardEvents` metadata enhancements

This release enhances `KeyboardEventData` with new properties.

### New `type` property

In this release I added new `type` property which reflects [keyboardType](https://reactnative.dev/docs/textinput#keyboardtype) value. Using this property you can understand more about which keyboard type is shown at the moment.

### New `appearance` property

This release adds a new `appearance` property which reflects keyboard appearance and can be one of `light`/`dark`/`default` values. This property is available on iOS and Android.

## What's next?

The main goal of this release was making `KeyboardGestureArea` available on iOS. I implemented necessary changes in [this PR](https://github.com/kirillzyusko/react-native-keyboard-controller/pull/727) (which would allow to use `offset` property for interactive dismissal). But when I decided to test Fabric I discovered many issues, which basically makes this component unusable on iOS. Since I already merged many PRs that extend library functionality I decided not to pause release process for months and prepare `1.15.0` now. I'm not abandoning the idea of adding `offset` to interactive keyboard dismissal. I just think it's not a right time for the release of this feature.

As support timeline for this release I'm planning to resolve some old known issues in the library to be sure this library is bug-free and can be used in various complex applications!

Stay tuned and 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 bf9e349

Please sign in to comment.