Skip to content

Commit

Permalink
docs: more content
Browse files Browse the repository at this point in the history
  • Loading branch information
kirillzyusko committed Dec 11, 2024
1 parent 7341ed5 commit 3227b13
Showing 1 changed file with 22 additions and 12 deletions.
34 changes: 22 additions & 12 deletions docs/blog/2024-12-31-release-1-15/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,15 @@ keywords:

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

This release mainly focuses on various ways to dismiss a keyboard, so let's go and see which new features this release brings 👇
This release mainly focuses on various ways to dismiss a keyboard and API enhancements, so let's go and see which new features this release brings 👇

<!-- truncate -->

## Changes to `.dismiss()` method
## Changes to `dismiss` method

### `dismiss()` method now returns a promise
### `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 people 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:
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 {
Expand All @@ -33,7 +33,7 @@ const subscription = KeyboardEvents.addListener("keyboardDidHide", () => {
KeyboardController.dismiss();
```

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

```ts
import { KeyboardController } from "react-native-keyboard-controller";
Expand All @@ -44,28 +44,36 @@ setVisible(true);

Much cleaner and more readable code! 💪

### `dismiss()` now blurs input by default
### `dismiss` now blurs input by default

The previous behavior of `dismiss()` was keeping the focus on the input on Android and was 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 😎
The previous behavior of `dismiss` was keeping the focus on the input on Android and was 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 like the old behavior, when input still hold the focus 🤷‍♂️ We hear you! 👇

### `dismiss()` now accepts a `keepFocus` parameter
### `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:
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 checking current keyboard state. This release is packed with 2 new methods that aims to simplify the keyboard state checks 😊
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
### 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 other properties, such as `type`, `appearance`, `target`, `timestamp` and others to get more information about the keyboard.

## Better `KeyboardStickyView` and `KeyboardToolbar` interoperability

### `KeyboardToolbar` now accepts `KeyboardStickyView` props
Expand All @@ -74,6 +82,8 @@ We finished with dismissal part, but the counter part of dismissal is checking c

## `KeyboardEvents` metadata enhancements

This release enhances `KeyboardEventData` with new properties.

### New `type` property

### New `appearance` property
Expand All @@ -87,5 +97,5 @@ This component got new property `textInputNativeID` which is available on iOS on
:::tip Why `textInputNativeID` was added?
Short answer - to keep a release backward compatible.

Long answer - before on iOS `KeyboardGestureArea` was returning `React.Fragment`. I think some people were relying on this fact, that `KeyboardGestureArea` doesn't do anything on iOS, so if this component starts to change a behavior instantly it may produce a hard migration. So to avoid this I added a new property `textInputNativeID` which acts as a switch (unless it's specified `KeyboardGestureArea` will not do anything useful on iOS). Also this property allows to selectively add offset for given inputs.
Long answer - before on iOS `KeyboardGestureArea` was returning `React.Fragment`. I think some developers were relying on this fact, that `KeyboardGestureArea` doesn't do anything on iOS, so if this component starts to change a behavior instantly it may produce a hard migration. So to avoid this I added a new property `textInputNativeID` which acts as a switch (unless it's specified `KeyboardGestureArea` will not do anything useful on iOS). Also this property allows to selectively add offset for given inputs.
:::

0 comments on commit 3227b13

Please sign in to comment.