Skip to content
Native Animation
Checkout Stepper animation preview

This preview uses fictional demo content. See the props below for the customization options available in this component.

npx nativeanimation add checkout-stepper
Stepper

Checkout Stepper

A four-step checkout with animated progress and configurable cart items, shipping options, gradient colors, and fonts.

$9 for this animation

Add to your project

Copy the component and its assets into your app with the Native Animation CLI, or paste the agent prompt into Claude Code, Codex or Cursor once the MCP server is connected.

About this animation

A four-step checkout with animated progress and configurable cart items, shipping options, gradient colors, and fonts.

Why this one

Most checkout steppers only swap screens and recolor dots. This version uses one continuous value for the connector fill, number-to-check morph, active ring, content direction, blur, stagger, and adaptive card height. A persistent order strip keeps the cart visible, paid shipping rolls into every total, and the final action compresses into a focused progress state before an expanding confirmation ring and fine particles celebrate success.

How it works

  1. A single Reanimated shared value moves continuously from 0 through 3.
  2. Each connector clips a fixed brand gradient, avoiding animated gradient props on web.
  3. Step circles derive their fill, focus scale, number fade, and drawn Lucide check from the same progress.
  4. All four content panels remain mounted; the outgoing panel clears before the incoming panel enters from the opposite direction with a short blur seam.
  5. The card and fixed order strip adapt to compact and tall phone layouts without leaving the primary action stranded.
  6. Shipping and total amounts roll between values from one shared selection state.
  7. The order action hides its label before it becomes too narrow, then morphs from a pill to a spinner and check before the confirmation burst appears.

Install

npx expo install expo-linear-gradient @shopify/react-native-skia react-native-reanimated react-native-worklets

Icons: Lucide (ISC).

Usage

import { CheckoutStepper } from './checkout-stepper';

export function Checkout() {
  return <CheckoutStepper total="$86.40" />;
}

With content and personality knobs:

<CheckoutStepper
  brandName="Tidewell"
  accentStart="#2DD4BF"
  accentEnd="#0F766E"
  address="418 Alder St, Portland, OR 97209"
  orderNumber="TW-20481"
  onOrderPlaced={() => submitOrder()}
/>

Props

PropTypeDefaultDescription
brandNamestring'Store'Brand name shown in the checkout header.
titlestring'Checkout'Checkout title.
itemsCheckoutItem[]DEFAULT_ITEMSBag items.
addressstring'418 Alder St, Portland, OR 97209'Shipping address.
shippingOptionsShippingOption[]DEFAULT_SHIPPINGAvailable shipping methods.
paymentOptionsPaymentOption[]DEFAULT_PAYMENTSAvailable payment methods.
totalstring'$86.40'Total with free shipping; paid shipping is added when selected.
orderNumberstring'OR-20481'Order confirmation number.
accentStartstring'#2DD4BF'Brand gradient start color.
accentEndstring'#0F766E'Brand gradient end color.
fontFamilystringundefinedMain interface font family.
mediumFontFamilystringundefinedMedium interface font family.
brandFontFamilystringundefinedEditorial brand font family.
monoFontFamilystringundefinedMonospaced font family for prices and order numbers.
onStepChange( index: number, ) => voidundefinedCalled after the active checkout step changes.
onOrderPlaced() => voidundefinedCalled when the order confirmation finishes.
onBack() => voidundefinedCalled when Back is pressed on the first step.
accessibilityLabelstring'Checkout progress'Accessible label for the flow.
styleStyleProp<ViewStyle>undefinedOptional style for the outer container.
testIDstringundefinedTest identifier applied to the outer container.
durationnumber760Order placement spinner cycle in milliseconds. Spring physics and reduced-motion timing are unchanged.

The forwarded ref exposes next(), previous(), goTo(index), reset(), placeOrder(), selectShipping(index), and selectPayment(index).

Compatibility

  • Expo SDK 58, React Native 0.88, Reanimated 4.7, and Skia 2.14.
  • iOS: supported.
  • Android: supported.
  • Web: supported.
  • Works in Expo Go with the listed Expo-compatible packages.

Accessibility

Every step, option, navigation control, and primary action has a role, label, and state. Completed steps are reachable with 44-point targets, and changing amounts announce one current value instead of their visual rolling layers. Reduced Motion updates the connector and content immediately, removes directional travel and particles, and keeps the confirmation to a short fade.

Customization notes

Use accentStart and accentEnd for the checkout gradient.

More animations