import React, { useState } from "react"; import { View, Text, Pressable, StyleSheet, useColorScheme, ViewStyle, TextStyle, } from "react-native"; import Animated, { useSharedValue, useAnimatedStyle, withTiming, withRepeat, withSequence, useReducedMotion, } from "react-native-reanimated"; // ─── Theme tokens ───────────────────────────────────────────────────────────── function useThemeColors() { const scheme = useColorScheme(); const dark = scheme === "dark"; return { // Surfaces cardBg: dark ? "#18181b" : "#ffffff", placeholderBg: dark ? "#27272a" : "#f4f4f5", placeholderBorder: dark ? "#3f3f46" : "#e4e4e7", // Step circle stepInactiveBorder: dark ? "#52525b" : "#d4d4d8", stepInactiveText: dark ? "#71717a" : "#a1a1aa", stepActiveBg: "#14b8a6", stepActiveBorder: "#14b8a6", stepActiveText: "#ffffff", // Connector connectorTrack: dark ? "#3f3f46" : "#e4e4e7", connectorFill: "#14b8a6", // Pulse halo haloBg: "#14b8a6", // Buttons prevBg: dark ? "#27272a" : "#f4f4f5", prevText: dark ? "#e4e4e7" : "#18181b", nextBg: dark ? "#ffffff" : "#18181b", nextText: dark ? "#18181b" : "#ffffff", disabledOpacity: 0.4, }; } // ─── Step indicator ─────────────────────────────────────────────────────────── function Step({ num, isActive }: { num: number; isActive: boolean }) { const colors = useThemeColors(); const reduceMotion = useReducedMotion(); const pulse = useSharedValue(1); React.useEffect(() => { if (isActive && !reduceMotion) { pulse.value = withRepeat( withSequence( withTiming(1.3, { duration: 600 }), withTiming(1, { duration: 600 }) ), -1, true ); } else { pulse.value = withTiming(1, { duration: 200 }); } }, [isActive, reduceMotion]); const pulseStyle = useAnimatedStyle(() => ({ transform: [{ scale: pulse.value }], opacity: isActive ? 0.35 : 0, })); return ( {/* Pulse halo */} {/* Circle */} {isActive ? ( ✓ ) : ( {num} )} ); } // ─── Connector bar ──────────────────────────────────────────────────────────── function StepConnector({ isActive }: { isActive: boolean }) { const colors = useThemeColors(); const reduceMotion = useReducedMotion(); const progress = useSharedValue(isActive ? 1 : 0); React.useEffect(() => { progress.value = withTiming(isActive ? 1 : 0, { duration: reduceMotion ? 0 : 300, }); }, [isActive, reduceMotion]); const fillStyle = useAnimatedStyle(() => ({ width: `${progress.value * 100}%`, })); return ( ); } // ─── Steps row ──────────────────────────────────────────────────────────────── function Steps({ numSteps, stepsComplete, }: { numSteps: number; stepsComplete: number; }) { const stepArray = Array.from(Array(numSteps).keys()); return ( {stepArray.map((num) => { const stepNum = num + 1; const isActive = stepNum <= stepsComplete; return ( {stepNum !== stepArray.length && ( )} ); })} ); } // ─── Main component ─────────────────────────────────────────────────────────── export default function SteppedProgress() { const [stepsComplete, setStepsComplete] = useState(0); const numSteps = 4; const colors = useThemeColors(); function handleSetStep(num: -1 | 1) { if ( (stepsComplete === 0 && num === -1) || (stepsComplete === numSteps && num === 1) ) { return; } setStepsComplete((pv) => pv + num); } const prevDisabled = stepsComplete === 0; const nextDisabled = stepsComplete === numSteps; return ( {/* Steps */} {/* Content placeholder */} {/* Navigation */} handleSetStep(-1)} disabled={prevDisabled} style={[ styles.btn, { backgroundColor: colors.prevBg }, prevDisabled && styles.btnDisabled, ]} > Prev handleSetStep(1)} disabled={nextDisabled} style={[ styles.btn, { backgroundColor: colors.nextBg }, nextDisabled && styles.btnDisabled, ]} > Next ); } // ─── Styles ─────────────────────────────────────────────────────────────────── const styles = StyleSheet.create({ // Root root: { flex: 1, alignItems: "center", justifyContent: "center", paddingHorizontal: 16, paddingVertical: 56, } as ViewStyle, // Card card: { width: "100%", maxWidth: 672, borderRadius: 12, padding: 24, gap: 24, shadowColor: "#000", shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.1, shadowRadius: 12, elevation: 6, } as ViewStyle, // Steps row stepsRow: { flexDirection: "row", alignItems: "center", gap: 8, } as ViewStyle, // Step wrapper stepWrapper: { position: "relative", alignItems: "center", justifyContent: "center", } as ViewStyle, // Pulse halo halo: { position: "absolute", width: 52, height: 52, borderRadius: 26, } as ViewStyle, // Step circle circle: { width: 40, height: 40, borderRadius: 20, borderWidth: 2, alignItems: "center", justifyContent: "center", zIndex: 10, } as ViewStyle, // Checkmark text checkmark: { fontSize: 16, fontWeight: "700", } as TextStyle, // Step number stepNum: { fontSize: 13, fontWeight: "600", } as TextStyle, // Connector track connectorTrack: { flex: 1, height: 4, borderRadius: 2, overflow: "hidden", position: "relative", } as ViewStyle, // Connector fill connectorFill: { position: "absolute", top: 0, bottom: 0, left: 0, borderRadius: 2, } as ViewStyle, // Content placeholder placeholder: { height: 192, borderRadius: 8, borderWidth: 2, borderStyle: "dashed", } as ViewStyle, // Nav row navRow: { flexDirection: "row", alignItems: "center", justifyContent: "flex-end", gap: 8, } as ViewStyle, // Button base btn: { paddingHorizontal: 16, paddingVertical: 8, borderRadius: 8, } as ViewStyle, // Button disabled btnDisabled: { opacity: 0.4, } as ViewStyle, // Button text btnText: { fontSize: 14, fontWeight: "500", } as TextStyle, });

Progress

Multistep Progress