Connect Reanimated to your Goodspeed app
UI-thread animations powering swipe gestures, shared-element transitions, and spring physics in every Goodspeed app. Goodspeed wires Reanimated into every app that needs it at generation time, so you start with a working integration, not a blank config and a documentation tab.
WHAT GETS WIRED IN
Built into every Reanimated build
Every app Goodspeed generates with Reanimated includes these wired integrations from the first build. No manual setup required.
| Item | Description | Strength |
|---|---|---|
| useSharedValue and withSpring/withTiming/withSequence drive all animated values without React re-renders per frame | useSharedValue and withSpring/withTiming/withSequence drive all animated values without React re-renders per frame | 01 |
| GestureDetector wraps swipeable cards, pull-to-refresh overrides, and drag-to-dismiss modals | GestureDetector wraps swipeable cards, pull-to-refresh overrides, and drag-to-dismiss modals | 02 |
| useAnimatedStyle computes derived transform and opacity from shared values on the UI thread for 60fps performance | useAnimatedStyle computes derived transform and opacity from shared values on the UI thread for 60fps performance | 03 |
| FadeInDown and SlideInRight layout animation presets animate list items and cards on screen mount | FadeInDown and SlideInRight layout animation presets animate list items and cards on screen mount | 04 |
Source: gas-template repository · animation
REAL GENERATED CODE
A snippet from a Reanimated integration the pipeline ships
This pattern comes directly from the gas-template codebase. The studio generates Reanimated integration code like this for every app that includes it, not a placeholder you have to fill in yourself.
Spring-driven card
// components/ui/AnimatedCard.tsx 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
APPS THAT USE REANIMATED
Where this integration ships
These app types include 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
- Build a Dating App appNiche dating apps out-retain generic ones because they attract users who share a real identity. Goodspeed generates a dating app with profile matching, chat, safety reporting, and the community-specifDATING APP
START WITH REANIMATED