Update header titles for DemoFeedScreen and DemoCaptureScreen Add demo mode UI changes with SkipDemoButton and demoMode prop

apps/expo/src/app/(onboarding)/onboarding/demo-feed.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useState } from "react";
-import { Alert, View } from "react-native";
+import { Alert, Text, View } from "react-native";
 import * as Notifications from "expo-notifications";
 import { Stack, useLocalSearchParams } from "expo-router";
 import { toast } from "sonner-native";
@@ -160,6 +160,12 @@ export default function DemoFeedScreen() {
       />
 
       <View className="flex-1">
+        <View className="absolute right-4 top-16 z-10 ">
+          <Text className="rounded-xl bg-accent-yellow px-3 py-1.5 text-center text-base font-medium text-neutral-1">
+            Press and hold for options 👇
+          </Text>
+        </View>
+
         <UserEventsList
           events={feedEvents}
           showCreator="always"
@@ -168,6 +174,7 @@ export default function DemoFeedScreen() {
           onEndReached={() => null}
           isFetchingNextPage={false}
           stats={stats}
+          demoMode
         />
       </View>
 

apps/expo/src/app/(onboarding)/onboarding/demo-intro.tsx

@@ -15,6 +15,7 @@ import { Camera, ChevronDown, List, Plus, Sparkles } from "lucide-react-native";
 import { toast } from "sonner-native";
 
 import { DemoProgressBar } from "~/components/DemoProgressBar";
+import { SkipDemoButton } from "~/components/SkipDemoButton";
 import { TOTAL_ONBOARDING_STEPS } from "../_layout";
 
 export default function DemoIntroScreen() {
@@ -41,7 +42,7 @@ export default function DemoIntroScreen() {
     };
   });
 
-  const handlePress = async () => {
+  const handlePress = () => {
     if (isLoading) return;
     setIsLoading(true);
 
@@ -144,9 +145,13 @@ export default function DemoIntroScreen() {
           />
         </View>
 
-        <Text className="absolute bottom-48 left-1/2 w-min -translate-x-1/2 rounded-2xl bg-accent-yellow px-4 py-2 text-center text-2xl font-semibold text-neutral-1">
-          Try adding an event
-        </Text>
+        <View className="absolute bottom-48 left-1/2 flex -translate-x-1/2 flex-col items-center space-y-2">
+          <Text className="w-min rounded-2xl bg-accent-yellow px-4 py-2 text-center text-2xl font-semibold text-neutral-1">
+            Try adding an event
+          </Text>
+
+          <SkipDemoButton />
+        </View>
 
         <TouchableOpacity
           onPress={handlePress}
@@ -155,6 +160,7 @@ export default function DemoIntroScreen() {
         >
           <Plus size={28} color="#E0D9FF" />
         </TouchableOpacity>
+
         <Animated.View style={animatedStyle}>
           <ChevronDown size={64} color="#5A32FB" strokeWidth={4} />
         </Animated.View>

apps/expo/src/components/EventMenu.tsx

@@ -55,6 +55,7 @@ interface EventMenuProps {
   isOwner: boolean;
   isSaved: boolean;
   menuType: "context" | "popup";
+  demoMode?: boolean;
   children?: React.ReactNode;
   onDelete?: () => Promise<void>;
 }
@@ -81,6 +82,7 @@ export function EventMenu({
   isOwner,
   isSaved,
   menuType,
+  demoMode = false,
   children,
   onDelete,
 }: EventMenuProps) {
@@ -277,6 +279,10 @@ export function EventMenu({
   };
 
   const handleMenuSelect = (title: string) => {
+    if (demoMode) {
+      toast("Demo mode: action disabled");
+      return;
+    }
     void Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
     switch (title) {
       case "Share":

apps/expo/src/components/SkipDemoButton.tsx

@@ -0,0 +1,53 @@
+import { useState } from "react";
+import { Pressable, Text } from "react-native";
+import { useRouter } from "expo-router";
+import { toast } from "sonner-native";
+
+import { useRevenueCat } from "~/providers/RevenueCatProvider";
+import { useAppStore } from "~/store";
+
+interface SkipDemoButtonProps {
+  className?: string;
+  textClassName?: string;
+}
+
+export function SkipDemoButton({
+  className = "",
+  textClassName = "text-sm text-neutral-2",
+}: SkipDemoButtonProps) {
+  const router = useRouter();
+  const { showProPaywallIfNeeded } = useRevenueCat();
+  const setHasCompletedOnboarding = useAppStore(
+    (state) => state.setHasCompletedOnboarding,
+  );
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handlePress = async () => {
+    if (isLoading) return;
+    setIsLoading(true);
+
+    try {
+      setHasCompletedOnboarding(true);
+      await showProPaywallIfNeeded();
+      router.push("/feed");
+    } catch (error) {
+      toast.error("Something went wrong", {
+        description: "Please try again",
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <Pressable
+      onPress={handlePress}
+      disabled={isLoading}
+      className={`py-2 ${className}`}
+    >
+      <Text className={textClassName}>
+        {isLoading ? "Loading..." : "or skip demo"}
+      </Text>
+    </Pressable>
+  );
+}

apps/expo/src/components/UserEventsList.tsx

@@ -60,6 +60,7 @@
   showCreator: ShowCreatorOption;
   isSaved: boolean;
   similarEventsCount?: number;
+  demoMode: boolean;
 }) {
   const {
     event,
@@ -68,6 +69,7 @@
     showCreator,
     isSaved,
     similarEventsCount,
+    demoMode,
   } = props;
   const { fontScale } = useWindowDimensions();
   const id = event.id;
@@ -130,6 +132,7 @@
       isOwner={isOwner}
       isSaved={isSaved}
       menuType="context"
+      demoMode={demoMode}
     >
       <Pressable
         onPress={() => {
@@ -326,6 +329,7 @@
     allTimeEvents: number;
   };
   promoCard?: PromoCardProps;
+  demoMode: boolean;
 }
 
 export default function UserEventsList(props: UserEventsListProps) {
@@ -339,6 +343,7 @@
     isFetchingNextPage,
     stats,
     promoCard,
+    demoMode,
   } = props;
   const { user } = useUser();
   const queryClient = useQueryClient();
@@ -452,6 +457,7 @@
               similarEventsCount={
                 similarEventsCount > 0 ? similarEventsCount : undefined
               }
+              demoMode
             />
           );
         }}