React Compiler

React Compiler is a build-time tool that automatically optimizes your React app. To integrate Unistyles with React Compiler, proper configuration is essential.

With Expo

For Expo projects, simply follow the official Expo guide. No additional configuration changes are necessary!

With Bare React Native

For bare React Native projects, refer to the official React guide with one key adjustment:

Ensure that the React Compiler runs after the Unistyles Babel plugin. Failure to do so may result in errors because Unistyles needs to process Variants before the React Compiler does. You can read more about the Babel plugin here.

Here’s a sample configuration for your babel.config.js:

babel.config.js

module.exports = function () {
  return {
    plugins: [
      ['react-native-unistyles/plugin'], // Must run before react-compiler
     'babel-plugin-react-compiler',
      // Add other plugins here
    ]
  }
}