Build apps with React Native Reanimated
react-native-reanimated powers all animations in Goodspeed apps: shared element transitions, gesture-driven drags, and spring physics running on the UI thread. Goodspeed generates React Native Reanimated as a standard part of every app, so the output is a working codebase from day one, not a scaffold you have to finish yourself.
WHAT GETS GENERATED
Built into every React Native Reanimated build
Every app Goodspeed generates with React Native Reanimated includes these production-ready patterns, wired together from the first build.
| Item | Description | Strength |
|---|---|---|
| Shared value hooks with useSharedValue | Animated values are declared with useSharedValue and driven by withSpring, withTiming, and withSequence. No setState calls means no React re-renders per animation frame. | Performance |
| Gesture handlers with GestureDetector | react-native-gesture-handler GestureDetector wraps swipeable cards, pull-to-refresh overrides, and drag-to-dismiss modals. | Gestures |
| useAnimatedStyle for derived styles | useAnimatedStyle computes animated transform and opacity from shared values. The derived styles run on the UI thread, keeping 60fps even on mid-range devices. | Performance |
| Entrance animations on screen mount | List items and cards animate in with FadeInDown and SlideInRight from the reanimated layout animations preset, giving screens a polished first-render feel. | UX |
Source: gas-template repository · Animations
REAL GENERATED CODE
A snippet from a React Native Reanimated app the studio shipped
This pattern comes directly from the gas-template codebase, the foundation every Goodspeed app is generated on. The studio generates React Native Reanimated code like this for every app in the pipeline, not just a hello-world scaffold.
Spring animation
// components/ui/AnimatedCard.tsx: spring-driven scale import Animated, { useSharedValue, useAnimatedStyle, withSpring } from 'react-native-reanimated'; import { Gesture, GestureDetector } from 'react-native-gesture-handler'; export function AnimatedCard({ children }: { children: React.ReactNode }) { const scale = useSharedValue(1); const animatedStyle = useAnimatedStyle(() => ({ transform: [{ scale: scale.value }] }) ); const tap = Gesture.Tap() .onBegin(() => { scale.value = withSpring(0.97); }) .onFinalize(() => { scale.value = withSpring(1); }); return ( <GestureDetector gesture={tap}> <Animated.View style={animatedStyle}>{children}</Animated.View> </GestureDetector> ); }
Today's log
USE CASES BUILT ON REACT NATIVE REANIMATED
Where this stack ships
These app types use React Native Reanimated as part of the generated stack. Each link goes to a full spec page with capabilities, scored ideas, and a pipeline walkthrough.
- Build a Fitness Tracker appBuilding a fitness tracker means wiring together daily logging, progress charts, Apple Health, and push reminders. Goodspeed generates all of that in a single build, not a patchwork of tutorials. The FITNESS TRACKER APP
- Build a Social App appBuilding a social app from scratch means solving hard infrastructure problems: real-time feeds, fan-out writes, notification delivery, and content moderation hooks. Goodspeed generates a complete sociSOCIAL APP
START WITH REACT NATIVE REANIMATED