@dubsdotapp/expo 0.1.2 → 0.1.3

package/src/ui/AuthGate.tsx

@@ -7,6 +7,11 @@ import {
   ActivityIndicator,
   StyleSheet,
   Keyboard,
+  KeyboardAvoidingView,
+  Platform,
+  Image,
+  Animated,
+  ScrollView,
 } from 'react-native';
 import { useAuth } from '../hooks';
 import { useDubs } from '../provider';
@@ -14,32 +19,41 @@ import { useDubsTheme } from './theme';
 import type { AuthStatus } from '../types';
 import type { DubsClient } from '../client';
 
+// ── Avatar Helpers ──
+
+const DICEBEAR_STYLES = [
+  'adventurer',
+  'avataaars',
+  'fun-emoji',
+  'bottts',
+  'big-smile',
+  'thumbs',
+];
+
+function generateSeed(): string {
+  return Math.random().toString(36).slice(2, 10);
+}
+
+function getAvatarUrl(style: string, seed: string, size = 256): string {
+  return `https://api.dicebear.com/9.x/${style}/png?seed=${seed}&size=${size}`;
+}
+
 // ── Public Types ──
 
 export interface RegistrationScreenProps {
-  /** Called when the user submits registration */
-  onRegister: (username: string, referralCode?: string) => void;
-  /** Whether a registration request is in flight */
+  onRegister: (username: string, referralCode?: string, avatarUrl?: string) => void;
   registering: boolean;
-  /** Error from the last registration attempt, or null */
   error: Error | null;
-  /** DubsClient instance for checkUsername() availability checks */
   client: DubsClient;
 }
 
 export interface AuthGateProps {
   children: React.ReactNode;
-  /** Persist or clear the JWT token (called with null on logout) */
   onSaveToken: (token: string | null) => void | Promise<void>;
-  /** Load a previously persisted JWT token */
   onLoadToken: () => string | null | Promise<string | null>;
-  /** Custom loading screen (receives current auth status) */
   renderLoading?: (status: AuthStatus) => React.ReactNode;
-  /** Custom error screen (receives the error and a retry callback) */
   renderError?: (error: Error, retry: () => void) => React.ReactNode;
-  /** Custom registration screen */
   renderRegistration?: (props: RegistrationScreenProps) => React.ReactNode;
-  /** App name shown in default screens. Defaults to "Dubs" */
   appName?: string;
 }
 
