Skip to main content

Version 1.19 — A fresh KeyboardToolbar API, instant dismiss, and more! 🎉

· 3 min read
Kirill Zyusko
Kirill Zyusko
Library author

Hello everyone! 👋

I’m thrilled to announce version 1.19 of react-native-keyboard-controller. This release brings:

  • A brand new compound KeyboardToolbar API
  • The ability to dismiss the keyboard instantly (without animation!)
  • Full React Native 0.80+ compatibility
  • And smaller fixes and refinements 🎉

Let’s dive into what’s new 👇

🔥 New KeyboardToolbar API​

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.

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.

Introducing the new compound component pattern:

<KeyboardToolbar opacity={Platform.OS === "ios" ? "4F" : "DD"}>
  <KeyboardToolbar.Background>
    <BlurView
      blurAmount={32}
      blurType={Platform.OS === "ios" ? "chromeMaterial" : "light"}
      reducedTransparencyFallbackColor="white"
      style={styles.absolute}
    />
  </KeyboardToolbar.Background>
  <KeyboardToolbar.Content>
    {showAutoFill ? (
      <AutoFillContacts onContactSelected={onContactSelected} />
    ) : null}
  </KeyboardToolbar.Content>
  <KeyboardToolbar.Prev onPress={haptic} />
  <KeyboardToolbar.Next onPress={haptic} />
  <KeyboardToolbar.Done onPress={haptic} />
</KeyboardToolbar>

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).

If you’ve ever wished for more control or a cleaner API, this one’s for you 🎉

⚡ Instant keyboard dismissal​

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:


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:

import { KeyboardController } from "react-native-keyboard-controller";

KeyboardController.dismiss({ animated: false });

👀 Support for RN 0.80+​

The library was compatible with RN 0.80+, but this version resolves some edge cases and assures that everything works as expected.

If you are using RN 0.80+ - feel free to upgrade to the latest version of the lib.

🤔 What's next?​

As always, my top focus is resolving open issues and keeping the library stable for everyone:

  • Issues with more 👍 reactions are prioritized first — that’s how I track what matters most to the community.
  • Issues labeled “sponsor 💖” receive highest priority as part of dedicated sponsor support.

As always stay tuned and follow me on Twitter and GitHub for updates. Thank you for your support! 😊