Introducing Fabric to react-native-screens
If you follow the news from React Native world you for sure have heard about Fabric — the new React Native architecture. It has been in use for quite some time internally at Facebook and now the core team decided to tackle its broader, open source adoption. With the upcoming 0.68 release of React Native, switching to the new architecture will be as easy as flipping one constant in your project, which will finally make it easy for anyone to try it out. However, migrating to Fabric may not be possible for everyone from day zero, as many React Native projects depend on additional libraries that need to be adapted to the new architecture as well. This is specifically relevant for libraries that provide additional system-native capabilities or expose platform-specific native components. We hope to see a big push towards the adoption of Fabric among the most popular React Native community projects. As Software Mansion — authors of a number of popular React Native libraries we want to announce our commitment to porting the projects we maintain and lead Fabric adoption efforts by example so as to enable the new architecture for every React Native application as soon as possible.
Today, we are publishing the first version of react-native-screens library that is compatible with Fabric. It is not only the first Fabric-compatible version of this very popular project (installed 70% as often as react-native from NPM), but the first native component library compatible with the new React Native architecture overall. In this post we discuss what it takes to port an existing library with native code to Fabric and present our approach. We also present how you can use react-native-screens today with your first Fabric app if you are interested in playing with the new architecture. Finally, if you maintain a React Native package of your own, we hope this article will inspire you to look into migrating it to Fabric and give you a good idea of the process — for this purpose we share links to the code changes and PRs that address specific parts of the migration. We’d be happy if you “steal” the project configuration and the ideas we present here in order to get other libraries ready for Fabric.
Use react-native-screens with Fabric today
The most recent React Native’s release candidate (0.68) allows you to flip the switch and enable Fabric architecture in your project. This kind of setting aims to help make the migration process to Fabric incremental. People who are willing to upgrade the React Native version can safely do so without really thinking about Fabric. Once the app including its dependencies is ready for the new architecture, it can be turned on for their project. React Native core supports both the old and the new architecture. As a consequence however, this is also how libraries should handle that. If we want to make the transition seamless, the existing packages should provide a similar level of compatibility. This is exactly how version 3.12 of react-native-screens library has been prepared. You can use it with any compatible version of React Native via the old architecture, or you can flip the new architecture switch in the 0.68 React Native app and use it via Fabric.
Easiest way to get started
In order to test react-native-screens implementation with both new and old architecture, we created an example application in our main GitHub repo that is configured with Fabric. The easiest way to test it, is by pulling react-native-screens from GitHub and following the instructions from FabricExample folder in the repo.
Making your first Fabric app with react-native-screens
As mentioned before, turning on Fabric is as easy as flipping one flag prior to building the app. You may try that after upgrading your existing app to 0.68, but below we describe a process for creating a fresh react-native project:
- Create new app using React Native CLI:
npx react-native init NewRN68App --version 0.68.0-rc.1 - Add react-native-screens the same way as usual:
yarn add react-native-screens - Now, to enable Fabric on iOS, you need to run
RCT_NEW_ARCH_ENABLED=1 pod installin theiosfolder. - For Android, you need to change
newArchEnabled=trueinandroid/gradle.properties - Now you can proceed to build the app as usual on both Android and iOS. The installed version of screens will automatically detect whether Fabric is enabled and will serve an appropriate implementation.
Note that Fabric implementation of react-native-screens does not support all the available attributes just yet. If you want to know why that is, read on to the next section.
An overview of the migration process
On the architecture level, Fabric introduces a new interface for JavaScript code to interact with the native core. Instead of using the bridge, all of the communication between native and JS components is done via JSI (C++ API for interacting with the JS VM). The information from one side to another is transferred using C++ functions instead of being serialized/deserialized in order to be passed over the bridge. Because of that, libraries which aim to support the new architecture need to adapt to this new interface. Using it is relatively straightforward when you want to build a completely new library or set of native components (we discuss some of the details later), however, adapting Fabric to the existing library presents some additional challenges. Specifically, we want to be able to support both Fabric and non-Fabric versions with as much shared code between these two implementations as possible. This would allow us to be able to improve the library and fix bugs, and while doing so, offer people who can migrate to Fabric and to those who can’t, an equal level of support.
Below, we discuss the main steps behind the migration process for an existing library. The goal is to be able to distribute a single version of the library that can work with both Fabric and old RN architecture without additional setup for the user — that is, the only thing we expect is for the application to specify whether it should build with Fabric or not, and based on that serve an appropriate configuration of the library.
The first thing we did was writing components specifications in Flow — a dialect of JS. This code is a source of truth for the application. It provides the specification used on both native and JS side. This code is also used to generate native implementation, thus ensuring type safety between the two. Next, we converted some of our native code to work well with Fabric. In this step we added implementations that handle props and events. On Android the codebase is shared between old and new architecture. On iOS we needed to create new files, thus making two implementations independent. In order to keep the library compatible with both architectures, we have a number of files/classes that are specific to a given architecture. In some of the cases we decided to branch out small portions of the code with architecture checks, as sometimes it made more sense to us to share the majority of a given file or class and only have small architecture-specific fragments — we do this in both the JS and the native codebases.
The migration process is gradual for us. We started from implementing base Screens features and decided to add more later. Now that we have published a minimal version of the library we will focus on making all the functions Fabric-compatible.
If you want to dive more deeply into out changes, we divided them into several PRs:
- JS and iOS base changes
- Android base changes
- Improving Android installation process
- Fixing pop animation (work in progress)
- All the changes
Software Mansion & Shopify
As this is the first big release for us this year, we wanted to use this opportunity to thank Shopify for their help on our React Native-related efforts. Third year in a row we partner on improving the React Native ecosystem by building and maintaining essential open source libraries. One of the main objectives for this year is to enable broader adoption of the new architecture, and this release of react-native-screens library is just the first of many steps in that direction we are going to make thanks to the support from Shopify.
What’s next
The release of Fabric-compatible version of react-native-screens is a big milestone on the community’s way to adapting the new React Native architecture. We hope for more library maintainers to follow, and are happy to share our experience to make that happen. If you maintain a library or plan to migrate your project to Fabric, don’t hesitate to reach out to us! The Open Source team at Software Mansion is committed to work on porting all libraries that we currently maintain in the near future, so stay tuned for more updates and make sure to follow us on Twitter.
