|
| 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! 😊 |
0 commit comments