Skip to main content

​
Overview

Diagnostics are designed for development only. They help you understand what’s happening under the hood when Uniwind Pro updates your styles.
Ever wondered what Uniwind Pro is doing behind the scenes? The Diagnostics API gives you a window into the Shadow Tree. See exactly when components register, unregister, and how styles flow through the C++ engine.

​
Enabling Diagnostics

import { enableDiagnostics } from 'uniwind/diagnostics'

enableDiagnostics({
    reportMounts: true,
    reportUnmounts: true,
    reportUpdates: true,
})
Once enabled, you’ll see this confirmation in your console: 
Uniwind: 🛠️ Diagnostics enabled!

​
What You Can Track

​
Component Mounts

When reportMounts is enabled, you’ll see every component that registers with the Shadow Tree: 
Uniwind (5): 🟢 ShadowNodeRegistered for tag 42 and className: "flex flex-1 items-center"
PartMeaning
(5)Total shadow nodes currently registered
🟢A new node was added
tag 42React Native’s internal view identifier
classNameThe Tailwind classes applied to this component

​
Component Unmounts

When reportUnmounts is enabled, you’ll see components leaving the Shadow Tree: 
Uniwind (4): 🟡 ShadowNodeUnregistered for tag 42
The count decreases as components are removed. Useful for detecting memory leaks or unexpected unmounts.

​
Style Updates

This is where it gets interesting. When reportUpdates is enabled, you’ll see exactly what styles are being applied and how: 
Uniwind 🌳 Performed shadow tree update for 198 nodes:
▶ 🔥 C++ updates (195):
    View (42) { backgroundColor: "#FF5733", opacity: 0.95 }
    Text (43) { color: "#FFFFFF", fontSize: 16 }
    // ... and 193 more nodes
▼ ✨ Native updates (3):
    Switch (978) { tintColor: "#0000FF", onTintColor: "#0000FF" }
    // ... and 2 more nodes
Updates are grouped into collapsible sections:
IconTypeDescription
🔥C++ updatesStyles applied directly via the Shadow Tree, zero re-renders
✨Native updatesProps updated directly on Native Views (Swift/Kotlin)

​
Configuration Options

OptionTypeDefaultDescription
reportMountsbooleanfalseLog when components register with the Shadow Tree
reportUnmountsbooleanfalseLog when components unregister from the Shadow Tree
reportUpdatesbooleanfalseLog style updates with detailed property changes
Enable only what you need. Logging everything on a complex screen can get noisy.

​
Common Use Cases

​
Debugging Theme Switches

Enable reportUpdates to see all styles that change when switching themes: 
enableDiagnostics({ reportUpdates: true })
Then trigger a theme change and watch the console. You’ll see every component that updates and exactly what properties changed.

​
Detecting Memory Leaks

All styled views are stored in C++. Enable mount tracking to verify components are properly cleaned up: 
enableDiagnostics({
    reportMounts: true,
    reportUnmounts: true
})
Navigate away from a screen and check if all nodes are unregistered. If the count in (5) doesn’t drop to zero when expected, you might have a memory leak.
If you suspect a memory leak in Uniwind Pro, create an issue with the diagnostics output attached.

​
Verifying Zero Re-renders

Both C++ updates (🔥) and Native updates (✨) are applied without triggering React re-renders. If you see your styles in these logs, Uniwind Pro is working as expected.

​
Platform Support

PlatformSupport
iOSFull diagnostics
AndroidFull diagnostics
WebNo-op (function exists but produces no output)
Diagnostics only work on native platforms. On web, the enableDiagnostics function is a stub that does nothing.

Shadow Tree Updates

Learn how Uniwind Pro updates styles without re-renders

Theme Transitions

Add smooth animated transitions between themes