Update

app.json

@@ -0,0 +1,5 @@
+{
+  "plugins": [
+    "expo-asset"
+  ]
+}

apps/mobile/app.json

@@ -65,7 +65,8 @@
         }
       ],
       "@sentry/react-native",
-      "expo-font"
+      "expo-font",
+      "expo-asset"
     ],
     "experiments": {
       "typedRoutes": true

apps/mobile/app/(app)/profile.tsx

@@ -392,17 +392,26 @@ export default function ProfileScreen() {
                         )}
                     </GlassCard>
 
-                    {/* Restore Purchases Link */}
+                    {/* Restore Purchases & Redeem Links */}
                     {!hasPremiumAccess && (
-                        <TouchableOpacity
+                        <View style={styles.subscriptionLinks}>
-                            style={styles.restoreLink}
+                            <TouchableOpacity
-                            onPress={handleRestorePurchases}
+                                style={styles.restoreLink}
-                            disabled={isPurchasing}
+                                onPress={handleRestorePurchases}
-                        >
+                                disabled={isPurchasing}
-                            <Text style={styles.restoreLinkText}>
+                            >
-                                {isPurchasing ? "Restoring..." : "Restore Purchases"}
+                                <Text style={styles.restoreLinkText}>
-                            </Text>
+                                    {isPurchasing ? "Restoring..." : "Restore Purchases"}
-                        </TouchableOpacity>
+                                </Text>
+                            </TouchableOpacity>
+                            <Text style={styles.linkDivider}>|</Text>
+                            <TouchableOpacity
+                                style={styles.restoreLink}
+                                onPress={() => router.push("/(app)/redeem")}
+                            >
+                                <Text style={styles.restoreLinkText}>Redeem Code</Text>
+                            </TouchableOpacity>
+                        </View>
                     )}
                 </Animated.View>
 
