Skip to main content

Meet new 1.17 release with useKeyboardState hook πŸ‘‹

Β· 3 min read
Kirill Zyusko
Library author

Say hello to new 1.17.0 release of react-native-keyboard-controller πŸ‘‹

This update brings a powerful new hook, custom C++ shadow nodes, and of course, plenty of bug fixes 😎

Let’s take a closer look at what’s new πŸ‘‡

Phone with visible keyboard and arrow to useKeyboardState

πŸ”₯ New useKeyboardState hook​

Since the very first version, this library has provided keyboard events via the KeyboardEvents module. But many developers ended up writing their own wrappers to sync those events with ref or state variables.

In version 1.15.0, the KeyboardController.state() API was introduced to read the keyboard state without needing a listener. However, if you wanted to react to keyboard changes (like conditionally rendering a component) you still had to use KeyboardEvents and deal with boilerplate code.

That’s no longer the case! With this release, you can use the new useKeyboardState hook to track the keyboard in a clean, declarative way. πŸŽ‰

Also, KeyboardController.state() has been improved β€” it now always returns a defined value, so you no longer need optional chaining to safely access the keyboard state.

🧱 Custom C++ Shadow Nodes​

When OverKeyboardView was introduced, there was an issue on Android/Fabric: the view couldn’t stretch to full screen. That’s because layout is now calculated in C++, and resizing your component requires updating state in C++ as well.

At the time, I released OverKeyboardView with this limitation since there were a lot of other moving pieces β€” and gradual rollout was the right choice. But now that the new architecture is the default in React Native, it’s time to address the problem.

Starting with this release, custom (non-auto-generated) C++ shadow nodes are included. This makes OverKeyboardView work as expected under the Fabric renderer.

⚠️ If you hit any build issues, make a clean build and try again. Still having problems? Open an issue and I’ll help you out.

✨ Summary​

This is a relatively small release focused on tightening up the internals and laying the groundwork for future updates.

While it doesn’t introduce any game-changing features, it plays an important role in ensuring that custom C++ shadow nodes can be successfully integrated across projects using the new React Native architecture. Think of it as a bridge release β€” stabilizing key parts of the system to unlock bigger things coming soon πŸ™Œ

πŸš€ What's next?​

As always, my top priority is resolving open issues. Beyond that, here’s what’s coming up:

  • Support for react-native@0.79;
  • A new KeyboardExtender component that gets embedded directly into the keyboard;
  • KeyboardToolbar.Group` component to split multiple inputs into groups, each with its own navigation and state;
  • A complete rewrite of KeyboardAwareScrollView that will use cursor position instead of layout-based detection.

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