Migrate to Pro

Try Uniwind Pro Demo

See the C++ engine, ShadowTree updates, Reanimated animations, and native transitions in action. Clone the demo app (Uniwind Pro v1.6.0, Expo SDK 56 / RN 0.85.3) and run it on your iOS simulator. No account required.

Overview

Upgrading from Uniwind Free to Uniwind Pro is straightforward. The API is identical, so no code changes are required. Point your uniwind dependency at the Pro package and keep importing from 'uniwind'.

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
React Native 0.81+ (Expo SDK 54+ if you use Expo)
react-native-reanimated 4.0.0+ and react-native-worklets 0.6.0+
react-native-nitro-modules 0.37.1+ (required since Uniwind Pro 1.7.0)

See Compatibility for the full version matrix of each Uniwind Pro release.

Step 1: Install Uniwind Pro

Update the uniwind entry in your package.json to use the Pro package:

package.json

{
  "dependencies": {
    "uniwind": "^1.0.0", 
    "uniwind": "npm:uniwind-pro@latest", 
  }
}

Your imports stay the same (import { Uniwind } from 'uniwind'), because the alias installs Pro under the uniwind name. Then follow the Installation Guide to authenticate and configure Babel.

Installation Guide

Complete installation instructions including authentication and troubleshooting

Step 2: 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:

import { Pressable, Text, View } from 'react-native'

<View className="size-20 bg-blue-500 rounded-xl uw-entering-fade-in uw-exiting-fade-out" />

<Pressable className="p-4 bg-gray-100 rounded-xl active:bg-blue-500 transition-colors duration-500">
  <Text className="text-gray-900 animate-pulse">
    Animated with just classNames!
  </Text>
</Pressable>

See Reanimated Animations for all supported animation, transition and layout animation classes.

Group Variants

Tailwind’s group variants work natively. Mark a parent with group, use group-active:* or group-focus:* on descendants. State propagates through the C++ shadow tree without re-renders:

<Pressable className="group p-4 bg-base rounded-xl">
    <Text className="text-default group-active:text-primary">
        Press the card
    </Text>
    <View className="size-8 bg-blue-500 rounded group-active:bg-red-500" />
</Pressable>

See Group Variants for named groups and supported parents.

Built-in Safe Area Insets

Uniwind Pro automatically injects safe area insets from the native layer - no setup required. You can remove any SafeAreaListener configuration you had:

// ❌ 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 */}
  </>
)

You can 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.

What’s Next?

View Benchmarks

Compare performance improvements

Join Discussions

Connect with the community

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 the alias - Make sure package.json installs Pro as "uniwind": "npm:uniwind-pro@..." and that imports still use 'uniwind', not '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

Try Uniwind Pro Demo

Overview

Prerequisites

Step 1: Install Uniwind Pro

Installation Guide

Step 2: Rebuild Your App

What You Get with Pro

Shadow Tree Updates

Reanimated 4 Animations and Transitions

Group Variants

Built-in Safe Area Insets

Success!

What’s Next?

View Benchmarks

Join Discussions

Troubleshooting

Report an Issue

Try Uniwind Pro Demo

​Overview

​Prerequisites

​Step 1: Install Uniwind Pro

Installation Guide

​Step 2: Rebuild Your App

​What You Get with Pro

​Shadow Tree Updates

​Reanimated 4 Animations and Transitions

​Group Variants

​Built-in Safe Area Insets

​Success!

​What’s Next?

View Benchmarks

Join Discussions

​Troubleshooting

Report an Issue

Overview

Prerequisites

Step 1: Install Uniwind Pro

Step 2: Rebuild Your App

What You Get with Pro

Shadow Tree Updates

Reanimated 4 Animations and Transitions

Group Variants

Built-in Safe Area Insets

Success!

What’s Next?

Troubleshooting