React Native Reanimated Code Generator

This skill helps developers generate efficient animation code using React Native Reanimated. It supports both version 3 and version 4 of the library, catering to various project architectures.

000Updated 1mo ago

Animation

Quick InstallView Source

$ npx skills add https://github.com/estevg/skills --skill creating-reanimated-animations

Overview

About This Skill

This skill provides comprehensive guidance for creating performant animations in React Native using Reanimated, supporting both v3 and v4. It includes core animation patterns, API references, and real-world component examples like accordions, bottom sheets, and parallax scrolling. The skill automatically activates when you ask about React Native animations, gestures, transitions, or layout effects, offering step-by-step patterns for timing, spring, decay, and sequenced animations. Developers benefit from version-aware recommendations, gesture handler integration patterns, and worklet usage guidance that adapts to their project architecture.

How to Use

Install using the given npx command and follow the setup instructions for the appropriate Reanimated version.

Use Cases

Create animations for React Native apps

Support both legacy and new architecture projects

Improve performance of animations with optimized code

Setup & Installation

Quick Install

Terminal

$ npx skills add https://github.com/estevg/skills --skill creating-reanimated-animations

Alternative Install (Git Clone)

git clone https://github.com/estevg/skills

Requirements

Claude Code or compatible AI agent

Quick Start Guide

Install the Skill

Copy the install command above and run it in your terminal.

Open Your AI Agent

Launch Claude Code, Cursor, or your preferred AI coding agent.

Try It Out

Use the prompt template or examples below to test the skill.

Customize

Adapt the skill to your specific use case and workflow.

Usage Examples

Prompt Template

Generate React Native Reanimated animation code for [VERSION] to create a [ANIMATION_TYPE] animation in a [PLATFORM] app. The animation should [ANIMATION_DESCRIPTION]. Use best practices for performance and readability. Target [COMPANY]'s [INDUSTRY] use case with [DATA] as the primary data source. Include setup instructions and comments for clarity.

Example Output

```javascript
// React Native Reanimated v3 Animation Example
// Pulled from a fitness tracking app's dashboard

import React, { useEffect } from 'react';
import { View, StyleSheet } from 'react-native';
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withTiming,
  Easing,
  runOnJS
} from 'react-native-reanimated';

const HeartRateAnimation = () => {
  const heartRate = 72; // Current user's heart rate in BPM
  const targetRate = 85; // Target heart rate for workout
  const progress = useSharedValue(0);

  useEffect(() => {
    progress.value = withTiming(
      Math.min(heartRate / targetRate, 1),
      {
        duration: 1500,
        easing: Easing.out(Easing.exp),
      }
    );
  }, []);

  const animatedStyle = useAnimatedStyle(() => ({
    width: `${progress.value * 100}%`,
    backgroundColor: progress.value > 0.7 ? '#FF5252' : '#4CAF50',
  }));

  return (
    <View style={styles.container}>
      <View style={styles.labelContainer}>
        <Animated.Text style={styles.label}>Heart Rate Progress</Animated.Text>
        <Animated.Text style={styles.value}>{Math.round(progress.value * targetRate)} BPM</Animated.Text>
      </View>
      <View style={styles.progressBar}>
        <Animated.View style={[styles.progress, animatedStyle]} />
      </View>
      <View style={styles.stats}>
        <Text style={styles.statText}>Current: {heartRate} BPM</Text>
        <Text style={styles.statText}>Target: {targetRate} BPM</Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 20,
    backgroundColor: '#f5f5f5',
    borderRadius: 10,
    margin: 10,
  },
  labelContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginBottom: 10,
  },
  label: {
    fontSize: 16,
    fontWeight: 'bold',
    color: '#333',
  },
  value: {
    fontSize: 16,
    fontWeight: 'bold',
    color: '#4CAF50',
  },
  progressBar: {
    height: 20,
    backgroundColor: '#ddd',
    borderRadius: 10,
    overflow: 'hidden',
  },
  progress: {
    height: '100%',
    borderRadius: 10,
  },
  stats: {
    marginTop: 15,
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  statText: {
    fontSize: 14,
    color: '#666',
  },
});

export default HeartRateAnimation;
```

Apply to these tools

Browse all tools

Native

Automate your social media content creation and management.

ICRON AI-Native Decision Execution Hub

End-to-End Supply Chain Planning Software for Complex, Regulated Industries

Compatible MCP servers

Browse all MCP servers

Find the right skills for your stack

Take a free 3-minute scan and get personalized AI skill recommendations.

