Migrate to Pro

Overview

Upgrading from Uniwind Free to Uniwind Pro is straightforward. The API is identical, so no code changes are required - just install the Pro package and configure a few dependencies.

API Compatibility: Uniwind Pro maintains 100% API compatibility with the free version. Your existing code will work without modifications.

Prerequisites

Before upgrading to Pro, ensure you have an active Uniwind Pro license.

Installation

Step 1: Install dependencies

Install Uniwind Pro along with its required dependencies:

WIP 🚧

Uniwind Pro requires React Native Reanimated v4 or higher. Make sure you’re using a compatible version.

Step 2: Configure Babel

Add the react-native-worklets/plugin to your babel.config.js:

babel.config.js

module.exports = {
  // your presets and other configs
  plugins: [
    // other plugins
    'react-native-worklets/plugin',   
  ],
};

The react-native-worklets/plugin must be listed in the plugins array to work correctly.

If you’re already using Reanimated, you may already have react-native-reanimated/worklets in your config.

Step 3: Authenticate with GitHub

Run the Uniwind Pro CLI to authenticate your installation:

WIP 🚧

You’ll see the following menu:

  _   _       _          _           _   ____
 | | | |_ __ (_)_      _(_)_ __   __| | |  _ \ _ __ ___
 | | | | '_ \| \ \ /\ / / | '_ \ / _` | | |_) | '__/ _ \
 | |_| | | | | |\ V  V /| | | | | (_| | |  __/| | | (_) |
  \___/|_| |_|_| \_/\_/ |_|_| |_|\__,d| |_|   |_|  \___/


? What would you like to do?
❯ Login with Github
  Buy Uniwind Pro
  Exit

Select “Login with Github”:

A browser tab will automatically open
Sign in with your GitHub account
Authorize the application
Wait for the success message: “You can close this tab and return to the terminal.”

After successful authentication, you’ll see a confirmation in your terminal:

? Hello @your-username, what would you like to do?
  Your session is valid for the next 179 days
────────────────────────────────────────────
❯ Manage your account
  Install Uniwind Pro
  Logout
  Exit

Your authentication session is valid for 180 days. After that, you’ll need to re-authenticate.

Step 4: Install Uniwind Pro package

From the CLI menu, select “Install Uniwind Pro”:

? Hello @your-username, what would you like to do?
  Your session is valid for the next 179 days
────────────────────────────────────────────
  Manage your account
❯ Install Uniwind Pro
  Logout
  Exit

The CLI will automatically fetch and install the Uniwind Pro package from the CDN, matching the version of the uniwind-pro CLI tool.

The installation process automatically handles version compatibility, ensuring you get the correct Pro version for your CLI.

Step 5: Update imports

Automatic
Manual

WIP 🚧

Replace all uniwind references with uniwind-pro throughout your codebase.

JavaScript/TypeScript imports

Find and replace:

Find: from 'uniwind'
Replace with: from 'uniwind-pro'

Before
After

import { useUniwind } from 'uniwind'
import { withUniwind } from 'uniwind'
import { useCSSVariable } from 'uniwind'
import { useResolveClassNames } from 'uniwind'

import { useUniwind } from 'uniwind-pro'
import { withUniwind } from 'uniwind-pro'
import { useCSSVariable } from 'uniwind-pro'
import { useResolveClassNames } from 'uniwind-pro'

Use your code editor’s “Find and Replace” feature (usually Cmd/Ctrl + Shift + F) to quickly update all imports across your project.

global.css

Update your CSS entry file:

global.css

@import 'tailwindcss';
@import 'uniwind'; 
@import 'uniwind-pro'; 

Bundler config

Metro
Vite

Update your metro.config.js:

metro.config.js

const { withUniwindConfig } = require('uniwind/metro'); 
const { withUniwindConfig } = require('uniwind-pro/metro'); 

Update your vite.config.ts:

vite.config.ts

import { uniwind } from 'uniwind/vite'
import { uniwind } from 'uniwind-pro/vite'

TypeScript types

The uniwind-types.d.ts file will be regenerated automatically. Just restart your Metro server to pick up the new types:

npx expo start --clear
# or
npx react-native start --reset-cache

Step 6: Remove free version

Uninstall the free version of Uniwind from your project:

bun
yarn
npm

bun remove uniwind

yarn remove uniwind

npm uninstall uniwind

After removing uniwind, make sure to delete it from your package.json to avoid any conflicts between the free and Pro versions.

Step 7: Rebuild your app

Rebuild your native app to apply all changes:

Expo
Bare React Native

npx expo prebuild --clean

Then run your app:

npx expo run:ios
# or
npx expo run:android

For iOS, install pods:

cd ios && pod install && cd ..

Then run your app:

npx react-native run-ios
# or
npx react-native run-android

A native rebuild is required for Uniwind Pro to work correctly. Simply restarting Metro is not enough. Uniwind Pro doesn’t work with Expo Go.

What You Get with Pro

Uniwind Pro unlocks powerful features that take your React Native styling to the next level:

Shadow Tree Updates

All component props are connected directly to the C++ engine, eliminating unnecessary re-renders and dramatically improving performance.

No code changes required - This optimization works automatically with all your existing components.

Reanimated 4 Animations and Transitions

Use Tailwind CSS class names to create smooth animations without any extra code. Uniwind Pro automatically constructs animated views and properties.

import { View } from 'react-native'

// Animations work automatically with Tailwind class names
<View className="animate-fade-in duration-300 ease-in-out">
  <Text className="animate-slide-up delay-100">
    Animated with just classNames!
  </Text>
</View>

All Tailwind 4 animation utilities work out of the box. No need to manually configure Reanimated or write animation code.

Built-in Safe Area Insets

Uniwind Pro automatically injects safe area insets from the native layer - no setup required. If you previously configured SafeAreaListener to wire insets manually, you can now remove it:

// ❌ Remove this setup - no longer needed with Pro
import { SafeAreaListener } from 'react-native-safe-area-context'
import { Uniwind } from 'uniwind'

export const Root = () => (
  <SafeAreaListener
    onChange={({ insets }) => {
      Uniwind.updateInsets(insets)
    }}
  >
    {/* app content */}
  </SafeAreaListener>
)

// ✅ With Pro, just render your app directly
export const Root = () => (
  <>
    {/* app content */}
  </>
)

All safe area classNames (pt-safe, pb-safe, inset-safe, etc.) work exactly the same - they’re now powered by C++ for better performance.

You can also remove react-native-safe-area-context from your dependencies if you were only using it for Uniwind insets.

🎉 Success!

Congratulations! You’ve successfully upgraded to Uniwind Pro. Your app is now running with enhanced performance and all the Pro features.

What’s Next?

View Benchmarks

Compare performance improvements

Join Discussions

Connect with the community

CI/CD Authentication

For automated builds in CI/CD pipelines, you can generate a token that skips manual GitHub authentication. Sign in to your Uniwind dashboard to create a CI/CD token.

CI/CD tokens allow your build pipelines to install Uniwind Pro without interactive authentication.

Managing Team Access

Team seats and member access can be managed from your Uniwind dashboard. From there you can:

Add or remove team members
View active seats and usage
Generate CI/CD tokens
Manage billing and subscription

Troubleshooting

If you encounter any issues during migration:

Clear all caches - Run npx expo start --clear or npx react-native start --reset-cache
Verify Babel config - Ensure react-native-worklets/plugin is in your plugins array
Check imports - Make sure all imports are updated from 'uniwind' to 'uniwind-pro'
Rebuild native app - Delete ios/build and android/build folders, then rebuild

Report an Issue

Still having problems? Open an issue on GitHub and we’ll help you out

Pro users receive priority support. Make sure to mention you’re a Pro user when reporting issues.

Getting started

API

Theming

Overview

Prerequisites

Installation

Step 1: Install dependencies

Step 2: Configure Babel

Step 3: Authenticate with GitHub

Step 4: Install Uniwind Pro package

Step 5: Update imports

JavaScript/TypeScript imports

global.css

Bundler config

TypeScript types

Step 6: Remove free version

Step 7: Rebuild your app

What You Get with Pro

Shadow Tree Updates

Reanimated 4 Animations and Transitions

Built-in Safe Area Insets

🎉 Success!

What’s Next?

View Benchmarks

Join Discussions

CI/CD Authentication

Managing Team Access

Troubleshooting

Report an Issue

Getting started

API

Theming

​Overview

​Prerequisites

​Installation

​Step 1: Install dependencies

​Step 2: Configure Babel

​Step 3: Authenticate with GitHub

​Step 4: Install Uniwind Pro package

​Step 5: Update imports

​JavaScript/TypeScript imports

​global.css

​Bundler config

​TypeScript types

​Step 6: Remove free version

​Step 7: Rebuild your app

​What You Get with Pro

​Shadow Tree Updates

​Reanimated 4 Animations and Transitions

​Built-in Safe Area Insets

​🎉 Success!

​What’s Next?

View Benchmarks

Join Discussions

​CI/CD Authentication

​Managing Team Access

​Troubleshooting

Report an Issue

Overview

Prerequisites

Installation

Step 1: Install dependencies

Step 2: Configure Babel

Step 3: Authenticate with GitHub

Step 4: Install Uniwind Pro package

Step 5: Update imports

JavaScript/TypeScript imports

global.css

Bundler config

TypeScript types

Step 6: Remove free version

Step 7: Rebuild your app

What You Get with Pro

Shadow Tree Updates

Reanimated 4 Animations and Transitions

Built-in Safe Area Insets

🎉 Success!

What’s Next?

CI/CD Authentication

Managing Team Access

Troubleshooting