fix: use animated theme with scoped themes

[jpudysz]

Summary

Fixes #1177

Summary by CodeRabbit

• Bug Fixes
  • Improved theme synchronization in animated components to properly handle scoped themes and prevent redundant updates in context-specific scenarios.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
react-native-unistyles-2.0	Ready	Preview, Comment	Apr 24, 2026 2:05pm
react-native-unistyles-docs	Ready	Preview, Comment	Apr 24, 2026 2:05pm

[coderabbitai]

Walkthrough

The useAnimatedTheme hook in both native and standard implementations now derives and tracks scoped themes from UnistylesShadowRegistry. The hook initializes the Reanimated shared value with the scoped theme, synchronizes state when the scoped theme changes, and conditionally prevents overwriting the shared value with the global theme when a scoped theme is active.

Changes

Cohort / File(s)	Summary
Scoped Theme Support packages/unistyles/src/reanimated/useAnimatedTheme.native.ts, packages/unistyles/src/reanimated/useAnimatedTheme.ts	Added derivation of scoped theme from UnistylesShadowRegistry, initialization of Reanimated shared value with scoped theme context, state/shared value synchronization on scoped theme changes, conditional theme update logic to prevent global theme overwrite when scoped theme is active, and effect subscription recreation on scope changes.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• PR #778: Initial implementation of the useAnimatedTheme hook that these changes extend with scoped theme support.
• PR #1161: Addresses scoped theme initialization in the native registry layer, complementing the JS-side scoped theme handling in this PR.
• PR #1175: Implements the same scopedTheme-first retrieval pattern to prevent fallback to global theme when scoped context exists.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and concisely summarizes the main change: fixing useAnimatedTheme to work with scoped themes, which directly addresses issue #1177.
Linked Issues check	✅ Passed	The PR modifications fully address the linked issue #1177: useAnimatedTheme now derives and respects the scoped theme from UnistylesShadowRegistry instead of always returning the root theme.
Out of Scope Changes check	✅ Passed	All changes in both files are directly related to fixing useAnimatedTheme to follow ScopedTheme; no unrelated modifications were introduced.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feature/use-animated-theme

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@packages/unistyles/src/reanimated/useAnimatedTheme.native.ts`:
- Around line 20-30: The change listener in useEffect currently returns early
when scopedTheme is truthy, preventing updates; remove the guard that checks
scopedTheme inside the StyleSheet.addChangeListener callback so that when
changedDependencies includes UnistyleDependency.Theme you always call
theme.set(UnistylesRuntime.getTheme()) (i.e. update the logic around
StyleSheet.addChangeListener in useEffect to not skip refreshes when scopedTheme
is present).

In `@packages/unistyles/src/reanimated/useAnimatedTheme.ts`:
- Around line 21-28: The hook currently ignores theme events when scopedTheme is
truthy, preventing later scoped-theme updates from reaching animated consumers;
in the useEffect listener callback (where services.listener.addListeners is
registered for UnistyleDependency.Theme) remove the early return that checks
scopedTheme and always call theme.set(UnistylesRuntime.getTheme()) on each event
so the runtime-resolved theme (via UnistylesRuntime.getTheme) refreshes animated
consumers even inside ScopedTheme.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 8d2e52ec-19f7-49d6-b9c3-2a9360146aa1

📥 Commits

Reviewing files that changed from the base of the PR and between 993430a and 081d10a.

📒 Files selected for processing (2)

• packages/unistyles/src/reanimated/useAnimatedTheme.native.ts
• packages/unistyles/src/reanimated/useAnimatedTheme.ts