Add 'open with expo snack' option

app/_layout.tsx

@@ -1,17 +1,19 @@
-import { View } from "react-native";
+import { View, Modal, Text, Button, StyleSheet } from "react-native";
 import { Stack } from "expo-router";
 import {
   SafeAreaProvider,
   useSafeAreaInsets,
 } from "react-native-safe-area-context";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { useState } from "react";
 
 import { Colors } from "@/constants/Colors";
 
 const queryClient = new QueryClient();
 
 export default function Layout() {
   const safeArea = useSafeAreaInsets();
+  const [modalVisible, setModalVisible] = useState(false);
 
   return (
     <>
@@ -35,8 +37,55 @@ export default function Layout() {
               },
             }}
           />
+          <Modal
+            animationType="slide"
+            transparent={true}
+            visible={modalVisible}
+            onRequestClose={() => {
+              setModalVisible(!modalVisible);
+            }}
+          >
+            <View style={styles.centeredView}>
+              <View style={styles.modalView}>
+                <Text style={styles.modalText}>Expo Snack Link</Text>
+                <Button
+                  onPress={() => setModalVisible(!modalVisible)}
+                  title="Close"
+                  color={Colors.accent}
+                />
+              </View>
+            </View>
+          </Modal>
         </SafeAreaProvider>
       </QueryClientProvider>
     </>
   );
 }
+
+const styles = StyleSheet.create({
+  centeredView: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    marginTop: 22,
+  },
+  modalView: {
+    margin: 20,
+    backgroundColor: "white",
+    borderRadius: 20,
+    padding: 35,
+    alignItems: "center",
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 4,
+    elevation: 5,
+  },
+  modalText: {
+    marginBottom: 15,
+    textAlign: "center",
+  },
+});

app/index.tsx

@@ -1,6 +1,7 @@
 import { Stack } from "expo-router";
 import { useMemo, useState } from "react";
-import { Platform, StyleSheet, Text, View } from "react-native";
+import { Platform, StyleSheet, Text, View, Button } from "react-native";
+import * as Linking from 'expo-linking';
 
 import { Posts } from "@/components/posts/Posts";
 import { Option, StoriesSelect } from "@/components/Select";
@@ -14,6 +15,7 @@ import { Colors } from "@/constants/Colors";
 
 export default function HomeScreen() {
   const [storyType, setStoryType] = useState<StoryType>("topstories");
+  const [modalVisible, setModalVisible] = useState(false);
 
   const storyOptions: Option[] = useMemo(() => {
     return storyTypes.map(({ label, type }) => ({
@@ -23,6 +25,10 @@ export default function HomeScreen() {
     }));
   }, []);
 
+  const openExpoSnack = () => {
+    Linking.openURL('https://snack.expo.dev/');
+  };
+
   return (
     <>
       <Stack.Screen
@@ -35,6 +41,13 @@ export default function HomeScreen() {
               <Text style={styles.dimmedText}>{"}"}</Text>
             </View>
           ),
+          headerRight: () => (
+            <Button
+              onPress={() => setModalVisible(true)}
+              title="Open with Expo Snack"
+              color={Colors.accent}
+            />
+          ),
         }}
       />
 

build-android.sh

@@ -0,0 +1,9 @@
+#!/bin/bash
+
+# This script builds the Android app
+
+# Navigate to the project directory
+cd "$(dirname "$0")"
+
+# Run the build command
+expo build:android

components/OpenWithExpoSnackButton.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Button } from 'react-native';
+import * as Linking from 'expo-linking';
+import { EXPO_SNACK_URL } from '@/constants/ExpoSnack';
+
+const OpenWithExpoSnackButton = () => {
+  const openExpoSnack = () => {
+    Linking.openURL(EXPO_SNACK_URL);
+  };
+
+  return (
+    <Button
+      onPress={openExpoSnack}
+      title="Open with Expo Snack"
+      color="#ff6600"
+    />
+  );
+};
+
+export default OpenWithExpoSnackButton;

components/OpenWithExpoSnackModal.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { Modal, View, Text, Button, StyleSheet } from 'react-native';
+import { EXPO_SNACK_URL } from '@/constants/ExpoSnack';
+import { Colors } from '@/constants/Colors';
+
+const OpenWithExpoSnackModal = ({ modalVisible, setModalVisible }) => {
+  return (
+    <Modal
+      animationType="slide"
+      transparent={true}
+      visible={modalVisible}
+      onRequestClose={() => {
+        setModalVisible(!modalVisible);
+      }}
+    >
+      <View style={styles.centeredView}>
+        <View style={styles.modalView}>
+          <Text style={styles.modalText}>Expo Snack Link</Text>
+          <Button
+            onPress={() => setModalVisible(!modalVisible)}
+            title="Close"
+            color={Colors.accent}
+          />
+        </View>
+      </View>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  centeredView: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    marginTop: 22,
+  },
+  modalView: {
+    margin: 20,
+    backgroundColor: "white",
+    borderRadius: 20,
+    padding: 35,
+    alignItems: "center",
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 4,
+    elevation: 5,
+  },
+  modalText: {
+    marginBottom: 15,
+    textAlign: "center",
+  },
+});
+
+export default OpenWithExpoSnackModal;

constants/ExpoSnack.ts

@@ -0,0 +1 @@
+export const EXPO_SNACK_URL = 'https://snack.expo.dev/';

package.json

@@ -22,6 +22,7 @@
     "@tanstack/react-query": "^5.51.23",
     "date-fns": "^3.6.0",
     "expo": "~51.0.26",
+    "expo-blur": "~13.0.2",
     "expo-constants": "~16.0.2",
     "expo-dev-client": "~4.0.22",
     "expo-font": "~12.0.9",
@@ -45,8 +46,7 @@
     "react-native-safe-area-context": "4.10.5",
     "react-native-screens": "3.31.1",
     "react-native-svg": "15.2.0",
-    "react-native-web": "~0.19.10",
-    "expo-blur": "~13.0.2"
+    "react-native-web": "~0.19.10"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",