Summary of 2022 — React Native Open Source at Software Mansion
Let’s sum up all the new features and other contributions made by the React Native Open Source and Expo teams at Software Mansion throughout the year.
In this blog post, we summarize the most important updates in the libraries that we maintain including Reanimated, Gesture Handler, Screens, and other open-source libraries as well as share some plans for the future. If you don’t follow @swmansion on Twitter, here’s what you probably missed in 2022.
Migrating to the New Architecture
Our first mission for 2022 was to make our libraries compatible with the New Architecture. We really wanted to migrate our libraries ahead of time so that the early adopters could use them with Fabric enabled as soon as possible. Our motivation was to pave the way and serve as an example of third-party code for the rest of the community. Each library presented its own unique challenges to overcome:
- react-native-screens — native views with custom state, autolinking, reversed order of deleting component subtrees, backward compatibility with Paper
- react-native-gesture-handler — native views, view flattening detection, autolinking, backward compatibility
- react-native-reanimated — updating props of native views via C++ ShadowTree, intercepting raw events on the UI thread, linking against shared libraries from React Native
The mission turned out to be successful as all of the above libraries support both Paper and Fabric since 3.12.0, 2.3.0, and 3.0.0-rc.0, respectively. For more details on the migration process itself, read our story on integrating Fabric with react-native-screens.
Reanimated 3
In May, we announced the new major release of react-native-reanimated. The new version of the library is fully compatible with Reanimated 2 code and supports both Paper and Fabric. However, we decided to phase out support for legacy Reanimated 1 API as well as rely on building from source instead of providing pre-built binaries for Android. Reanimated 3 also includes the new implementation of layout animations and shared values which won’t be backported to 2.x releases so make sure to upgrade to 3.0.0-rc.10 today or once we release 3.0.0-stable in Q1 2023.
App.js Conf 2022
App.js Conf is a React Native & Expo-focused conference organized by Software Mansion. In June 2022, we brought together 330+ developers from all around the world, listened to over 20 talks by React Native professionals, discussed the present and the future of mobile development, and danced till morning at the afterparty. We are excited to announce that App.js Conf 2023 takes place from May 10th to 12th in Kraków, Poland. Join us and we promise to deliver an even better experience than before!
React Native SVG maintenance
In February, we decided to take up the responsibility for react-native-svg library which had been barely maintained since August 2021. First, we merged some long-standing PRs, fixed critical issues, cleaned up the repo, added example apps, and improved CI workflows. Next, we added Fabric support, including compatibility with bridgeless mode and static view configs (which are yet to be announced) in cooperation with Meta engineers. Apart from this, we unified color handling across all supported platforms. 112 merged pull requests and 14 releases later, we decided to give the library a new home and move the repository under the software-mansion namespace on GitHub.
Layout Animations rewrite and bug fixes
A large part of the issues reported by the community in 2022 was related to various undesirable side effects when using layout animations. In May, we began a refactor of the entire feature, including the elimination of memory leaks on the native side, reducing the number of native-to-JS calls by storing animation configs on the C++ side as well as improving the overall quality and readability of the code. The new implementation of Layout Animations was released in 3.0.0-rc.6 and since then we have been actively working on further improvements so please upgrade, test it out, and share your results — feedback is very appreciated.
Shared values rewrite
Another area of Reanimated that we refactored in 2022 is the very core mechanism that powers up the whole library, i.e. shared values. The main objective of the rewrite was to address the memory-related issues rooted in the C++ part of the library. They were too difficult to fix due to the inherent complexity of the codebase. The new core of Reanimated significantly optimizes a number of JSI roundtrip calls (thus improving the overall performance), eliminates memory leaks when using arrays or objects as shared values (making shared values more friendly, especially for Hermes GC) and also allows us to implement some new and often requested functionalities in the future. While it changes a lot of things under the hood, it doesn’t introduce any API changes so all your Reanimated code is already compatible with the new implementation released in 3.0.0-rc.8.
Better stack traces in worklets
Aside from stability and performance enhancements, Reanimated 3 also improves the developer experience of error handling in worklets. This is especially helpful for prototyping or developing animations in debug mode. Gone are the days of unreadable error messages or unexplainable crashes, welcome beautiful stack traces with actual code snippets and proper syntax highlighting.
New hooks in Reanimated
In 2022, apart from maintenance and bug fixes, we also managed to deliver a number of new features to Reanimated. Let’s start with a quick overview of newly introduced hooks:
useAnimatedSensor— allows you to easily create cool interactive animations based on data from in-device sensors such as gyroscope or accelerometeruseAnimatedKeyboard— returns the state and the height of the screen keyboard as a shared value, allowing to create animations based on the current keyboard positionuseScrollViewOffset— returns the offset of anAnimated.ScrollViewas a shared value can be often used instead ofuseAnimatedScrollHandleruseFrameCallback— lets you register a worklet to be run on each animation frame, can be enabled or disabled imperatively
measure & scrollTo improvements
Throughout September and October, we merged a series of PRs that improve the overall stability and developer experience of Reanimated’s measure function. In a nutshell, it allows you to obtain the current layout metrics (position and size) of animated components. Starting from 3.0.0-rc.4 and 2.14.0, instead of returning zeros or even crashing the whole app, it simply returns null if such measurement cannot be made, for instance, if the component has not been mounted yet, and hopefully TypeScript will remind you to cover this case as well. We also provided missing web implementation along with scrollTo function, so now you can use measure confidently across all platforms and architectures!
Better default color interpolation
Reanimated comes with built-in support for animating and interpolating colors in various formats, just like they were regular values. Previously, animating from red to green or cyan would take you on a long but quite colorful journey through the whole rainbow but unfortunately in most of the use cases this isn’t actually the desired result. Starting from Reanimated 3.0.0-rc.10, you can choose from 4 different interpolation modes, with RGB with gamma = 2.2 being the default since such transition looks the most natural to the human eye (check out the interactive demo in our docs).
Debugging Hermes worklet runtime
Previously, the only way to debug worklets was to use Safari Developer Tools which only works for iOS devices running JSC. If your app runs on Hermes, starting from Reanimated 3.0.0-rc.3 you can debug the UI runtime with Chrome DevTools either directly from chrome://inspect or using Reanimated Flipper Plugin. Apart from setting the breakpoints in worklets and inspecting variables (including shared values), you can also profile the app or take memory snapshots. In the documentation, we also added a section with an overview of popular debugging tools (see the docs).
Shared Element Transitions
In September, we announced that we were working on one of the most highly requested features by the community, which is enabling animations of components between two or more screens, also referred to as Shared Element Transitions. With a simple but customizable API, developers can easily enhance their apps with smooth and delightful animations, which will certainly improve the user experience of their apps. The PR introducing Shared Element Transitions is in the review and we really hope to deliver it in Reanimated 3 quite soon so stay tuned for the updates.
New implementation of Gesture Handler for Web
Although React Native libraries mostly target native platforms such as Android and iOS, it is worth noting that both Reanimated and Gesture Handler also come with web support, meaning they can also be used in react-native-web projects. Previously, Gesture Handler for Web would use hammer.js which unfortunately is no longer maintained (and also quite buggy). That’s why we decided to migrate off from hammer.js in favor of using Web APIs such as Pointer events directly. You can test out the new version by calling enableExperimentalWebImplementation (available since 2.6.0).
More improvements in Gesture Handler
Among many merged pull requests to react-native-gesture-handler, there are some features and bug fixes that deserve a mention here. In 2022, we improved multi-touch handling on Android, added runOnJS modifier to gestures, fixed sound effects for nested buttons, and added warnings when GestureDetector is used in possibly unsupported configurations and finally introduced some new functionalities like Pan.activateAfterLongPress, touchSoundDisabled, cancelsTouchesInView or onLongPress for buttons.
React Native Screens
If your app uses React Navigation with native stack, then you’re actually seeing native navigation components provided by the operating system and exposed to React Native world by react-native-screens. This year, apart from Fabric migration and general maintenance of the library, we exposed various platform-specific settings such as transition duration, swipe direction, gesture response distance, and search bar tint color as well as added support for iOS detents.
React Navigation
Talking about navigation and screens, this year we also contributed to react-navigation library. Apart from numerous bug fixes, we migrated the example app from classical updates to EAS, added support for freezeOnBlur prop as well as implemented a new hook usePreventRemove() that can be used to hold off going back to the previous screen for instance when a user has unsaved changes.
React Native Radio #236
In May, Krzysztof Magiera was invited to React Native Radio to talk about Reanimated. Check out the full episode here:
RNCK meet-ups
Each two or three months Software Mansion organizes React Native Community meet-ups in our office in Kraków, Poland. In 2022, there were 3 meet-ups and all of them were live-streamed and are now available on our YouTube channel. Feel invited to join us next time, either in person or online!
10 years of Software Mansion
November marked the 10th anniversary of the founding of the company.
Migrating even more third-party libraries
In order to enable Fabric in React Native app, each and every custom native component used in the app must support Fabric. Currently, this is the main blocker that prevents developers from using the New Architecture. After we successfully migrated Reanimated, Gesture Handler, and Screens, with all the knowledge and skills we had acquired, we started searching for other popular third-party libraries that were frequently used by the community but hadn’t started the migration process yet. There were many technical challenges on the way, but eventually, we managed to submit complete pull requests with Fabric support to the following libraries:
- react-native-svg — the library introduces a number of custom native views which can be nested, so it was non-trivial not only because of differences in React Native view hierarchy on iOS between Paper and Fabric but also in terms of achieving backward compatibility without code duplication
- @Shopify/flash-list — although this library heavily relies on JS-only recyclerlistview, it uses a custom native component for layout calculation during the first render, which fortunately was quite straightforward to migrate. However, there appeared some performance issues on Android but after a bit of digging and native code profiling it turned out to be a regression related to Text component from React Native itself as well as the poor performance of Hermes compiled using NDK 24.
Enabling Fabric in a real-world app
When it comes to the New Architecture, we didn’t migrate all the libraries just for fun. Since the very beginning, our aim has been to enable Fabric in a real-world production app. A great opportunity to achieve the goal was to enable the New Architecture in the New Expensify app. First, we identified 5 more libraries providing custom native views that needed to be migrated:
- react-native-pdf
- react-native-progress-bar-android
- react-native-picker
- react-native-fast-image
- urbanship-react-native
Once all the dependencies were ready, it was high time to pull the lever and run the app with Fabric enabled, and quite astonishingly, it generally worked. Obviously, there are still some minor inconsistencies that need to be taken care of individually in the near future, but it’s a giant leap for us.
As the next step, we plan to migrate all NativeModules provided by third-party dependencies to TurboModules which use JSI (JavaScript Interface) instead of communicating asynchronously through the bridge.
Keeping up with React Native
One of the biggest challenges in 2022 was being up-to-date with new releases of React Native. With great power comes great responsibility and we feel like the community expects our libraries to work with the latest version of the framework from day one, while still keeping support and providing updates for legacy versions like 0.64. In 2022, we really tried hard when it comes to compatibility — but it wasn’t easy and took lots of time, especially for Reanimated which quite closely integrates with various React Native internals, but also more on the New Architecture in general. However, thanks to cooperation with folks at Meta, we managed to overcome all obstacles and always make it on time.
Expo Modules API
In November, the Expo team at Software Mansion released the very first stable version of Expo Modules API which allows for implementing custom native modules and views in Swift and Kotlin using declarative developer-friendly DSL without any boilerplate. Moreover, the new API is renderer-agnostic, therefore all Expo modules work with Fabric out of the box. As the next step, the team is looking into adding support for typed arrays, classes as well as SwiftUI. If this sounds interesting to you, consider taking part in workshops Native modules made easy with Expo hosted by Expo Modules API authors during App.js Conf 2023.
Expo Image
In the following month, the Expo team at Software Mansion announced the alpha release of a new library expo-image, which was designed to be a drop-in replacement for react-native-fast-image and had been implemented using Expo Modules API. The new library also has built-in blurhash support, efficient caching, transitions, and web support. The stable version is expected to be shipped pretty soon as part of the SDK 48. For more details, check out Expo docs.
EAS Build and Submit & Dev Client
In 2022, the Expo team at Software Mansion was also working on various development tools including Expo Dev Client, EAS Build and EAS Submit. For more details, check out the Expo blog, and stay tuned for new exciting features!
State of React Native
In December, Software Mansion launched the very first edition of the State of React Native survey, inspired by the popular State of JavaScript. Currently, the survey is closed, but please stay tuned for the results which hopefully will provide valuable insights into the framework and its ecosystem. Also, don’t forget to take part in the 2023 edition next year!
Conclusions
React Native & Expo are our primary tools for developing mobile apps and it doesn’t look like that’s going to change. Our mission is to make React Native a better framework and we are proud to be a part of the ecosystem. We would like to thank Shopify for sponsoring our open source initiatives, Expo for a great partnership, React Native core team at Meta for their guidance and help, as well as the whole community for using our libraries, reporting issues, and submitting pull requests. 2022 was a great year for React Native and its open source and we can’t wait to deliver new features in 2023.
