Skip to content
Skip to content
Goodspeed

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.

ItemDescriptionStrength
useSharedValue and withSpring/withTiming/withSequence drive all animated values without React re-renders per frameuseSharedValue and withSpring/withTiming/withSequence drive all animated values without React re-renders per frame01
GestureDetector wraps swipeable cards, pull-to-refresh overrides, and drag-to-dismiss modalsGestureDetector wraps swipeable cards, pull-to-refresh overrides, and drag-to-dismiss modals02
useAnimatedStyle computes derived transform and opacity from shared values on the UI thread for 60fps performanceuseAnimatedStyle computes derived transform and opacity from shared values on the UI thread for 60fps performance03
FadeInDown and SlideInRight layout animation presets animate list items and cards on screen mountFadeInDown and SlideInRight layout animation presets animate list items and cards on screen mount04

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.

  1. 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>
      );
    }
GDaily Allergens

Today's log

Gluten
Tree nuts
Shellfish
Dairy
HomeScanLogProfile

START WITH REANIMATED

Your Reanimated integration, generated