diff --git a/docs/blog/2024-12-31-release-1-15/index.mdx b/docs/blog/2024-12-31-release-1-15/index.mdx index eb120da04..4478d1498 100644 --- a/docs/blog/2024-12-31-release-1-15/index.mdx +++ b/docs/blog/2024-12-31-release-1-15/index.mdx @@ -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 👇 -## 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 { @@ -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"; @@ -44,15 +44,15 @@ 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 }); @@ -60,12 +60,20 @@ 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 @@ -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 @@ -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. :::