Skill v1.0.1

currentAutomated scan100/100

khadinakbarlabs/expo-mobile-app-builder/add-reanimated

+4 new

──Details

PublishedNovember 5, 2026 at 12:40 AM

Content Hashsha256:b24b8f744d580aed...

Git SHAa8684147ae3d

Bump Typepatch

Compare with v1.0.0

──Files

Files (1 file, 1.9 KB)

SKILL.md1.9 KBactive

SKILL.md · 78 lines · 1.9 KB

name: "add-reanimated" description: "Add Reanimated 4 for spring animations, gestures, shared element transitions. Use when the user says 'animations', 'Reanimated', 'spring animation', 'gesture handler', 'shared element'." metadata: version: "1.0.1"

Add Reanimated

React Native Reanimated 4 (stable July 2025, New Architecture only). CSS-style declarative animations + worklets.

Install

bash

npm exec --no -- expo install react-native-reanimated react-native-gesture-handler react-native-worklets

Add to babel.config.js:

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: ['react-native-worklets/plugin'],  // MUST be last
  };
};

Spring animation

tsx

import Animated, { useSharedValue, useAnimatedStyle, withSpring } from 'react-native-reanimated';
function HeartButton() {
  const scale = useSharedValue(1);
  const animatedStyle = useAnimatedStyle(() => ({
    transform: [{ scale: scale.value }],
  }));
  const handlePress = () => {
    scale.value = withSpring(1.4, { damping: 8 }, () => {
      scale.value = withSpring(1);
    });
  };
  return (
    <Pressable onPress={handlePress}>
      <Animated.View style={animatedStyle}>
        <Image source={require('./heart.png')} />
      </Animated.View>
    </Pressable>
  );
}

Gesture

tsx

import { GestureDetector, Gesture } from 'react-native-gesture-handler';
const drag = Gesture.Pan().onUpdate((e) => {
  translateX.value = e.translationX;
}).onEnd(() => {
  translateX.value = withSpring(0);
});
<GestureDetector gesture={drag}>
  <Animated.View style={[styles.card, animatedStyle]} />
</GestureDetector>

Reduce Motion respect

tsx

import { AccessibilityInfo } from 'react-native';
const reduceMotion = await AccessibilityInfo.isReduceMotionEnabled();
scale.value = reduceMotion ? withTiming(1.4, { duration: 0 }) : withSpring(1.4);

Reference

references/01-expo-sdk-54.md

← v1.0.0 All versions