Shadow Tree Updates

Overview

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.

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.

Uniwind Pro is built on the 2nd generation Unistyles C++ engine, a new and improved version that powers the shadow tree update mechanism.

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.

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.

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

All views update atomically in the same frame. No partial states, no flickering.

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.

View

Prop	Description
`className`	Main styles

Text

Prop	Description
`className`	Main styles
`selectionColorClassName`	Text selection highlight color

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

Image

Prop	Description
`className`	Main styles
`tintColorClassName`	Image tint color

ImageBackground

Prop	Description
`className`	Main styles
`tintColorClassName`	Image tint color

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)

ActivityIndicator

Prop	Description
`className`	Main styles
`colorClassName`	Spinner color

Button

Prop	Description
`className`	Main styles
`colorClassName`	Button color

Modal

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)

ScrollView

Prop	Description
`className`	Main styles
`contentContainerClassName`	Content container styles
`endFillColorClassName`	End fill color (Android)

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)

SectionList

Prop	Description
`className`	Main styles
`contentContainerClassName`	Content container styles
`ListHeaderComponentClassName`	Header component styles
`ListFooterComponentClassName`	Footer component styles
`endFillColorClassName`	End fill color (Android)

VirtualizedList

Prop	Description
`className`	Main styles
`contentContainerClassName`	Content container styles
`ListHeaderComponentClassName`	Header component styles
`ListFooterComponentClassName`	Footer component styles
`endFillColorClassName`	End fill color (Android)

KeyboardAvoidingView

Prop	Description
`className`	Main styles
`contentContainerClassName`	Content container styles

Pressable

Prop	Description
`className`	Main styles (supports `pressed:`, `disabled:` variants)

TouchableOpacity

Prop	Description
`className`	Main styles

TouchableWithoutFeedback

Prop	Description
`className`	Main styles

TouchableNativeFeedback

Prop	Description
`className`	Main styles (supports `pressed:`, `disabled:` variants)

SafeAreaView

Prop	Description
`className`	Main styles

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

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

Theme Transitions

Add smooth animated transitions when switching themes

Unistyles

Learn more about the C++ engine powering Uniwind Pro

Releases

Features

Licensing

Shadow Tree Updates

Overview

The Traditional Re-render Problem

How Uniwind Pro Updates Views

Supported Components

Components Requiring Re-renders

Summary

Theme Transitions

Unistyles

Prop	Description
`className`	Main styles
`backdropColorClassName`	Backdrop/overlay color

Releases

Features

Licensing

​Overview

​The Traditional Re-render Problem

​How Uniwind Pro Updates Views

​Supported Components

​Components Requiring Re-renders

​Summary

​Related

Theme Transitions

Unistyles

Overview

The Traditional Re-render Problem

How Uniwind Pro Updates Views

Supported Components

Components Requiring Re-renders

Summary

Related