Add share button

bouzuya · Mar 19, 2024 · c547fbe · c547fbe
1 parent ca39b35
commit c547fbe
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 2 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -15,7 +15,8 @@
     "react-native-markdown-display": "^7.0.2",
     "react-native-safe-area-context": "4.8.2",
     "react-native-screens": "~3.29.0",
-    "swr": "^2.2.5"
+    "swr": "^2.2.5",
+    "@expo/vector-icons": "^14.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",

diff --git a/frontend/src/hooks/useEntryDetail.tsx b/frontend/src/hooks/useEntryDetail.tsx
@@ -1,5 +1,6 @@
+import { MaterialCommunityIcons } from "@expo/vector-icons";
 import { useEffect } from "react";
-import { Text, Pressable, TouchableOpacity, Share } from "react-native";
+import { Share, TouchableOpacity } from "react-native";
 import useSWR from "swr";
 import { useNavigation, useRoute } from "@/hooks/useNavigation";
 import type { EntryDetail } from "@/types/EntryDetail";
@@ -21,6 +22,22 @@ export function useEntryDetail(): {
   useEffect(() => {
     navigation.setOptions({
       title: date,
+      headerRight: () => (
+        <TouchableOpacity
+          onPress={() => {
+            void Share.share({
+              message: `https://blog.bouzuya.net/${date.replaceAll("-", "/")}/`,
+            });
+          }}
+        >
+          <MaterialCommunityIcons
+            color="black"
+            name="share-variant-outline"
+            size={24}
+            style={{ marginRight: 4 }}
+          />
+        </TouchableOpacity>
+      ),
     });
   }, [date, entryDetail, navigation]);