What versions of Reanimated does this skill support?

This skill focuses on Reanimated 2 and 3, utilizing the modern Shared Value API, worklets, and useAnimatedStyle hooks.

How does this skill help with animation performance?

It provides patterns that ensure animations run on the UI thread, preventing frame drops caused by heavy JavaScript execution.

Does this skill work with Expo projects?

Yes, it includes patterns specifically compatible with Expo, including installation commands and babel configuration requirements.

Can it help with gesture-based interactions?

Yes, it includes boilerplate and logic for integrating React Native Gesture Handler with Reanimated for interactive, physics-based UI.

Reanimated Animation Patterns

Name: Reanimated Animation Patterns
Author: IvanTorresEdge

byIvanTorresEdge

0•

Mobile Development

Implements high-performance, 60fps React Native animations using standardized Reanimated and Gesture Handler patterns.

This skill provides specialized guidance for implementing complex, fluid animations in React Native applications using the Reanimated library. It simplifies the creation of gesture-based interactions, layout transitions, and high-performance UI thread animations by providing standardized patterns for shared values, animated styles, and interpolation. By leveraging worklets and UI-thread execution, this skill helps developers build professional-grade mobile interfaces that remain responsive under heavy interaction, ensuring optimal frame rates across both iOS and Android platforms.

Características Principales

01Entering, exiting, and layout transition presets

02Worklet-based custom animation implementation

03High-performance UI thread animation patterns

04Complex gesture-based interaction logic

05Shared value and animated style synchronization

060 GitHub stars

Casos de Uso

01Implementing interactive drag-and-drop or swipe-to-dismiss UI

02Building fluid onboarding carousels and screen transitions

03Optimizing list item transitions using Layout Animations

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add ivantorresedge/molcajete.ai reanimated-patterns

For use in Claude.ai and ChatGPT

Download Skill