@@ -896,15 +905,23 @@ const styles = StyleSheet.create({
         color: colors.text,
         fontWeight: "600",
     },
-    restoreLink: {
+    subscriptionLinks: {
+        flexDirection: "row",
+        justifyContent: "center",
         alignItems: "center",
         marginTop: spacing.sm,
+    },
+    restoreLink: {
         padding: spacing.sm,
     },
     restoreLinkText: {
         ...typography.caption1,
         color: colors.textTertiary,
     },
+    linkDivider: {
+        ...typography.caption1,
+        color: colors.textTertiary,
+    },
     versionContainer: {
         alignItems: "center",
         marginTop: spacing.lg,

apps/mobile/app/(app)/redeem.tsx

@@ -0,0 +1,312 @@
+import { useState } from "react";
+import {
+    View,
+    Text,
+    TouchableOpacity,
+    StyleSheet,
+    Alert,
+    KeyboardAvoidingView,
+    Platform,
+    ScrollView,
+} from "react-native";
+import { router } from "expo-router";
+import Animated, {
+    FadeInDown,
+    FadeInUp,
+} from "react-native-reanimated";
+import { Ionicons } from "@expo/vector-icons";
+import { GradientBackground, GlassCard, GlassButton, GlassInput } from "../../src/components/ui";
+import { colors, spacing, radius, typography } from "../../src/theme";
+
+export default function RedeemScreen() {
+    const [email, setEmail] = useState("");
+    const [code, setCode] = useState("");
+    const [isLoading, setIsLoading] = useState(false);
+    const [isRedeemed, setIsRedeemed] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+
+    const showError = (message: string) => {
+        setError(message);
+        if (Platform.OS !== 'web') {
+            Alert.alert("Error", message);
+        }
+    };
+
+    const clearError = () => setError(null);
+
+    const handleRedeem = async () => {
+        clearError();
+
+        if (!email.trim()) {
+            showError("Please enter your email address");
+            return;
+        }
+
+        if (!code.trim()) {
+            showError("Please enter your redemption code");
+            return;
+        }
+
+        // Basic email validation
+        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+        if (!emailRegex.test(email.trim())) {
+            showError("Please enter a valid email address");
+            return;
+        }
+
+        setIsLoading(true);
+
+        // TODO: Wire up to backend
+        // For now, just simulate a delay and show success
+        await new Promise(resolve => setTimeout(resolve, 1500));
+
+        setIsLoading(false);
+        setIsRedeemed(true);
+    };
+
+    // Success screen
+    if (isRedeemed) {
+        return (
+            <GradientBackground showAccent>
+                <View style={styles.centeredContainer}>
+                    <Animated.View
+                        entering={FadeInUp.duration(600).springify()}
+                        style={styles.centeredContent}
+                    >
+                        <View style={styles.iconContainer}>
+                            <Ionicons name="checkmark-circle" size={48} color={colors.success} />
+                        </View>
+                        <Text style={styles.title}>Code Redeemed!</Text>
+                        <Text style={styles.subtitle}>
+                            Your premium access has been activated for{'\n'}
+                            <Text style={styles.emailHighlight}>{email}</Text>
+                        </Text>
+                        <Text style={styles.hint}>
+                            Enjoy all premium question packs and features.
+                        </Text>
+                        <GlassButton
+                            onPress={() => router.back()}
+                            style={{ marginTop: spacing.lg }}
+                        >
+                            Back to Profile
+                        </GlassButton>
+                    </Animated.View>
+                </View>
+            </GradientBackground>
+        );
+    }
+
+    return (
+        <GradientBackground showAccent>
+            <KeyboardAvoidingView
+                style={styles.container}
+                behavior={Platform.OS === "ios" ? "padding" : "height"}
+            >
+                <ScrollView
+                    contentContainerStyle={styles.scrollContent}
+                    keyboardShouldPersistTaps="handled"
+                    showsVerticalScrollIndicator={false}
+                >
+                    <View style={styles.content}>
+                        {/* Back Button */}
+                        <Animated.View
+                            entering={FadeInDown.delay(100).duration(600).springify()}
+                        >
+                            <TouchableOpacity
+                                style={styles.backButton}
+                                onPress={() => router.back()}
+                                activeOpacity={0.7}
+                            >
+                                <Ionicons name="arrow-back" size={24} color={colors.text} />
+                            </TouchableOpacity>
+                        </Animated.View>
+
+                        {/* Header */}
+                        <Animated.View
+                            entering={FadeInDown.delay(150).duration(600).springify()}
+                            style={styles.headerContainer}
+                        >
+                            <View style={styles.logoContainer}>
+                                <Ionicons name="gift" size={40} color={colors.primary} />
+                            </View>
+                            <Text style={styles.title}>Redeem Premium</Text>
+                            <Text style={styles.subtitle}>
+                                Enter your email and redemption code to unlock premium features
+                            </Text>
+                        </Animated.View>
+
+                        {/* Form Card */}
+                        <Animated.View
+                            entering={FadeInDown.delay(200).duration(600).springify()}
+                            style={styles.formContainer}
+                        >
+                            <GlassCard variant="elevated">
+                                {/* Error Message */}
+                                {error && (
+                                    <Animated.View
+                                        entering={FadeInDown.duration(200)}
+                                        style={styles.errorContainer}
+                                    >
+                                        <Ionicons name="alert-circle" size={18} color={colors.error} />
+                                        <Text style={styles.errorText}>{error}</Text>
+                                    </Animated.View>
+                                )}
+
+                                {/* Form Fields */}
+                                <View style={styles.form}>
+                                    <GlassInput
+                                        placeholder="Enter your email"
+                                        value={email}
+                                        onChangeText={(text) => { clearError(); setEmail(text); }}
+                                        keyboardType="email-address"
+                                        autoCapitalize="none"
+                                        autoCorrect={false}
+                                        icon={<Ionicons name="mail-outline" size={20} color={colors.textTertiary} />}
+                                    />
+
+                                    <GlassInput
+                                        placeholder="Enter redemption code"
+                                        value={code}
+                                        onChangeText={(text) => { clearError(); setCode(text.toUpperCase()); }}
+                                        autoCapitalize="characters"
+                                        autoCorrect={false}
+                                        icon={<Ionicons name="key-outline" size={20} color={colors.textTertiary} />}
+                                    />
+
+                                    <GlassButton
+                                        onPress={handleRedeem}
+                                        loading={isLoading}
+                                        disabled={isLoading}
+                                        fullWidth
+                                    >
+                                        Redeem Code
+                                    </GlassButton>
+                                </View>
+                            </GlassCard>
+                        </Animated.View>
+
+                        {/* Info Text */}
+                        <Animated.View
+                            entering={FadeInDown.delay(250).duration(600).springify()}
+                            style={styles.infoContainer}
+                        >
+                            <Ionicons name="information-circle-outline" size={16} color={colors.textTertiary} />
+                            <Text style={styles.infoText}>
+                                Redemption codes are provided through promotions and giveaways. Each code can only be used once.
+                            </Text>
+                        </Animated.View>
+                    </View>
+                </ScrollView>
+            </KeyboardAvoidingView>
+        </GradientBackground>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    centeredContainer: {
+        flex: 1,
+        justifyContent: "center",
+        alignItems: "center",
+    },
+    centeredContent: {
+        alignItems: "center",
+        paddingHorizontal: spacing.lg,
+    },
+    scrollContent: {
+        flexGrow: 1,
+    },
+    content: {
+        flex: 1,
+        paddingHorizontal: spacing.lg,
+        paddingTop: 60,
+        paddingBottom: spacing.xl,
+    },
+    backButton: {
+        width: 44,
+        height: 44,
+        borderRadius: 22,
+        backgroundColor: colors.glass.background,
+        justifyContent: "center",
+        alignItems: "center",
+        marginBottom: spacing.lg,
+    },
+    headerContainer: {
+        alignItems: "center",
+        marginBottom: spacing.xl,
+    },
+    logoContainer: {
+        width: 80,
+        height: 80,
+        borderRadius: 40,
+        backgroundColor: colors.primaryLight,
+        justifyContent: "center",
+        alignItems: "center",
+        marginBottom: spacing.md,
+    },
+    iconContainer: {
+        width: 100,
+        height: 100,
+        borderRadius: 50,
+        backgroundColor: colors.successLight,
+        justifyContent: "center",
+        alignItems: "center",
+        marginBottom: spacing.lg,
+    },
+    title: {
+        ...typography.largeTitle,
+        color: colors.text,
+        marginBottom: spacing.xs,
+        textAlign: "center",
+    },
+    subtitle: {
+        ...typography.body,
+        color: colors.textSecondary,
+        textAlign: "center",
+    },
+    emailHighlight: {
+        color: colors.primary,
+        fontWeight: "600",
+    },
+    hint: {
+        ...typography.subhead,
+        color: colors.textSecondary,
+        textAlign: "center",
+        marginTop: spacing.md,
+        paddingHorizontal: spacing.md,
+    },
+    formContainer: {
+        marginBottom: spacing.lg,
+    },
+    errorContainer: {
+        flexDirection: "row",
+        alignItems: "center",
+        backgroundColor: colors.errorLight,
+        padding: spacing.md,
+        borderRadius: radius.md,
+        marginBottom: spacing.md,
+        gap: spacing.sm,
+    },
+    errorText: {
+        ...typography.subhead,
+        color: colors.error,
+        flex: 1,
+    },
+    form: {
+        gap: spacing.sm,
+    },
+    infoContainer: {
+        flexDirection: "row",
+        alignItems: "flex-start",
+        paddingHorizontal: spacing.sm,
+        gap: spacing.sm,
+    },
+    infoText: {
+        ...typography.caption1,
+        color: colors.textTertiary,
+        flex: 1,
+        lineHeight: 18,
+    },
+});

apps/mobile/babel.config.js

@@ -0,0 +1,6 @@
+module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+  };
+};

apps/mobile/package.json

@@ -21,9 +21,11 @@
     "@sentry/react-native": "~6.10.0",
     "@supabase/supabase-js": "^2.39.0",
     "@tanstack/react-query": "^5.17.0",
+    "babel-preset-expo": "~12.0.0",
     "base64-arraybuffer": "^1.0.2",
     "expo": "~52.0.0",
     "expo-apple-authentication": "~7.1.3",
+    "expo-asset": "~11.0.5",
     "expo-blur": "~14.0.3",
     "expo-build-properties": "^0.13.3",
     "expo-clipboard": "~7.0.1",

package-lock.json

@@ -133,9 +133,11 @@
         "@sentry/react-native": "~6.10.0",
         "@supabase/supabase-js": "^2.39.0",
         "@tanstack/react-query": "^5.17.0",
+        "babel-preset-expo": "~12.0.0",
         "base64-arraybuffer": "^1.0.2",
         "expo": "~52.0.0",
         "expo-apple-authentication": "~7.1.3",
+        "expo-asset": "~11.0.5",
         "expo-blur": "~14.0.3",
         "expo-build-properties": "^0.13.3",
         "expo-clipboard": "~7.0.1",
@@ -324,20 +326,6 @@
         "react-native": "*"
       }
     },
