Skip to content

Repository files navigation

react-native-boost: The React Native performance compiler

react-native-boost

npm version CI License: MIT

The React Native performance compiler.

React Native Boost analyzes your app at build time and automatically applies safe performance optimizations across your React Native code.

It eliminates unnecessary runtime work, replaces JavaScript abstractions with more efficient native equivalents, and fixes common performance pitfalls without requiring you to rewrite your application code.

  • Automatic build-time optimization — improve performance without manually tuning every component
  • 🧠 Static source analysis — detect optimization opportunities before your app even runs
  • 🏗️ Move runtime work to build time — precompute and simplify work whenever it can be determined at build time
  • 🛠️ Automatic performance fixes — correct common performance mistakes when they can be safely transformed
  • 🔒 Safe by default — optimizations are only applied when behavior can be preserved
  • 🪶 Minimal runtime overhead — optimizations happen entirely during compilation
  • 🧪 Use with your favorite tools — fully compatible with most other ecosystem tools including Expo

Documentation

The documentation is available at boost.kuatsu.de.

Benchmark

React Native Boost — iOS frame rate vs render load

See the benchmarks page for Android results and the full methodology.

Compatibility

react-native-boost React Native
0.x All versions
1.x >=0.83
2.x >=0.83

Current versions of React Native Boost are compatible with all React Native versions since 0.83. We test runtime behavior against all of these versions.

For older React Native versions, you can install react-native-boost@^0. Please note that we do not support this version anymore and, starting from React Native 0.80, it prints import deprecation warnings from React Native.

Installation

Install the package using your favorite package manager. Please do not install the package as a development dependency. While the Babel plugin itself would work as a development dependency, it relies on importing the runtime library (react-native-boost/runtime) into your code, which requires the package to be installed as a regular dependency. Read more here.

npm install react-native-boost
# or
yarn add react-native-boost

Then, add Boost to your Metro configuration (metro.config.js):

const { getDefaultConfig } = require('expo/metro-config'); // use `@react-native/metro-config` for non-Expo apps
const { withBoostConfig } = require('react-native-boost/metro');

module.exports = withBoostConfig(getDefaultConfig(__dirname));

If you don't see the metro.config.js file, run this command first:

npx expo customize metro.config.js

If you're using Unistyles, Nativewind, or a bundler other than Metro, see the documentation for setup instructions.

Finally, restart your React Native development server and clear the bundler cache:

npm start --clear
# or
yarn start --clear

That's it! No imports in your code, rebuilding, or anything else is required.

Optional configuration is described in the documentation.

How it works

A short overview of how the plugin works can be found in the documentation.

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

Built at Kuatsu

Kuatsu is a boutique React Native agency specialized on building highly performant React Native apps. Visit https://kuatsu.de to learn more about our work.

About

⚡️ The React Native performance compiler.

Resources

Code of conduct

Contributing

Stars

565 stars

Watchers

4 watching

Forks

Releases

Sponsor this project

Packages

Used by

Contributors

Languages