Skip to main content

React Native Boost

React Native Boost is a powerful library that can improve your React Native app's performance by statically analyzing your code and applying micro-optimizations. It consists of two parts:

  • A Babel plugin that analyzes the AST of your code and replaces standard React Native components with their underlying, more performant native counterparts.
  • A runtime library that is used by the Babel plugin to apply optimizations that can only be applied at runtime.

The code analyzer is built to be very strict when it comes to where it applies optimizations. It will try to only apply optimizations that are guaranteed to not break the app or affect its behavior. If something does break, you're able to disable specific optimizations on a file-by-file or even line-by-line basis, ensuring the plugin can be adapted to your needs.

warning

The library and its Babel plugin are still experimental. You should expect things to break. Please report any issues you encounter to the GitHub repository with reproducible examples, and use the library's ignore mechanisms to disable optimizations for problematic files or lines of code.

Getting Started​

Installation and setup is a very simple process:

  1. Install the library and its dependencies using your favorite package manager (do not install the package as a dev dependency1):
npm install react-native-boost
# or
yarn add react-native-boost
  1. If you're using Expo and don't have a babel.config.js file, run the following command:
npx expo customize babel.config.js
  1. Add the Babel plugin to your project:
// babel.config.js
module.exports = {
  plugins: ['react-native-boost/plugin'],
};
  1. Restart your React Native development server and clear the bundler cache:
npm start --clear
# or
yarn start --clear

That's it! You do not need to import React Native Boost into your code, install native dependencies, or do anything else. The plugin will now ✨ automagically ✨ optimize your code.

1 While the Babel plugin itself would work as a dev dependency, the plugin requires that the runtime library can be imported from the app. The native components used by the plugin are not imported directly from react-native, but rather from the runtime library which re-exports them to avoid issues with non-native platforms like react-native-web.

Platform Support​

React Native Boost is compatible with all common platforms that React Native supports, including iOS, Android, and Web. However, optimizations are only applied on native platforms supporting the native components that React Native Boost uses. On other platforms such as Web, all optimizations fall back to the standard React Native components.