-    "apps/mobile/node_modules/expo-constants": {
-      "version": "17.0.8",
-      "resolved": "https://registry.npmjs.org/expo-constants/-/expo-constants-17.0.8.tgz",
-      "integrity": "sha512-XfWRyQAf1yUNgWZ1TnE8pFBMqGmFP5Gb+SFSgszxDdOoheB/NI5D4p7q86kI2fvGyfTrxAe+D+74nZkfsGvUlg==",
-      "license": "MIT",
-      "dependencies": {
-        "@expo/config": "~10.0.11",
-        "@expo/env": "~0.4.2"
-      },
-      "peerDependencies": {
-        "expo": "*",
-        "react-native": "*"
-      }
-    },
     "apps/mobile/node_modules/expo-file-system": {
       "version": "18.0.12",
       "resolved": "https://registry.npmjs.org/expo-file-system/-/expo-file-system-18.0.12.tgz",
@@ -7821,6 +7809,17 @@
         "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
       }
     },
+    "node_modules/babel-plugin-react-compiler": {
+      "version": "19.0.0-beta-ebf51a3-20250411",
+      "resolved": "https://registry.npmjs.org/babel-plugin-react-compiler/-/babel-plugin-react-compiler-19.0.0-beta-ebf51a3-20250411.tgz",
+      "integrity": "sha512-q84bNR9JG1crykAlJUt5Ud0/5BUyMFuQww/mrwIQDFBaxsikqBDj3f/FNDsVd2iR26A1HvXKWPEIfgJDv8/V2g==",
+      "license": "MIT",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "@babel/types": "^7.26.0"
+      }
+    },
     "node_modules/babel-plugin-react-native-web": {
       "version": "0.19.13",
       "resolved": "https://registry.npmjs.org/babel-plugin-react-native-web/-/babel-plugin-react-native-web-0.19.13.tgz",
@@ -9924,6 +9923,23 @@
         "react-native": "*"
       }
     },