Take free scan

Overview

About This Skill

How to Use

Install using the given npx command and follow the setup instructions for the appropriate Reanimated version.

Use Cases

Create animations for React Native apps

Support both legacy and new architecture projects

Improve performance of animations with optimized code

Quick Install

Terminal

$ npx skills add https://github.com/estevg/skills --skill creating-reanimated-animations

Alternative Install (Git Clone)

git clone https://github.com/estevg/skills

Requirements

Claude Code or compatible AI agent

Quick Start Guide

Install the Skill

Copy the install command above and run it in your terminal.

Open Your AI Agent

Launch Claude Code, Cursor, or your preferred AI coding agent.

Try It Out

Use the prompt template or examples below to test the skill.

Customize

Adapt the skill to your specific use case and workflow.

Usage Examples

Prompt Template

Generate React Native Reanimated animation code for [VERSION] to create a [ANIMATION_TYPE] animation in a [PLATFORM] app. The animation should [ANIMATION_DESCRIPTION]. Use best practices for performance and readability. Target [COMPANY]'s [INDUSTRY] use case with [DATA] as the primary data source. Include setup instructions and comments for clarity.

Example Output

```javascript
// React Native Reanimated v3 Animation Example
// Pulled from a fitness tracking app's dashboard

import React, { useEffect } from 'react';
import { View, StyleSheet } from 'react-native';
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withTiming,
  Easing,
  runOnJS
} from 'react-native-reanimated';

const HeartRateAnimation = () => {
  const heartRate = 72; // Current user's heart rate in BPM
  const targetRate = 85; // Target heart rate for workout
  const progress = useSharedValue(0);

  useEffect(() => {
    progress.value = withTiming(
      Math.min(heartRate / targetRate, 1),
      {
        duration: 1500,
        easing: Easing.out(Easing.exp),
      }
    );
  }, []);

  const animatedStyle = useAnimatedStyle(() => ({
    width: `${progress.value * 100}%`,
    backgroundColor: progress.value > 0.7 ? '#FF5252' : '#4CAF50',
  }));

  return (
    <View style={styles.container}>
      <View style={styles.labelContainer}>
        <Animated.Text style={styles.label}>Heart Rate Progress</Animated.Text>
        <Animated.Text style={styles.value}>{Math.round(progress.value * targetRate)} BPM</Animated.Text>
      </View>
      <View style={styles.progressBar}>
        <Animated.View style={[styles.progress, animatedStyle]} />
      </View>
      <View style={styles.stats}>
        <Text style={styles.statText}>Current: {heartRate} BPM</Text>
        <Text style={styles.statText}>Target: {targetRate} BPM</Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 20,
    backgroundColor: '#f5f5f5',
    borderRadius: 10,
    margin: 10,
  },
  labelContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginBottom: 10,
  },
  label: {
    fontSize: 16,
    fontWeight: 'bold',
    color: '#333',
  },
  value: {
    fontSize: 16,
    fontWeight: 'bold',
    color: '#4CAF50',
  },
  progressBar: {
    height: 20,
    backgroundColor: '#ddd',
    borderRadius: 10,
    overflow: 'hidden',
  },
  progress: {
    height: '100%',
    borderRadius: 10,
  },
  stats: {
    marginTop: 15,
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  statText: {
    fontSize: 14,
    color: '#666',
  },
});

export default HeartRateAnimation;
```

React Native Reanimated Code Generator

Overview

About This Skill

How to Use

Use Cases

Tags

Setup & Installation

Quick Install

Alternative Install (Git Clone)

Requirements

Quick Start Guide

Install the Skill

Open Your AI Agent

Try It Out

Customize

Usage Examples

Prompt Template

Example Output

Apply to these tools

Native

ICRON AI-Native Decision Execution Hub

Compatible MCP servers

Native MCP Client Server

MCP Apple Notes

Claude Notification Server

Token Minter MCP

Find the right skills for your stack

React Native Reanimated Code Generator

Overview

About This Skill

How to Use

Use Cases

Tags

Setup & Installation

Quick Install

Alternative Install (Git Clone)

Requirements

Quick Start Guide

Install the Skill

Open Your AI Agent

Try It Out

Customize

Usage Examples

Prompt Template

Example Output

Apply to these tools

Native

ICRON AI-Native Decision Execution Hub

Compatible MCP servers

Native MCP Client Server

MCP Apple Notes

Claude Notification Server

Token Minter MCP

Find the right skills for your stack