|
| 1 | +--- |
| 2 | +slug: expo-snacks |
| 3 | +title: Version 1.20 — Expo Snack Support, Reanimated Deprecation Path, and New Features 🧬 |
| 4 | +authors: [kirill] |
| 5 | +tags: [react-native, keyboard, expo] |
| 6 | +keywords: [react-native-keyboard-controller, expo snack, useAnimatedKeyboard] |
| 7 | +--- |
| 8 | + |
| 9 | +Meet the `1.20.0` release of `react-native-keyboard-controller`. It’s a **small** (only 500 lines of code added compared to the previous release), but a very **important** one - it significantly improves compatibility across the `react-native` ecosystem. |
| 10 | + |
| 11 | +Curious about what’s new? Let’s dive in! |
| 12 | + |
| 13 | +<!-- truncate --> |
| 14 | + |
| 15 | +import Head from "@docusaurus/Head"; |
| 16 | + |
| 17 | +## Expo Snack support |
| 18 | + |
| 19 | +In Expo SDK 54, `react-native-keyboard-controller` lib was added to the **Expo Go**, which meant you could use the library in any project powered by Expo. However, it still was not fully compatible with Expo Snacks - trying to use it there resulted in errors. |
| 20 | + |
| 21 | +With version `1.20.0`, that limitation is finally gone. The library now works seamlessly in Expo Snacks as well! 🎉 This means you can easily share code, create reproduction examples, and test everything directly in the browser. It’s also a big win for the library itself - I can now rework the documentation and turn all the example code into fully interactive sandboxes. |
| 22 | + |
| 23 | +Below is an embedded Snack that includes the code I used for my [AppJS Conf](https://appjs.co) demo this year: |
| 24 | + |
| 25 | +<div |
| 26 | + data-snack-id="@kirylziusko/chat-keyboard-avoiding-view" |
| 27 | + data-snack-platform="ios" |
| 28 | + data-snack-preview="true" |
| 29 | + data-snack-theme="light" |
| 30 | + style={{ |
| 31 | + overflow: "hidden", |
| 32 | + background: "#fbfcfd", |
| 33 | + border: "1px solid var(--color-border)", |
| 34 | + borderRadius: 4, |
| 35 | + height: 505, |
| 36 | + width: "100%", |
| 37 | + }} |
| 38 | +></div> |
| 39 | + |
| 40 | +<Head> |
| 41 | + <script src="https://snack.expo.dev/embed.js" async /> |
| 42 | +</Head> |
| 43 | + |
| 44 | +<br /> |
| 45 | + |
| 46 | +:::info 1.13.x Flashbacks |
| 47 | +To support **Expo Snacks** I had to rewrite the mechanism that propagates events to worklet handlers. The last time I made a change like this was in the `1.13.x` release, and in the beginning of this release I've received many bug reports that something wasn't working in various setups. |
| 48 | + |
| 49 | +The new approach _shouldn't_ cause issues, **but** I can not guarantee that nothing will break - every React Native project is unique, and unexpected edge cases do happen. If you notice any incompatibilities between `1.19.x` and `1.20.x`, please bare with me and report a bug. I promise to address everything and ensure even wider compatibility than before! |
| 50 | +::: |
| 51 | + |
| 52 | +## Deprecated `useAnimatedKeyboard` hook from `react-native-reanimated` |
| 53 | + |
| 54 | +The `react-native-reanimated` used to provide its own hook for tracking keyboard movement: `useAnimatedKeyboard`. |
| 55 | + |
| 56 | +Starting from `react-native-reanimated@4.2.0`, the Reanimated team decided to stop supporting this hook and officially deprecated it and now they recommend to migrate to `react-native-keyboard-controller` instead. |
| 57 | + |
| 58 | +We’ve worked closely together to prepare a migration guide and ensure the transition is as smooth as possible. To help with that, I added a compatibility version of `useAnimatedKeyboard` directly into this library. |
| 59 | + |
| 60 | +If you're migrating from `react-native-reanimated` to `react-native-keyboard-controller` and don't want to re-write your entire codebase right away, you can simply switch your imports to the compat layer: |
| 61 | + |
| 62 | +```diff |
| 63 | +-import {useAnimatedKeyboard, KeyboardState} from "react-native-reanimated"; |
| 64 | ++import {useAnimatedKeyboard, KeyboardState} from "react-native-keyboard-controller"; |
| 65 | +``` |
| 66 | + |
| 67 | +That’s all you need to do. If you encounter any bugs or issues, please report them in the `react-native-keyboard-controller` repository. |
| 68 | + |
| 69 | +## New `assureFocusedInputVisible` method for `KeyboardAwareScrollView` |
| 70 | + |
| 71 | +The `KeyboardAwareScrollView` already tracks a lot of things - **keyboard movements**, **layout changes** of the focused input, **cursor position** updates, and more. However, in some cases the layout inside the `KeyboardAwareScrollView` can shift unexpectedly (for example, after showing validation errors), and these changes are difficult to track natively. |
| 72 | + |
| 73 | +Previously, ensuring the focused input stayed visible required writing custom logic to _estimate_ how far the view should scroll. This approach came with several drawbacks: |
| 74 | + |
| 75 | +- you had to write and maintain quite a bit of custom code; |
| 76 | +- the scroll estimation was often inaccurate, especially when users had increased font sizes or other accessibility settings enabled; |
| 77 | + |
| 78 | +import ComparisonTable from "@site/src/components/ComparisonTable"; |
| 79 | +import Video from "@site/src/components/Video"; |
| 80 | + |
| 81 | +<ComparisonTable |
| 82 | + left={<Video src="/video/validation-without-scroll.mov" width={65} />} |
| 83 | + right={<Video src="/video/validation-with-scroll.mov" width={65} />} |
| 84 | + leftText={<i>Focused input gets hidden after validation</i>} |
| 85 | + rightText={ |
| 86 | + <i>Focused input remains visible after validation and gets auto-scrolled</i> |
| 87 | + } |
| 88 | +/> |
| 89 | + |
| 90 | +Starting from `react-native-keyboard-controller@1.20.0`, there’s now a built-in solution: a new method on `KeyboardAwareScrollView` called `assureFocusedInputVisible`. |
| 91 | + |
| 92 | +```tsx |
| 93 | +import { |
| 94 | + KeyboardAwareScrollView, |
| 95 | + KeyboardAwareScrollViewRef, |
| 96 | +} from "react-native-keyboard-controller"; |
| 97 | + |
| 98 | +function LongForm() { |
| 99 | + const ref = useRef<KeyboardAwareScrollViewRef>(null); |
| 100 | + |
| 101 | + useEffect(() => { |
| 102 | + ref.current?.assureFocusedInputVisible(); |
| 103 | + }, [errors]); |
| 104 | + |
| 105 | + return ( |
| 106 | + <KeyboardAwareScrollView ref={ref} bottomOffset={50}> |
| 107 | + {/*...*/} |
| 108 | + </KeyboardAwareScrollView> |
| 109 | + ); |
| 110 | +} |
| 111 | +``` |
| 112 | + |
| 113 | +With this method, you can ensure that the focused input always remains visible — even after layout changes — with **pixel-perfect accuracy across all configurations**, including when accessibility settings like larger fonts are enabled. |
| 114 | + |
| 115 | +## Achieved milestones |
| 116 | + |
| 117 | +I expect this to be the last **minor** release of the year (though I’ll continue shipping **patch** releases), so it feels like the right moment to look back at what we’ve all accomplished together. With 2026 around the corner, here’s a small retrospective — similar to the one I did [back in 2023](./new-features-achieved-milestones#achieved-milestones). |
| 118 | + |
| 119 | +### 📦 5 releases per year |
| 120 | + |
| 121 | +We’re moving at a fast pace: just like in previous years, we shipped **over five releases** in 2025 — each one bringing new features, improvements, and community-requested enhancements. |
| 122 | + |
| 123 | +### 🌟 3100 stars on GitHub |
| 124 | + |
| 125 | +In just two years, the library gained **2000+ new GitHub stars**. That number still blows my mind. Two years ago we crossed the **1000-star** mark — something that already felt surreal — and now we’re at **3100+**. |
| 126 | + |
| 127 | +Thank you to every developer who uses the library, reports issues, contributes ideas, or simply stars the repo. It truly means a lot ❤️ |
| 128 | + |
| 129 | +### 📈 450k weekly downloads on npm |
| 130 | + |
| 131 | +Two years ago, the library had around **8,000 weekly downloads**. Today, it’s at **450,000+** — a **56× growth** in just **24 months**. |
| 132 | + |
| 133 | +This incredible adoption is a clear sign of how essential smooth keyboard handling is in the React Native ecosystem. |
| 134 | + |
| 135 | +### 🤝 Impact on open source community |
| 136 | + |
| 137 | +`react-native-keyboard-controller` is now widely used across the ecosystem - from individual developers to large-scale production apps. Some well-known adopters include: |
| 138 | + |
| 139 | +- **Bluesky** - powering polished keyboard interactions in a high-traffic social app |
| 140 | +- **Expensify** - used in a massive cross-platform codebase with millions of users |
| 141 | +- **V0 (Vercel)** - helping elevate UX in modern React Native experiences |
| 142 | + |
| 143 | +Seeing the library become part of the toolchain for such impactful products is incredibly motivating — and a reminder of why maintaining open source is worth the effort. |
| 144 | + |
| 145 | +### ❤️ Sponsors support |
| 146 | + |
| 147 | +I want to take a moment to express my deepest gratitude to all the sponsors who support this project. Your contributions genuinely make a difference - without you, it simply wouldn’t be possible to maintain the library at this level of quality, release new features, fix issues quickly, and keep pushing the ecosystem forward. |
| 148 | + |
| 149 | +Open source takes time, energy, and consistency, and your support is what makes that effort sustainable. Thank you for believing in the project, for investing in its future, and for helping thousands of developers build better products every day. ❤️ |
| 150 | + |
| 151 | +A huge thank you to all my sponsors: [Hirbod](https://github.com/hirbod), [MarceloPrado](https://github.com/MarceloPrado), [mrtawil](https://github.com/mrtawil), [ksugaevskaya](https://github.com/ksugaevskaya). [VladyslavMartynov10](https://github.com/VladyslavMartynov10), [devoren](https://github.com/devoren), [bousouninjin](https://github.com/bousouninjin), [pouyaemami](https://github.com/pouyaemami), [matinzd](https://github.com/matinzd), [floydkim](https://github.com/floydkim), [Stafox](https://github.com/Stafox), [wise-danya](https://github.com/wise-danya), [ronintechnologies](https://github.com/ronintechnologies), [Kasendwa](https://github.com/Kasendwa), [KingDoxik](https://github.com/KingDoxik), [plantrail](https://github.com/plantrail), [flexbox](https://github.com/flexbox), [Mako-L](https://github.com/Mako-L), [mk-nickyang](https://github.com/mk-nickyang), [jerrickhakim](https://github.com/jerrickhakim), [GNUGradyn](https://github.com/GNUGradyn), [Toby56](https://github.com/Toby56) and [xoyseau](https://github.com/xoyseau). |
| 152 | + |
| 153 | +## 🤔 What's next? |
| 154 | + |
| 155 | +As always, my top focus is **resolving open issues** and keeping the library stable for everyone: |
| 156 | + |
| 157 | +- Issues with more 👍 reactions are prioritized first — that’s how I track what matters most to the community. |
| 158 | +- Issues labeled “sponsor 💖” receive **highest priority** as part of dedicated sponsor support. |
| 159 | + |
| 160 | +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