> ## Documentation Index
> Fetch the complete documentation index at: https://docs.uniwind.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Migrate to Pro

> Upgrade from Uniwind Free to Uniwind Pro

<Card title="Try Uniwind Pro Demo" icon="rocket" href="https://github.com/uni-stack/uniwind-pro-demo">
  See the C++ engine, ShadowTree updates, and native transitions in action. Clone the demo app (Expo SDK 54 / RN 0.83.5) and run it on your iOS simulator. No account required.
</Card>

## 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 update your imports.

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

## Prerequisites

Before upgrading to Pro, ensure you have an active Uniwind Pro [license](/pro/get-license).

## Step 1: Install Uniwind Pro

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

```json package.json theme={null}
{
  "dependencies": {
    "uniwind": "^1.0.0", // [!code --]
    "uniwind": "npm:uniwind-pro@latest", // [!code ++]
  }
}
```

Then follow the [Installation Guide](/pro/installation) to authenticate and configure Babel.

<Card title="Installation Guide" icon="download" href="/pro/installation">
  Complete installation instructions including authentication and troubleshooting
</Card>

## Step 2: Rebuild Your App

Rebuild your native app to apply all changes:

<Tabs>
  <Tab title="Expo">
    ```bash theme={null}
    npx expo prebuild --clean
    ```

    Then run your app:

    ```bash theme={null}
    npx expo run:ios
    # or
    npx expo run:android
    ```
  </Tab>

  <Tab title="Bare React Native">
    For iOS, install pods:

    ```bash theme={null}
    cd ios && pod install && cd ..
    ```

    Then run your app:

    ```bash theme={null}
    npx react-native run-ios
    # or
    npx react-native run-android
    ```
  </Tab>
</Tabs>

<Warning>
  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.
</Warning>

## 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.

<Info>
  **No code changes required** - This optimization works automatically with all your existing components.
</Info>

### Reanimated 4 Animations and Transitions

Use Tailwind CSS class names to create smooth animations without any extra code:

```tsx theme={null}
import { View } from 'react-native'

<View className="animate-fade-in duration-300 ease-in-out">
  <Text className="animate-slide-up delay-100">
    Animated with just classNames!
  </Text>
</View>
```

### 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:

```tsx theme={null}
<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](/pro/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:

```tsx theme={null}
// ❌ 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>
)
```

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

<Tip>
  You can remove `react-native-safe-area-context` from your dependencies if you were only using it for Uniwind insets.
</Tip>

## Success!

Congratulations! You've successfully upgraded to Uniwind Pro.

### What's Next?

<CardGroup cols={2}>
  <Card title="View Benchmarks" icon="chart-line" href="https://github.com/uni-stack/uniwind-benchmarks">
    Compare performance improvements
  </Card>

  <Card title="Join Discussions" icon="comments" href="https://github.com/uni-stack/uniwind/discussions">
    Connect with the community
  </Card>
</CardGroup>

## Troubleshooting

If you encounter any issues during migration:

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

<Card title="Report an Issue" icon="github" href="https://github.com/uni-stack/uniwind/issues">
  Still having problems? Open an issue on GitHub and we'll help you out
</Card>

<Note>
  Pro users receive **priority support**. Make sure to mention you're a Pro user when reporting issues.
</Note>