Deft
Ask AI

Search

Search skills, authors and topics

vercel-labs / agent-skills

vercel-react-native-skills

React Native and Expo best practices for building performant mobile apps. Use when building React Native components, optimizing list performance, implementing animations, or working with native modules. Triggers on tasks involving React Native, Expo, mobile performance, or native platform APIs.

View sourceExpoReact NativePerformanceMotion

Install

npx skills add https://github.com/vercel-labs/agent-skills --skill vercel-react-native-skills
title
Use .get() and .set() for Reanimated Shared Values (not .value)
impact
LOW
impactDescription
required for React Compiler compatibility
tags
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):

tsx
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):

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