|
| 1 | +--- |
| 2 | +slug: use-keyboard-state |
| 3 | +title: Meet new 1.17 release with useKeyboardState hook 👋 |
| 4 | +authors: [kirill] |
| 5 | +tags: [react-native, keyboard, useKeyboardState] |
| 6 | +keywords: [react-native-keyboard-controller, useKeyboardState] |
| 7 | +--- |
| 8 | + |
| 9 | +Say hello to new `1.17.0` release of `react-native-keyboard-controller` 👋 |
| 10 | + |
| 11 | +This update brings a powerful new hook, custom C++ shadow nodes, and of course, plenty of bug fixes 😎 |
| 12 | + |
| 13 | +Let’s take a closer look at what’s new 👇 |
| 14 | + |
| 15 | +<div className="playwright center"> |
| 16 | + <img |
| 17 | + className="svg" |
| 18 | + src={require("./use-keyboard-state.png").default} |
| 19 | + alt="Phone with visible keyboard and arrow to useKeyboardState" |
| 20 | + /> |
| 21 | +</div> |
| 22 | + |
| 23 | +<!-- truncate --> |
| 24 | + |
| 25 | +## 🔥 New `useKeyboardState` hook |
| 26 | + |
| 27 | +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. |
| 28 | + |
| 29 | +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. |
| 30 | + |
| 31 | +**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. 🎉 |
| 32 | + |
| 33 | +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. |
| 34 | + |
| 35 | +## 🧱 Custom C++ Shadow Nodes |
| 36 | + |
| 37 | +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. |
| 38 | + |
| 39 | +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. |
| 40 | + |
| 41 | +Starting with this release, custom (non-auto-generated) C++ shadow nodes are included. This makes `OverKeyboardView` work as expected under the Fabric renderer. |
| 42 | + |
| 43 | +> ⚠️ **If you hit any build issues, make a [clean](https://github.com/kirillzyusko/react-native-keyboard-controller/issues/786#issuecomment-2741464142) build and try again. Still having problems? Open an [issue](https://github.com/kirillzyusko/react-native-keyboard-controller/issues/new?template=bug_report.md) and I’ll help you out.** |
| 44 | + |
| 45 | +## ✨ Summary |
| 46 | + |
| 47 | +This is a relatively small release focused on tightening up the internals and laying the groundwork for future updates. |
| 48 | + |
| 49 | +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 🙌 |
| 50 | + |
| 51 | +## 🚀 What's next? |
| 52 | + |
| 53 | +As always, my top priority is resolving open issues. Beyond that, here’s what’s coming up: |
| 54 | + |
| 55 | +- Support for `react-native@0.79`; |
| 56 | +- A new `KeyboardExtender` component that gets embedded directly into the keyboard; |
| 57 | +- KeyboardToolbar.Group` component to split multiple inputs into groups, each with its own navigation and state; |
| 58 | +- A complete rewrite of `KeyboardAwareScrollView` that will use cursor position instead of layout-based detection. |
| 59 | + |
| 60 | +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