-
-
Notifications
You must be signed in to change notification settings - Fork 89
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
## 📜 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
1 parent
62b76d5
commit bf9e349
Showing
1 changed file
with
130 additions
and
0 deletions.
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
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! 😊 |