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

# Shadow Tree Updates

> Update any React Native style prop with zero re-renders

## Overview

<Tip>
  **No code changes required.** The C++ engine starts working automatically when you install Uniwind Pro. Your existing components will benefit from shadow tree updates without any modifications.
</Tip>

Uniwind Pro allows you to update any React Native style prop without triggering component re-renders. It leverages direct Shadow Tree updates to inject styles without waking up React. By creating a direct, optimized highway between your classNames and the native layer, we eliminate rendering lag entirely.

<Info>
  Uniwind Pro is built on the **2nd generation [Unistyles](https://unistyl.es) C++ engine**, a new and improved version that powers the shadow tree update mechanism.
</Info>

## The Traditional Re-render Problem

In standard React Native, these scenarios trigger component re-renders:

| Trigger                          | What happens                                                                     |
| -------------------------------- | -------------------------------------------------------------------------------- |
| `useColorScheme()`               | Component subscribes to system appearance changes and re-renders when it changes |
| Theme Context Provider           | All consumers re-render when context value updates                               |
| `Appearance.addChangeListener()` | Manual subscription requires state update, which triggers re-render              |

This creates a cascade of re-renders through the component tree, with each component recalculating styles and passing new props down.

<Warning>
  Without Pro, switching themes causes every themed component to re-render sequentially. This leads to visible flickering and the "rainbow" effect where components update at different times.
</Warning>

## How Uniwind Pro Updates Views

Uniwind Pro bypasses React's reconciliation entirely for style changes:

```
Runtime detects change (theme, color scheme, orientation, etc.)
        ↓
Uniwind recalculates styles for affected classes
        ↓
C++ core applies mutations directly
        ↓
Native views update instantly — no React re-render
```

<Tip>
  All views update atomically in the same frame. No partial states, no flickering.
</Tip>

## Supported Components

The following components support shadow tree updates with no re-renders. All components support `className` for the main style, and additional props use the `{propName}ClassName` pattern.

<AccordionGroup>
  <Accordion title="View">
    | Prop        | Description |
    | ----------- | ----------- |
    | `className` | Main styles |
  </Accordion>

  <Accordion title="Text">
    | Prop                      | Description                    |
    | ------------------------- | ------------------------------ |
    | `className`               | Main styles                    |
    | `selectionColorClassName` | Text selection highlight color |
  </Accordion>

  <Accordion title="TextInput">
    | Prop                             | Description                      |
    | -------------------------------- | -------------------------------- |
    | `className`                      | Main styles                      |
    | `cursorColorClassName`           | Cursor/caret color               |
    | `selectionColorClassName`        | Text selection highlight color   |
    | `selectionHandleColorClassName`  | Selection handle color (Android) |
    | `underlineColorAndroidClassName` | Underline color (Android)        |
    | `placeholderTextColorClassName`  | Placeholder text color           |
  </Accordion>

  <Accordion title="Image">
    | Prop                 | Description      |
    | -------------------- | ---------------- |
    | `className`          | Main styles      |
    | `tintColorClassName` | Image tint color |
  </Accordion>

  <Accordion title="ImageBackground">
    | Prop                 | Description      |
    | -------------------- | ---------------- |
    | `className`          | Main styles      |
    | `tintColorClassName` | Image tint color |
  </Accordion>

  <Accordion title="Switch">
    | Prop                           | Description            |
    | ------------------------------ | ---------------------- |
    | `className`                    | Main styles            |
    | `thumbColorClassName`          | Thumb/knob color       |
    | `trackColorOnClassName`        | Track color when on    |
    | `trackColorOffClassName`       | Track color when off   |
    | `ios_backgroundColorClassName` | Background color (iOS) |
  </Accordion>

  <Accordion title="ActivityIndicator">
    | Prop             | Description   |
    | ---------------- | ------------- |
    | `className`      | Main styles   |
    | `colorClassName` | Spinner color |
  </Accordion>

  <Accordion title="Button">
    | Prop             | Description  |
    | ---------------- | ------------ |
    | `className`      | Main styles  |
    | `colorClassName` | Button color |
  </Accordion>

  <Accordion title="Modal">
    | Prop                     | Description            |
    | ------------------------ | ---------------------- |
    | `className`              | Main styles            |
    | `backdropColorClassName` | Backdrop/overlay color |
  </Accordion>

  <Accordion title="RefreshControl">
    | Prop                               | Description                    |
    | ---------------------------------- | ------------------------------ |
    | `className`                        | Main styles                    |
    | `tintColorClassName`               | Spinner tint color (iOS)       |
    | `titleColorClassName`              | Title text color (iOS)         |
    | `progressBackgroundColorClassName` | Progress background (Android)  |
    | `colorsClassName`                  | Spinner colors array (Android) |
  </Accordion>

  <Accordion title="ScrollView">
    | Prop                        | Description              |
    | --------------------------- | ------------------------ |
    | `className`                 | Main styles              |
    | `contentContainerClassName` | Content container styles |
    | `endFillColorClassName`     | End fill color (Android) |
  </Accordion>

  <Accordion title="FlatList">
    | Prop                           | Description                            |
    | ------------------------------ | -------------------------------------- |
    | `className`                    | Main styles                            |
    | `contentContainerClassName`    | Content container styles               |
    | `columnWrapperClassName`       | Column wrapper styles (numColumns > 1) |
    | `ListHeaderComponentClassName` | Header component styles                |
    | `ListFooterComponentClassName` | Footer component styles                |
    | `endFillColorClassName`        | End fill color (Android)               |
  </Accordion>

  <Accordion title="SectionList">
    | Prop                           | Description              |
    | ------------------------------ | ------------------------ |
    | `className`                    | Main styles              |
    | `contentContainerClassName`    | Content container styles |
    | `ListHeaderComponentClassName` | Header component styles  |
    | `ListFooterComponentClassName` | Footer component styles  |
    | `endFillColorClassName`        | End fill color (Android) |
  </Accordion>

  <Accordion title="VirtualizedList">
    | Prop                           | Description              |
    | ------------------------------ | ------------------------ |
    | `className`                    | Main styles              |
    | `contentContainerClassName`    | Content container styles |
    | `ListHeaderComponentClassName` | Header component styles  |
    | `ListFooterComponentClassName` | Footer component styles  |
    | `endFillColorClassName`        | End fill color (Android) |
  </Accordion>

  <Accordion title="KeyboardAvoidingView">
    | Prop                        | Description              |
    | --------------------------- | ------------------------ |
    | `className`                 | Main styles              |
    | `contentContainerClassName` | Content container styles |
  </Accordion>

  <Accordion title="Pressable">
    | Prop        | Description                                             |
    | ----------- | ------------------------------------------------------- |
    | `className` | Main styles (supports `pressed:`, `disabled:` variants) |
  </Accordion>

  <Accordion title="TouchableOpacity">
    | Prop        | Description |
    | ----------- | ----------- |
    | `className` | Main styles |
  </Accordion>

  <Accordion title="TouchableWithoutFeedback">
    | Prop        | Description |
    | ----------- | ----------- |
    | `className` | Main styles |
  </Accordion>

  <Accordion title="TouchableNativeFeedback">
    | Prop        | Description                                             |
    | ----------- | ------------------------------------------------------- |
    | `className` | Main styles (supports `pressed:`, `disabled:` variants) |
  </Accordion>

  <Accordion title="SafeAreaView">
    | Prop        | Description |
    | ----------- | ----------- |
    | `className` | Main styles |
  </Accordion>
</AccordionGroup>

### Components Requiring Re-renders

Some React Native components cannot use shadow tree updates due to their internal implementation:

| Component            | Reason                                              |
| -------------------- | --------------------------------------------------- |
| `InputAccessoryView` | No shadow node exposed by React Native              |
| `TouchableHighlight` | Uses internal React state to manage `underlayColor` |

These components use the `useResolveClassNames` hook which subscribes to UniwindListener and triggers React re-renders when dependencies change.

## Summary

| Approach          | Re-renders                 | Update Speed | Flickering |
| ----------------- | -------------------------- | ------------ | ---------- |
| Traditional React | Every themed component     | Sequential   | Yes        |
| Uniwind Pro       | None (for most components) | Single frame | No         |

<Info>
  Uniwind Pro achieves single-frame theme updates by bypassing React's reconciliation entirely for style changes, resulting in smoother transitions and better performance.
</Info>

## Related

<CardGroup cols={2}>
  <Card title="Theme Transitions" icon="wand-magic-sparkles" href="/pro/theme-transitions">
    Add smooth animated transitions when switching themes
  </Card>

  <Card title="Unistyles" icon="code" href="https://unistyl.es">
    Learn more about the C++ engine powering Uniwind Pro
  </Card>
</CardGroup>