From 418d3dcaf7f21b5f1cc9e0033699cfb0029413dd Mon Sep 17 00:00:00 2001
From: Mike-FreeAI <145850829+Mike-FreeAI@users.noreply.github.com>
Date: Tue, 27 Aug 2024 14:20:32 +0100
Subject: [PATCH 1/2] Add 'open with expo snack' option
Add "Open with Expo Snack" button and modal to the app.
* **Home Screen (`app/index.tsx`)**
- Add a new button to the header that opens a modal with the Expo Snack link.
- Use the `Linking` module from `react-native` to open the Expo Snack link.
- Add state management for modal visibility.
* **Layout (`app/_layout.tsx`)**
- Add a new modal component to the layout.
- Use the `Modal` component from `react-native` to create the modal.
- Add state management for modal visibility.
* **New Components**
- Add `OpenWithExpoSnackButton.tsx` to create a new button component that opens the Expo Snack link.
- Add `OpenWithExpoSnackModal.tsx` to create a new modal component that contains the Expo Snack link.
* **Constants**
- Add `ExpoSnack.ts` to store and export the Expo Snack link as a constant.
---
app/_layout.tsx | 51 +++++++++++++++++++++-
app/index.tsx | 15 ++++++-
components/OpenWithExpoSnackButton.tsx | 20 +++++++++
components/OpenWithExpoSnackModal.tsx | 58 ++++++++++++++++++++++++++
constants/ExpoSnack.ts | 1 +
5 files changed, 143 insertions(+), 2 deletions(-)
create mode 100644 components/OpenWithExpoSnackButton.tsx
create mode 100644 components/OpenWithExpoSnackModal.tsx
create mode 100644 constants/ExpoSnack.ts
diff --git a/app/_layout.tsx b/app/_layout.tsx
index facac5c..e06679d 100644
--- a/app/_layout.tsx
+++ b/app/_layout.tsx
@@ -1,10 +1,11 @@
-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";
@@ -12,6 +13,7 @@ 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() {
},
}}
/>
+ {
+ setModalVisible(!modalVisible);
+ }}
+ >
+
+
+ Expo Snack Link
+
+
+
);
}
+
+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",
+ },
+});
diff --git a/app/index.tsx b/app/index.tsx
index 228da54..a7fefb6 100644
--- a/app/index.tsx
+++ b/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("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 (
<>
{"}"}
),
+ headerRight: () => (
+