@@ -59,53 +73,35 @@ export function AuthGate({
   const [phase, setPhase] = useState<'init' | 'active'>('init');
   const [registrationPhase, setRegistrationPhase] = useState(false);
 
-  // Kick off the auth flow on mount
   useEffect(() => {
     let cancelled = false;
-
     (async () => {
       try {
         const savedToken = await onLoadToken();
         if (cancelled) return;
-
         if (savedToken) {
           const restored = await auth.restoreSession(savedToken);
           if (cancelled) return;
-          if (restored) {
-            setPhase('active');
-            return;
-          }
-          // Token invalid — clear it
+          if (restored) { setPhase('active'); return; }
           await onSaveToken(null);
         }
-
         if (cancelled) return;
         setPhase('active');
-        // No valid session — start fresh authentication
         await auth.authenticate();
       } catch {
         if (!cancelled) setPhase('active');
       }
     })();
-
-    return () => {
-      cancelled = true;
-    };
+    return () => { cancelled = true; };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  // Track when we enter the registration phase
   useEffect(() => {
-    if (auth.status === 'needsRegistration') {
-      setRegistrationPhase(true);
-    }
+    if (auth.status === 'needsRegistration') setRegistrationPhase(true);
   }, [auth.status]);
 
-  // Persist token when authentication or registration completes
   useEffect(() => {
-    if (auth.token) {
-      onSaveToken(auth.token);
-    }
+    if (auth.token) onSaveToken(auth.token);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [auth.token]);
 
@@ -116,41 +112,26 @@ export function AuthGate({
   }, [auth]);
 
   const handleRegister = useCallback(
-    (username: string, referralCode?: string) => {
-      auth.register(username, referralCode);
+    (username: string, referralCode?: string, avatarUrl?: string) => {
+      auth.register(username, referralCode, avatarUrl);
     },
     [auth],
   );
 
-  // ── Render Logic ──
+  // ── Render ──
 
-  // Phase 1: Loading saved token
   if (phase === 'init') {
     if (renderLoading) return <>{renderLoading('authenticating')}</>;
     return <DefaultLoadingScreen status="authenticating" appName={appName} />;
   }
 
-  // Authenticated — render app
-  if (auth.status === 'authenticated') {
-    return <>{children}</>;
-  }
+  if (auth.status === 'authenticated') return <>{children}</>;
 
-  // Registration flow (including errors during registration)
   if (registrationPhase) {
     const isRegistering = auth.status === 'registering';
     const regError = auth.status === 'error' ? auth.error : null;
-
     if (renderRegistration) {
-      return (
-        <>
-          {renderRegistration({
-            onRegister: handleRegister,
-            registering: isRegistering,
-            error: regError,
-            client,
-          })}
-        </>
-      );
+      return <>{renderRegistration({ onRegister: handleRegister, registering: isRegistering, error: regError, client })}</>;
     }
     return (
       <DefaultRegistrationScreen
@@ -163,28 +144,19 @@ export function AuthGate({
     );
   }
 
-  // Error (non-registration)
   if (auth.status === 'error' && auth.error) {
     if (renderError) return <>{renderError(auth.error, retry)}</>;
     return <DefaultErrorScreen error={auth.error} onRetry={retry} appName={appName} />;
   }
 
-  // Loading states: idle, authenticating, signing, verifying
   if (renderLoading) return <>{renderLoading(auth.status)}</>;
   return <DefaultLoadingScreen status={auth.status} appName={appName} />;
 }
 
 // ── Default Loading Screen ──
 
-function DefaultLoadingScreen({
-  status,
-  appName,
-}: {
-  status: AuthStatus;
-  appName: string;
-}) {
+function DefaultLoadingScreen({ status, appName }: { status: AuthStatus; appName: string }) {
   const t = useDubsTheme();
-
   const statusText: Record<AuthStatus, string> = {
     idle: 'Initializing...',
     authenticating: 'Connecting...',
@@ -195,21 +167,18 @@ function DefaultLoadingScreen({
     authenticated: 'Ready!',
     error: 'Something went wrong',
   };
-
   return (
-    <View style={[styles.container, { backgroundColor: t.background }]}>
-      <View style={styles.centerContent}>
-        <View style={styles.brandingSection}>
-          <View style={[styles.logoCircle, { backgroundColor: t.accent }]}>
-            <Text style={styles.logoText}>D</Text>
+    <View style={[s.container, { backgroundColor: t.background }]}>
+      <View style={s.centerContent}>
+        <View style={s.brandingSection}>
+          <View style={[s.logoCircle, { backgroundColor: t.accent }]}>
+            <Text style={s.logoText}>D</Text>
           </View>
-          <Text style={[styles.appName, { color: t.text }]}>{appName}</Text>
+          <Text style={[s.appNameText, { color: t.text }]}>{appName}</Text>
         </View>
-        <View style={styles.loadingSection}>
+        <View style={s.loadingSection}>
           <ActivityIndicator size="large" color={t.accent} />
-          <Text style={[styles.statusText, { color: t.textMuted }]}>
-            {statusText[status] || 'Loading...'}
-          </Text>
+          <Text style={[s.statusText, { color: t.textMuted }]}>{statusText[status] || 'Loading...'}</Text>
         </View>
       </View>
     </View>
@@ -218,51 +187,65 @@ function DefaultLoadingScreen({
 
 // ── Default Error Screen ──
 
-function DefaultErrorScreen({
-  error,
-  onRetry,
-  appName,
-}: {
-  error: Error;
-  onRetry: () => void;
-  appName: string;
-}) {
+function DefaultErrorScreen({ error, onRetry, appName }: { error: Error; onRetry: () => void; appName: string }) {
   const t = useDubsTheme();
-
   return (
-    <View style={[styles.container, { backgroundColor: t.background }]}>
-      <View style={styles.spreadContent}>
-        <View style={styles.brandingSection}>
-          <View style={[styles.logoCircle, { backgroundColor: t.accent }]}>
-            <Text style={styles.logoText}>D</Text>
+    <View style={[s.container, { backgroundColor: t.background }]}>
+      <View style={s.spreadContent}>
+        <View style={s.brandingSection}>
+          <View style={[s.logoCircle, { backgroundColor: t.accent }]}>
+            <Text style={s.logoText}>D</Text>
+          </View>
+          <Text style={[s.appNameText, { color: t.text }]}>{appName}</Text>
+        </View>
+        <View style={{ gap: 16 }}>
+          <View style={[s.errorBox, { backgroundColor: t.errorBg, borderColor: t.errorBorder }]}>
+            <Text style={[s.errorText, { color: t.errorText }]}>{error.message}</Text>
           </View>
-          <Text style={[styles.appName, { color: t.text }]}>{appName}</Text>
+          <TouchableOpacity style={[s.primaryBtn, { backgroundColor: t.accent }]} onPress={onRetry} activeOpacity={0.8}>
+            <Text style={s.primaryBtnText}>Try Again</Text>
+          </TouchableOpacity>
         </View>
-        <View style={styles.actionSection}>
+      </View>
+    </View>
+  );
+}
+
+// ── Step Indicator ──
+
+function StepIndicator({ currentStep }: { currentStep: number }) {
+  const t = useDubsTheme();
+  const steps = [0, 1, 2, 3];
+  return (
+    <View style={s.stepRow}>
+      {steps.map((i) => (
+        <React.Fragment key={i}>
+          {i > 0 && (
+            <View style={[s.stepLine, { backgroundColor: i <= currentStep ? t.success : t.border }]} />
+          )}
           <View
             style={[
-              styles.errorBox,
-              { backgroundColor: t.errorBg, borderColor: t.errorBorder },
+              s.stepCircle,
+              i < currentStep
+                ? { backgroundColor: t.success }
+                : i === currentStep
+                ? { backgroundColor: t.accent }
+                : { backgroundColor: 'transparent', borderWidth: 2, borderColor: t.border },
             ]}
           >
-            <Text style={[styles.errorText, { color: t.errorText }]}>
-              {error.message}
-            </Text>
+            {i < currentStep ? (
+              <Text style={s.stepCheck}>&#10003;</Text>
+            ) : (
+              <Text style={[s.stepNum, { color: i === currentStep ? '#FFF' : t.textMuted }]}>{i + 1}</Text>
+            )}
           </View>
-          <TouchableOpacity
-            style={[styles.button, { backgroundColor: t.accent }]}
-            onPress={onRetry}
-            activeOpacity={0.8}
-          >
-            <Text style={styles.buttonText}>Try Again</Text>
-          </TouchableOpacity>
-        </View>
-      </View>
+        </React.Fragment>
+      ))}
     </View>
   );
 }
 
-// ── Default Registration Screen ──
+// ── Default Registration Screen (3-Step Onboarding) ──
 
 function DefaultRegistrationScreen({
   onRegister,
@@ -272,128 +255,231 @@ function DefaultRegistrationScreen({
   appName,
 }: RegistrationScreenProps & { appName: string }) {
   const t = useDubsTheme();
+
+  // ── Shared state ──
+  const [step, setStep] = useState(0);
+  const [avatarSeed, setAvatarSeed] = useState(generateSeed);
+  const [avatarStyle, setAvatarStyle] = useState('adventurer');
+  const [showStyles, setShowStyles] = useState(false);
   const [username, setUsername] = useState('');
   const [referralCode, setReferralCode] = useState('');
   const [checking, setChecking] = useState(false);
-  const [availability, setAvailability] = useState<{
-    available: boolean;
-    reason?: string;
-  } | null>(null);
+  const [availability, setAvailability] = useState<{ available: boolean; reason?: string } | null>(null);
   const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
-  // Debounced username availability check
+  // ── Animation ──
+  const fadeAnim = useRef(new Animated.Value(1)).current;
+  const slideAnim = useRef(new Animated.Value(0)).current;
+
+  const avatarUrl = getAvatarUrl(avatarStyle, avatarSeed);
+
+  // Debounced username check
   useEffect(() => {
     if (debounceRef.current) clearTimeout(debounceRef.current);
-
     const trimmed = username.trim();
-    if (trimmed.length < 3) {
-      setAvailability(null);
-      setChecking(false);
-      return;
-    }
-
+    if (trimmed.length < 3) { setAvailability(null); setChecking(false); return; }
     setChecking(true);
     debounceRef.current = setTimeout(async () => {
       try {
         const result = await client.checkUsername(trimmed);
         setAvailability(result);
-      } catch {
-        setAvailability(null);
-      } finally {
-        setChecking(false);
-      }
+      } catch { setAvailability(null); }
+      finally { setChecking(false); }
     }, 500);
-
-    return () => {
-      if (debounceRef.current) clearTimeout(debounceRef.current);
-    };
+    return () => { if (debounceRef.current) clearTimeout(debounceRef.current); };
   }, [username, client]);
 
-  const canSubmit =
-    username.trim().length >= 3 &&
-    availability?.available === true &&
-    !registering &&
-    !checking;
+  const animateToStep = useCallback((newStep: number) => {
+    const dir = newStep > step ? 1 : -1;
+    Keyboard.dismiss();
+    Animated.parallel([
+      Animated.timing(fadeAnim, { toValue: 0, duration: 120, useNativeDriver: true }),
+      Animated.timing(slideAnim, { toValue: -dir * 40, duration: 120, useNativeDriver: true }),
+    ]).start(() => {
+      setStep(newStep);
+      slideAnim.setValue(dir * 40);
+      Animated.parallel([
+        Animated.timing(fadeAnim, { toValue: 1, duration: 200, useNativeDriver: true }),
+        Animated.timing(slideAnim, { toValue: 0, duration: 200, useNativeDriver: true }),
+      ]).start();
+    });
+  }, [step, fadeAnim, slideAnim]);
+
+  const canContinueUsername =
+    username.trim().length >= 3 && availability?.available === true && !checking;
+
+  const handleSubmit = () => {
+    Keyboard.dismiss();
+    onRegister(username.trim(), referralCode.trim() || undefined, avatarUrl);
+  };
 
-  return (
-    <View style={[styles.container, { backgroundColor: t.background }]}>
-      <View style={styles.spreadContent}>
-        <View style={styles.brandingSection}>
-          <View style={[styles.logoCircle, { backgroundColor: t.accent }]}>
-            <Text style={styles.logoText}>D</Text>
+  // ── Step 1: Avatar ──
+  const renderAvatarStep = () => (
+    <View style={s.stepContainer}>
+      <View style={s.stepTop}>
+        <Text style={[s.title, { color: t.text }]}>Choose Your Avatar</Text>
+        <Text style={[s.subtitle, { color: t.textMuted }]}>Pick a look that represents you</Text>
+        <StepIndicator currentStep={0} />
+
+        <View style={s.avatarCenter}>
+          <View style={[s.avatarFrame, { borderColor: t.accent }]}>
+            <Image source={{ uri: avatarUrl }} style={s.avatarLarge} />
+            <View style={[s.checkBadge, { backgroundColor: t.success }]}>
+              <Text style={s.checkBadgeText}>&#10003;</Text>
+            </View>
           </View>
-          <Text style={[styles.appName, { color: t.text }]}>{appName}</Text>
-          <Text style={[styles.subtitle, { color: t.textMuted }]}>
-            Choose a username to get started
-          </Text>
         </View>
 
-        <View style={styles.actionSection}>
-          {error ? (
-            <View
-              style={[
-                styles.errorBox,
-                { backgroundColor: t.errorBg, borderColor: t.errorBorder },
-              ]}
-            >
-              <Text style={[styles.errorText, { color: t.errorText }]}>
-                {error.message}
-              </Text>
+        <View style={s.avatarActions}>
+          <TouchableOpacity
+            style={[s.outlineBtn, { borderColor: t.border }]}
+            onPress={() => setAvatarSeed(generateSeed())}
+            activeOpacity={0.7}
+          >
+            <Text style={[s.outlineBtnText, { color: t.text }]}>&#8635;  Shuffle</Text>
+          </TouchableOpacity>
+          <TouchableOpacity
+            style={[s.outlineBtn, { borderColor: t.accent, backgroundColor: t.accent + '15' }]}
+            onPress={() => setShowStyles(!showStyles)}
+            activeOpacity={0.7}
+          >
+            <Text style={[s.outlineBtnText, { color: t.accent }]}>&#9786;  Customize</Text>
+          </TouchableOpacity>
+        </View>
+
+        {showStyles && (
+          <ScrollView horizontal showsHorizontalScrollIndicator={false} style={s.styleScroll}>
+            {DICEBEAR_STYLES.map((st) => (
+              <TouchableOpacity
+                key={st}
+                onPress={() => setAvatarStyle(st)}
+                style={[s.styleThumbWrap, { borderColor: st === avatarStyle ? t.accent : t.border }]}
+              >
+                <Image source={{ uri: getAvatarUrl(st, avatarSeed, 80) }} style={s.styleThumb} />
+              </TouchableOpacity>
+            ))}
+          </ScrollView>
+        )}
+      </View>
+
+      <View style={s.bottomRow}>
+        <TouchableOpacity
+          style={[s.primaryBtn, { backgroundColor: t.accent, flex: 1 }]}
+          onPress={() => animateToStep(1)}
+          activeOpacity={0.8}
+        >
+          <Text style={s.primaryBtnText}>Continue  &#8250;</Text>
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+
+  // ── Step 2: Username ──
+  const renderUsernameStep = () => (
+    <View style={s.stepContainer}>
+      <View style={s.stepTop}>
+        <View style={s.headerRow}>
+          <TouchableOpacity onPress={() => animateToStep(0)} hitSlop={{ top: 12, bottom: 12, left: 12, right: 12 }}>
+            <Text style={[s.backChevron, { color: t.text }]}>&#8249;</Text>
+          </TouchableOpacity>
+          <Text style={[s.titleInline, { color: t.text }]}>Pick a Username</Text>
+        </View>
+        <Text style={[s.subtitle, { color: t.textMuted }]}>This is how others will see you</Text>
+        <StepIndicator currentStep={1} />
+
+        <View style={s.avatarCenter}>
+          <View style={[s.avatarFrameSmall, { borderColor: t.accent }]}>
+            <Image source={{ uri: avatarUrl }} style={s.avatarSmall} />
+            <View style={[s.checkBadgeSm, { backgroundColor: t.success }]}>
+              <Text style={s.checkBadgeTextSm}>&#10003;</Text>
             </View>
+          </View>
+        </View>
+
+        <View style={s.inputGroup}>
+          <Text style={[s.inputLabel, { color: t.text }]}>
+            Username <Text style={{ color: t.errorText }}>*</Text>
+          </Text>
+          <TextInput
+            style={[s.input, { backgroundColor: t.surface, color: t.text, borderColor: t.accent }]}
+            placeholder="Enter username"
+            placeholderTextColor={t.textDim}
+            value={username}
+            onChangeText={setUsername}
+            autoCapitalize="none"
+            autoCorrect={false}
+            autoFocus
+          />
+          {checking ? (
+            <Text style={[s.hint, { color: t.textDim }]}>Checking...</Text>
+          ) : availability ? (
+            <Text style={[s.hint, { color: availability.available ? t.success : t.errorText }]}>
+              {availability.available ? '\u2713 Available!' : (availability.reason || 'Username taken')}
+            </Text>
+          ) : username.trim().length > 0 && username.trim().length < 3 ? (
+            <Text style={[s.hint, { color: t.textDim }]}>At least 3 characters</Text>
           ) : null}
+        </View>
+      </View>
 
-          <View>
-            <TextInput
-              style={[
-                styles.input,
-                {
-                  backgroundColor: t.surface,
-                  color: t.text,
-                  borderColor: t.border,
-                },
-              ]}
-              placeholder="Username"
-              placeholderTextColor={t.textDim}
-              value={username}
-              onChangeText={setUsername}
-              autoCapitalize="none"
-              autoCorrect={false}
-              editable={!registering}
-            />
-            {checking ? (
-              <Text style={[styles.availabilityHint, { color: t.textDim }]}>
-                Checking...
-              </Text>
-            ) : availability ? (
-              <Text
-                style={[
-                  styles.availabilityHint,
-                  {
-                    color: availability.available ? t.success : t.errorText,
-                  },
-                ]}
-              >
-                {availability.available
-                  ? 'Available!'
-                  : availability.reason || 'Username taken'}
-              </Text>
-            ) : username.trim().length > 0 && username.trim().length < 3 ? (
-              <Text style={[styles.availabilityHint, { color: t.textDim }]}>
-                At least 3 characters
-              </Text>
-            ) : null}
+      <View style={s.bottomRow}>
+        <TouchableOpacity
+          style={[s.secondaryBtn, { borderColor: t.border }]}
+          onPress={() => animateToStep(0)}
+          activeOpacity={0.7}
+        >
+          <Text style={[s.secondaryBtnText, { color: t.text }]}>&#8249;  Back</Text>
+        </TouchableOpacity>
+        <TouchableOpacity
+          style={[s.primaryBtn, { backgroundColor: t.accent, flex: 1, opacity: canContinueUsername ? 1 : 0.4 }]}
+          onPress={() => animateToStep(2)}
+          disabled={!canContinueUsername}
+          activeOpacity={0.8}
+        >
+          <Text style={s.primaryBtnText}>Continue  &#8250;</Text>
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+
+  // ── Step 3: Referral + Create ──
+  const renderReferralStep = () => (
+    <View style={s.stepContainer}>
+      <View style={s.stepTop}>
+        <View style={s.headerRow}>
+          <TouchableOpacity onPress={() => animateToStep(1)} hitSlop={{ top: 12, bottom: 12, left: 12, right: 12 }}>
+            <Text style={[s.backChevron, { color: t.text }]}>&#8249;</Text>
+          </TouchableOpacity>
+          <Text style={[s.titleInline, { color: t.text }]}>Almost There!</Text>
+        </View>
+        <Text style={[s.subtitle, { color: t.textMuted }]}>Got a referral code? (optional)</Text>
+        <StepIndicator currentStep={2} />
+
+        {/* Profile preview card */}
+        <View style={[s.profileCard, { borderColor: t.border }]}>
+          <Text style={[s.profileLabel, { color: t.textMuted }]}>Your Profile</Text>
+          <View style={s.profileRow}>
+            <Image source={{ uri: avatarUrl }} style={s.profileAvatar} />
+            <View style={{ gap: 4 }}>
+              <Text style={[s.profileUsername, { color: t.text }]}>@{username}</Text>
+              <Text style={[s.profileReady, { color: t.success }]}>{'\u2713'} Ready to go!</Text>
+            </View>
+          </View>
+        </View>
+
+        {error ? (
+          <View style={[s.errorBox, { backgroundColor: t.errorBg, borderColor: t.errorBorder }]}>
+            <Text style={[s.errorText, { color: t.errorText }]}>{error.message}</Text>
           </View>
+        ) : null}
 
+        <View style={s.inputGroup}>
+          <Text style={[s.inputLabel, { color: t.text }]}>
+            Referral Code <Text style={{ color: t.textMuted }}>(optional)</Text>
+          </Text>
           <TextInput
-            style={[
-              styles.input,
-              {
-                backgroundColor: t.surface,
-                color: t.text,
-                borderColor: t.border,
-              },
-            ]}
-            placeholder="Referral code (optional)"
+            style={[s.input, { backgroundColor: t.surface, color: t.text, borderColor: t.border }]}
+            placeholder="Enter referral code"
             placeholderTextColor={t.textDim}
             value={referralCode}
             onChangeText={setReferralCode}
@@ -401,120 +487,130 @@ function DefaultRegistrationScreen({
             autoCorrect={false}
             editable={!registering}
           />
-
-          <TouchableOpacity
-            style={[
-              styles.button,
-              { backgroundColor: t.accent, opacity: canSubmit ? 1 : 0.5 },
-            ]}
-            onPress={() => {
-              Keyboard.dismiss();
-              onRegister(username.trim(), referralCode.trim() || undefined);
-            }}
-            disabled={!canSubmit}
-            activeOpacity={0.8}
-          >
-            {registering ? (
-              <ActivityIndicator color="#FFFFFF" size="small" />
-            ) : (
-              <Text style={styles.buttonText}>Create Account</Text>
-            )}
-          </TouchableOpacity>
+          <Text style={[s.hint, { color: t.textMuted }]}>
+            {'\uD83C\uDF81'} If a friend invited you, enter their code to give them credit!
+          </Text>
         </View>
       </View>
+
+      <View style={s.bottomRow}>
+        <TouchableOpacity
+          style={[s.secondaryBtn, { borderColor: t.border }]}
+          onPress={() => animateToStep(1)}
+          disabled={registering}
+          activeOpacity={0.7}
+        >
+          <Text style={[s.secondaryBtnText, { color: t.text }]}>&#8249;  Back</Text>
+        </TouchableOpacity>
+        <TouchableOpacity
+          style={[s.primaryBtn, { backgroundColor: t.accent, flex: 1, opacity: registering ? 0.7 : 1 }]}
+          onPress={handleSubmit}
+          disabled={registering}
+          activeOpacity={0.8}
+        >
+          {registering ? (
+            <ActivityIndicator color="#FFFFFF" size="small" />
+          ) : (
+            <Text style={s.primaryBtnText}>Create Account</Text>
+          )}
+        </TouchableOpacity>
+      </View>
     </View>
   );
+
+  const renderStep = () => {
+    switch (step) {
+      case 0: return renderAvatarStep();
+      case 1: return renderUsernameStep();
+      case 2: return renderReferralStep();
+      default: return null;
+    }
+  };
+
+  return (
+    <KeyboardAvoidingView
+      style={[s.container, { backgroundColor: t.background }]}
+      behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+    >
+      <ScrollView
+        contentContainerStyle={{ flexGrow: 1 }}
+        keyboardShouldPersistTaps="handled"
+        bounces={false}
+      >
+        <Animated.View
+          style={[
+            { flex: 1 },
+            { opacity: fadeAnim, transform: [{ translateX: slideAnim }] },
+          ]}
+        >
+          {renderStep()}
+        </Animated.View>
+      </ScrollView>
+    </KeyboardAvoidingView>
+  );
 }
 
 // ── Styles ──
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-  },
-  centerContent: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    paddingHorizontal: 32,
-    gap: 48,
-  },
-  spreadContent: {
-    flex: 1,
-    justifyContent: 'space-between',
-    paddingHorizontal: 32,
-    paddingTop: 120,
-    paddingBottom: 80,
-  },
-  brandingSection: {
-    alignItems: 'center',
-    gap: 12,
-  },
-  logoCircle: {
-    width: 80,
-    height: 80,
-    borderRadius: 40,
-    justifyContent: 'center',
-    alignItems: 'center',
-    marginBottom: 8,
-  },
-  logoText: {
-    fontSize: 36,
-    fontWeight: '800',
-    color: '#FFFFFF',
-  },
-  appName: {
-    fontSize: 32,
-    fontWeight: '800',
-  },
-  subtitle: {
-    fontSize: 16,
-    textAlign: 'center',
-    lineHeight: 22,
-  },
-  loadingSection: {
-    alignItems: 'center',
-    gap: 16,
-  },
-  statusText: {
-    fontSize: 16,
-    textAlign: 'center',
-  },
-  actionSection: {
-    gap: 16,
-  },
-  errorBox: {
-    borderWidth: 1,
-    borderRadius: 12,
-    paddingHorizontal: 16,
-    paddingVertical: 12,
-  },
-  errorText: {
-    fontSize: 14,
-    textAlign: 'center',
-  },
-  input: {
-    height: 56,
-    borderRadius: 16,
-    borderWidth: 1,
-    paddingHorizontal: 16,
-    fontSize: 16,
-  },
-  availabilityHint: {
-    fontSize: 13,
-    marginTop: 6,
-    paddingLeft: 4,
-  },
-  button: {
-    height: 56,
-    borderRadius: 16,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  buttonText: {
-    color: '#FFFFFF',
-    fontSize: 18,
-    fontWeight: '700',
-  },
+const s = StyleSheet.create({
+  container: { flex: 1 },
+  // Loading / Error
+  centerContent: { flex: 1, justifyContent: 'center', alignItems: 'center', paddingHorizontal: 32, gap: 48 },
+  spreadContent: { flex: 1, justifyContent: 'space-between', paddingHorizontal: 32, paddingTop: 120, paddingBottom: 80 },
+  brandingSection: { alignItems: 'center', gap: 12 },
+  logoCircle: { width: 80, height: 80, borderRadius: 40, justifyContent: 'center', alignItems: 'center', marginBottom: 8 },
+  logoText: { fontSize: 36, fontWeight: '800', color: '#FFFFFF' },
+  appNameText: { fontSize: 32, fontWeight: '800' },
+  loadingSection: { alignItems: 'center', gap: 16 },
+  statusText: { fontSize: 16, textAlign: 'center' },
+  errorBox: { borderWidth: 1, borderRadius: 12, paddingHorizontal: 16, paddingVertical: 12 },
+  errorText: { fontSize: 14, textAlign: 'center' },
+  // Step indicator
+  stepRow: { flexDirection: 'row', alignItems: 'center', paddingHorizontal: 24, marginVertical: 16 },
+  stepLine: { flex: 1, height: 2 },
+  stepCircle: { width: 36, height: 36, borderRadius: 18, justifyContent: 'center', alignItems: 'center' },
+  stepCheck: { color: '#FFF', fontSize: 16, fontWeight: '700' },
+  stepNum: { fontSize: 14, fontWeight: '700' },
+  // Onboarding layout
+  stepContainer: { flex: 1, justifyContent: 'space-between', paddingBottom: 40 },
+  stepTop: { gap: 8, paddingTop: 64 },
+  headerRow: { flexDirection: 'row', alignItems: 'center', gap: 8, paddingHorizontal: 24 },
+  backChevron: { fontSize: 32, fontWeight: '300', lineHeight: 36, marginTop: -2 },
+  title: { fontSize: 28, fontWeight: '800', paddingHorizontal: 24 },
+  titleInline: { fontSize: 28, fontWeight: '800' },
+  subtitle: { fontSize: 15, paddingHorizontal: 24, lineHeight: 20 },
+  // Avatar
+  avatarCenter: { alignItems: 'center', marginVertical: 12 },
+  avatarFrame: { borderWidth: 3, borderRadius: 20, padding: 4 },
+  avatarLarge: { width: 160, height: 160, borderRadius: 16, backgroundColor: '#E5E5EA' },
+  checkBadge: { position: 'absolute', bottom: -6, right: -6, width: 28, height: 28, borderRadius: 14, justifyContent: 'center', alignItems: 'center' },
+  checkBadgeText: { color: '#FFF', fontSize: 15, fontWeight: '700' },
+  avatarFrameSmall: { borderWidth: 3, borderRadius: 14, padding: 3 },
+  avatarSmall: { width: 100, height: 100, borderRadius: 12, backgroundColor: '#E5E5EA' },
+  checkBadgeSm: { position: 'absolute', bottom: -4, right: -4, width: 22, height: 22, borderRadius: 11, justifyContent: 'center', alignItems: 'center' },
+  checkBadgeTextSm: { color: '#FFF', fontSize: 12, fontWeight: '700' },
+  avatarActions: { flexDirection: 'row', justifyContent: 'center', gap: 12, paddingHorizontal: 24 },
+  outlineBtn: { borderWidth: 1.5, borderRadius: 12, paddingHorizontal: 20, paddingVertical: 12 },
+  outlineBtnText: { fontSize: 15, fontWeight: '600' },
+  styleScroll: { paddingHorizontal: 24, marginTop: 4 },
+  styleThumbWrap: { borderWidth: 2, borderRadius: 12, padding: 3, marginRight: 10 },
+  styleThumb: { width: 52, height: 52, borderRadius: 10, backgroundColor: '#E5E5EA' },
+  // Input
+  inputGroup: { paddingHorizontal: 24, gap: 6 },
+  inputLabel: { fontSize: 15, fontWeight: '600' },
+  input: { height: 56, borderRadius: 16, borderWidth: 1.5, paddingHorizontal: 16, fontSize: 16 },
+  hint: { fontSize: 13, paddingLeft: 4 },
+  // Profile card
+  profileCard: { marginHorizontal: 24, borderWidth: 1, borderRadius: 16, padding: 16, gap: 12 },
+  profileLabel: { fontSize: 13 },
+  profileRow: { flexDirection: 'row', alignItems: 'center', gap: 14 },
+  profileAvatar: { width: 56, height: 56, borderRadius: 12, backgroundColor: '#E5E5EA' },
+  profileUsername: { fontSize: 20, fontWeight: '800' },
+  profileReady: { fontSize: 14, fontWeight: '600' },
+  // Buttons
+  bottomRow: { flexDirection: 'row', gap: 12, paddingHorizontal: 24 },
+  primaryBtn: { height: 56, borderRadius: 16, justifyContent: 'center', alignItems: 'center' },
+  primaryBtnText: { color: '#FFFFFF', fontSize: 18, fontWeight: '700' },
+  secondaryBtn: { height: 56, borderRadius: 16, borderWidth: 1.5, justifyContent: 'center', alignItems: 'center', paddingHorizontal: 24 },
+  secondaryBtnText: { fontSize: 16, fontWeight: '600' },
 });