+    "node_modules/expo-asset": {
+      "version": "11.0.5",
+      "resolved": "https://registry.npmjs.org/expo-asset/-/expo-asset-11.0.5.tgz",
+      "integrity": "sha512-TL60LmMBGVzs3NQcO8ylWqBumMh4sx0lmeJsn7+9C88fylGDhyyVnKZ1PyTXo9CVDBkndutZx2JUEQWM9BaiXw==",
+      "license": "MIT",
+      "dependencies": {
+        "@expo/image-utils": "^0.6.5",
+        "expo-constants": "~17.0.8",
+        "invariant": "^2.2.4",
+        "md5-file": "^3.2.3"
+      },
+      "peerDependencies": {
+        "expo": "*",
+        "react": "*",
+        "react-native": "*"
+      }
+    },
     "node_modules/expo-build-properties": {
       "version": "0.13.3",
       "resolved": "https://registry.npmjs.org/expo-build-properties/-/expo-build-properties-0.13.3.tgz",
@@ -9937,6 +9953,20 @@
         "expo": "*"
       }
     },
+    "node_modules/expo-constants": {
+      "version": "17.0.8",
+      "resolved": "https://registry.npmjs.org/expo-constants/-/expo-constants-17.0.8.tgz",
+      "integrity": "sha512-XfWRyQAf1yUNgWZ1TnE8pFBMqGmFP5Gb+SFSgszxDdOoheB/NI5D4p7q86kI2fvGyfTrxAe+D+74nZkfsGvUlg==",
+      "license": "MIT",
+      "dependencies": {
+        "@expo/config": "~10.0.11",
+        "@expo/env": "~0.4.2"
+      },
+      "peerDependencies": {
+        "expo": "*",
+        "react-native": "*"
+      }
+    },
     "node_modules/expo-dev-client": {
       "version": "5.0.20",
       "resolved": "https://registry.npmjs.org/expo-dev-client/-/expo-dev-client-5.0.20.tgz",
@@ -10131,37 +10161,6 @@
         "expo": "*"
       }
     },
-    "node_modules/expo/node_modules/expo-asset": {
-      "version": "11.0.5",
-      "resolved": "https://registry.npmjs.org/expo-asset/-/expo-asset-11.0.5.tgz",
-      "integrity": "sha512-TL60LmMBGVzs3NQcO8ylWqBumMh4sx0lmeJsn7+9C88fylGDhyyVnKZ1PyTXo9CVDBkndutZx2JUEQWM9BaiXw==",
-      "license": "MIT",
-      "dependencies": {
-        "@expo/image-utils": "^0.6.5",
-        "expo-constants": "~17.0.8",
-        "invariant": "^2.2.4",
-        "md5-file": "^3.2.3"
-      },
-      "peerDependencies": {
-        "expo": "*",
-        "react": "*",
-        "react-native": "*"
-      }
-    },
-    "node_modules/expo/node_modules/expo-constants": {
-      "version": "17.0.8",
-      "resolved": "https://registry.npmjs.org/expo-constants/-/expo-constants-17.0.8.tgz",
-      "integrity": "sha512-XfWRyQAf1yUNgWZ1TnE8pFBMqGmFP5Gb+SFSgszxDdOoheB/NI5D4p7q86kI2fvGyfTrxAe+D+74nZkfsGvUlg==",
-      "license": "MIT",
-      "dependencies": {
-        "@expo/config": "~10.0.11",
-        "@expo/env": "~0.4.2"
-      },
-      "peerDependencies": {
-        "expo": "*",
-        "react-native": "*"
-      }
-    },
     "node_modules/expo/node_modules/expo-file-system": {
       "version": "18.0.12",
       "resolved": "https://registry.npmjs.org/expo-file-system/-/expo-file-system-18.0.12.tgz",