Skip to content

Commit c9680ad

Browse files
authored
docs: blogpost 1.19.0 (#1143)
## 📜 Description Added blogpost for upcoming `1.19.0` release. ## 💡 Motivation and Context <!-- Why is this change required? What problem does it solve? --> <!-- If it fixes an open issue, please link to the issue here. --> ## 📢 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 for upcoming `1.19.0` version; ## 🤔 How Has This Been Tested? Tested via `localhost:3000`. ## 📸 Screenshots (if appropriate): <img width="1727" height="766" alt="image" src="https://github.com/user-attachments/assets/510741c9-5669-4234-a916-8e62b3bc94bd" /> ## 📝 Checklist - [x] CI successfully passed - [x] I added new mocks and corresponding unit-tests if library API was changed
1 parent e1ef23b commit c9680ad

File tree

2 files changed

+90
-0
lines changed

2 files changed

+90
-0
lines changed
Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
---
2+
slug: compound-keyboard-toolbar
3+
title: Version 1.19 — A fresh KeyboardToolbar API, instant dismiss, and more! 🎉
4+
authors: [kirill]
5+
tags: [react-native, keyboard, keyboard-toolbar]
6+
keywords:
7+
[
8+
react-native-keyboard-controller,
9+
keyboard toolbar,
10+
dismiss without animation,
11+
]
12+
---
13+
14+
Hello everyone! 👋
15+
16+
I’m thrilled to announce **version 1.19** of `react-native-keyboard-controller`. This release brings:
17+
18+
- A brand new **compound KeyboardToolbar API**
19+
- The ability to **dismiss the keyboard instantly** (without animation!)
20+
- Full **React Native 0.80+** compatibility
21+
- And smaller fixes and refinements 🎉
22+
23+
Let’s dive into what’s new 👇
24+
25+
<!-- truncate -->
26+
27+
## 🔥 New `KeyboardToolbar` API
28+
29+
When the `KeyboardToolbar` API first landed in `1.11.0`, it unlocked powerful customization options but it also came with a long list of props that made configuration a bit... verbose.
30+
31+
With **release 1.19**, the API has been redesigned from the ground up to make it **more flexible, modular, and expressive** - without sacrificing any of that power.
32+
33+
Introducing the new compound component pattern:
34+
35+
```tsx
36+
<KeyboardToolbar opacity={Platform.OS === "ios" ? "4F" : "DD"}>
37+
<KeyboardToolbar.Background>
38+
<BlurView
39+
blurAmount={32}
40+
blurType={Platform.OS === "ios" ? "chromeMaterial" : "light"}
41+
reducedTransparencyFallbackColor="white"
42+
style={styles.absolute}
43+
/>
44+
</KeyboardToolbar.Background>
45+
<KeyboardToolbar.Content>
46+
{showAutoFill ? (
47+
<AutoFillContacts onContactSelected={onContactSelected} />
48+
) : null}
49+
</KeyboardToolbar.Content>
50+
<KeyboardToolbar.Prev onPress={haptic} />
51+
<KeyboardToolbar.Next onPress={haptic} />
52+
<KeyboardToolbar.Done onPress={haptic} />
53+
</KeyboardToolbar>
54+
```
55+
56+
This approach makes the toolbar **composable** (choose which parts to render), **customizable** (easily swap or style individual sections) and **readable** (your code now mirrors the actual UI layout).
57+
58+
If you’ve ever wished for more control or a cleaner API, this one’s for you 🎉
59+
60+
## ⚡ Instant keyboard dismissal
61+
62+
By default keyboard opens and closes with animation. But in some cases you might want to dismiss the keyboard **instantly** - for example when you use a fancy shared transitions and don't want keyboard animation to distract your users:
63+
64+
import Video from "@site/src/components/Video";
65+
66+
<Video src="/video/instant-dismiss.mp4" width={35} />
67+
<br />
68+
69+
In this release I've added a new option for `KeyboardController.dismiss` method that allows you to do that. You can pass `animated` prop to control whether the keyboard should be animated or not:
70+
71+
```ts
72+
import { KeyboardController } from "react-native-keyboard-controller";
73+
74+
KeyboardController.dismiss({ animated: false });
75+
```
76+
77+
## 👀 Support for RN 0.80+
78+
79+
The library was compatible with RN 0.80+, but this version resolves some edge cases and assures that everything works as expected.
80+
81+
If you are using RN 0.80+ - feel free to upgrade to the latest version of the lib.
82+
83+
## 🤔 What's next?
84+
85+
As always, my top focus is **resolving open issues** and keeping the library stable for everyone:
86+
87+
- Issues with more 👍 reactions are prioritized first — that’s how I track what matters most to the community.
88+
- Issues labeled “sponsor 💖” receive **highest priority** as part of dedicated sponsor support.
89+
90+
As always stay tuned and follow me on [Twitter](https://twitter.com/ziusko) and [GitHub](https://github.com/kirillzyusko) for updates. Thank you for your support! 😊
2.23 MB
Binary file not shown.

0 commit comments

Comments
 (0)