# Mobile React Native Reanimated

> Imported TRAE skill from mobile/React_Native_Reanimated.md Use when this capability is needed.

- Skill: `tomevault-io/mobile-react-native-reanimated` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/mobile-react-native-reanimated`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/mobile-react-native-reanimated/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/mobile-react-native-reanimated

---


# Skill: React Native Reanimated

## Purpose
To create high-performance, smooth (60fps+) animations and interactions in React Native by running animation logic on the UI thread.

## When to Use
- When `Animated` API from React Native is too slow or stutters.
- For complex gestures (drag, pinch, swipe).
- For shared element transitions.

## Procedure

### 1. Setup
1.  **Install**:
    ```bash
    npm install react-native-reanimated
    ```
2.  **Babel Plugin**: Add `react-native-reanimated/plugin` to `babel.config.js` (must be listed **last**).
    ```javascript
    plugins: [
      // other plugins...
      'react-native-reanimated/plugin',
    ],
    ```
3.  **Clear Cache**: `npx expo start -c`.

### 2. Basic Animation (Shared Values)
1.  **Define Value**: Use `useSharedValue`.
    ```tsx
    const width = useSharedValue(100);
    ```
2.  **Define Style**: Use `useAnimatedStyle`.
    ```tsx
    const animatedStyle = useAnimatedStyle(() => {
      return { width: width.value };
    });
    ```
3.  **Render**: Use `Animated.View`.
    ```tsx
    <Animated.View style={[styles.box, animatedStyle]} />
    ```
4.  **Trigger**: Update value with utility functions.
    ```tsx
    width.value = withSpring(200);
    // or withTiming(200, { duration: 500 })
    ```

### 3. Gestures
Combine with `react-native-gesture-handler`.
- Use `GestureDetector` to modify shared values based on touch events.

## Constraints
- **UI Thread Only**: You cannot run complex JS logic inside `useAnimatedStyle` (unless using `runOnJS`).
- **Debugging**: Errors on the UI thread can be harder to trace; use `console.log` carefully or `runOnJS` for debugging.

## Expected Output
Fluid animations that do not block the Javascript thread, providing a "native" feel.

---
> Source: [Ditto190/crispy-nextjs-turborepo-monorepo](https://github.com/Ditto190/crispy-nextjs-turborepo-monorepo) — distributed by [TomeVault](https://tomevault.io).
<!-- tomevault:4.0:skill_md:2026-05-22 -->