Files
agent-skills/skills/vercel-react-native-skills/rules/react-compiler-reanimated-shared-values.md
Jason Woltje f5792c40be feat: Complete fleet — 94 skills across 10+ domains
Pulled ALL skills from 15 source repositories:
- anthropics/skills: 16 (docs, design, MCP, testing)
- obra/superpowers: 14 (TDD, debugging, agents, planning)
- coreyhaines31/marketingskills: 25 (marketing, CRO, SEO, growth)
- better-auth/skills: 5 (auth patterns)
- vercel-labs/agent-skills: 5 (React, design, Vercel)
- antfu/skills: 16 (Vue, Vite, Vitest, pnpm, Turborepo)
- Plus 13 individual skills from various repos

Mosaic Stack is not limited to coding — the Orchestrator and
subagents serve coding, business, design, marketing, writing,
logistics, analysis, and more.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-16 16:27:42 -06:00

1.2 KiB

title, impact, impactDescription, tags
title impact impactDescription tags
Use .get() and .set() for Reanimated Shared Values (not .value) LOW required for React Compiler compatibility reanimated, react-compiler, shared-values

Use .get() and .set() for Shared Values with React Compiler

With React Compiler enabled, use .get() and .set() instead of reading or writing .value directly on Reanimated shared values. The compiler can't track property access—explicit methods ensure correct behavior.

Incorrect (breaks with React Compiler):

import { useSharedValue } from 'react-native-reanimated'

function Counter() {
  const count = useSharedValue(0)

  const increment = () => {
    count.value = count.value + 1 // opts out of react compiler
  }

  return <Button onPress={increment} title={`Count: ${count.value}`} />
}

Correct (React Compiler compatible):

import { useSharedValue } from 'react-native-reanimated'

function Counter() {
  const count = useSharedValue(0)

  const increment = () => {
    count.set(count.get() + 1)
  }

  return <Button onPress={increment} title={`Count: ${count.get()}`} />
}

See the Reanimated docs for more.