Added working share buttons

Author: srxcode

app/(tabs)/profile/[user_id].tsx

@@ -56,7 +56,7 @@ export default function OtherProfileScreen() {
 
     ), [currentUser])
 
-    async function showPosts(UID) {
+    async function showPosts(UID: string) {
         const c = collection(db, "posts");
         const q = query(c,
             where("uid", "==", UID),

package.json

@@ -25,6 +25,7 @@
     "expo": "53.0.22",
     "expo-auth-session": "~6.2.1",
     "expo-blur": "~14.1.5",
+    "expo-clipboard": "~7.1.5",
     "expo-constants": "~17.1.7",
     "expo-dev-client": "^5.2.4",
     "expo-device": "^7.1.4",

src/components/containers/post.tsx

@@ -90,6 +90,7 @@ const Post = memo(function Post({ id, user_uid, media, used_media, message, uid,
                     </Pressable>
                 </View> */}
                 <ThreeDots
+                    postId={id}
                     data={[
                         (uid == user_uid) ?
                             { text: "Delete Post", func: () => { deletePost(id) }, icon: "delete" } :

src/components/containers/shareBtns.tsx

@@ -0,0 +1,39 @@
+import OnlyIconButton from "@components/inputs/onlyIconButton"
+import { sharePost, sharePostToFacebook, sharePostToReddit, sharePostToWhatsapp } from "@utils/otherUtils"
+import { View } from "react-native"
+
+interface Props {
+    postId: string
+}
+
+export default function ShareBtns({ postId }: Props) {
+
+    return (
+        <View style={{ gap: 10, width: "100%", flexDirection: "row" }}>
+            <OnlyIconButton
+                func={() => { sharePostToWhatsapp(postId) }}
+                icon='whatsapp'
+            />
+
+            <OnlyIconButton
+                func={() => { sharePostToFacebook(postId) }}
+                icon='facebook'
+            />
+
+            <OnlyIconButton
+                func={() => { sharePostToReddit(postId) }}
+                icon='reddit'
+            />
+
+            <OnlyIconButton
+                func={() => { }}
+                icon='link-variant'
+            />
+
+            <OnlyIconButton
+                func={() => { sharePost(postId) }}
+                icon='dots-horizontal'
+            />
+        </View>
+    )
+}

src/components/display/threeDots.tsx

@@ -6,15 +6,17 @@ import { Pressable, View } from 'react-native';
 
 
 interface Props {
-    data: BottomSheetItem[]
+    data: BottomSheetItem[],
+    postId: string
 }
 
-export default function ThreeDots({ data }: Props) {
+export default function ThreeDots({ data, postId }: Props) {
     const [isVisible, setVisible] = useState(false);
-    const { setSheetData, closeSheet, expandSheet } = useBottomSheetContext();
+    const { setSheetData, setExtraData, closeSheet, expandSheet } = useBottomSheetContext();
 
     function toggleSheet() {
         setSheetData(data);
+        setExtraData({ postId: postId });
         setVisible(!isVisible);
         if (isVisible) {
             closeSheet();

src/components/inputs/onlyIconButton.tsx

@@ -1,12 +1,12 @@
 //components
-import { ViewStyle, Pressable, StyleProp, StyleSheet } from "react-native"
-import MaterialDesignIcons from "@react-native-vector-icons/material-design-icons"
+import MaterialDesignIcons from "@react-native-vector-icons/material-design-icons";
+import { Pressable, StyleProp, StyleSheet, ViewStyle } from "react-native";
 
 
 type Props = {
     func: () => void;
     style?: StyleProp<ViewStyle>;
-    icon: "account-plus-outline" | "arrow-left" | "magnify";
+    icon: "account-plus-outline" | "arrow-left" | "magnify" | "whatsapp" | "facebook" | "reddit" | "link-variant" | "dots-horizontal";
 }
 
 export default function OnlyIconButton({ func, style, icon }: Props) {

src/contexts/BottomSheetContext.tsx

@@ -1,20 +1,23 @@
+import ShareBtns from '@components/containers/shareBtns';
 import CustomText from '@components/display/customText';
 import BottomSheet, { BottomSheetBackdrop, BottomSheetView } from '@gorhom/bottom-sheet';
 import MaterialDesignIcons from '@react-native-vector-icons/material-design-icons';
-import { BottomSheetItem } from '@utils/types';
+import { BottomSheetData, BottomSheetItem } from '@utils/types';
 import React, { createContext, useCallback, useContext, useMemo, useRef, useState } from "react";
 import { StyleSheet } from 'react-native';
 import { Pressable } from 'react-native-gesture-handler';
 
 type sheetContextType = {
     setSheetData: (data: BottomSheetItem[]) => void;
+    setExtraData: (data: BottomSheetData) => void;
     closeSheet: () => void;
     expandSheet: () => void;
 }
 const BottomSheetContext = createContext<sheetContextType | null>(null);
 
 export function BottomSheetProvider({ children }: { children: React.ReactNode }) {
     const [data, setData] = useState<BottomSheetItem[]>([]);
+    const [extraData, setEData] = useState<BottomSheetData>();
     const bottomSheetRef = useRef<BottomSheet>(null);
     const snapPoints = useMemo(() => ["25%", "50%"], []);
 
@@ -32,6 +35,10 @@ export function BottomSheetProvider({ children }: { children: React.ReactNode })
     function setSheetData(data: BottomSheetItem[]) {
         setData(data);
     }
+
+    function setExtraData(data: BottomSheetData) {
+        setEData(data);
+    }
     function closeSheet() {
         bottomSheetRef.current?.close();
     }
@@ -44,6 +51,7 @@ export function BottomSheetProvider({ children }: { children: React.ReactNode })
         <BottomSheetContext.Provider
             value={{
                 setSheetData,
+                setExtraData,
                 closeSheet,
                 expandSheet
             }}
@@ -60,6 +68,7 @@ export function BottomSheetProvider({ children }: { children: React.ReactNode })
 
             >
                 <BottomSheetView style={styles.contentContainer}>
+                    <ShareBtns postId={extraData ? extraData.postId : ""} />
                     {
                         data.map((item: BottomSheetItem) => (
                             <Pressable onPress={item.func} key={item.text} style={styles.button}>
@@ -89,7 +98,8 @@ const styles = StyleSheet.create({
         backgroundColor: "#17171d",
         borderColor: "#25252f",
         flex: 1,
-        padding: 36,
+        paddingVertical: 10,
+        paddingHorizontal: 20,
         alignItems: 'flex-start',
         zIndex: 1,
     },

src/utils/otherUtils.tsx

@@ -1,5 +1,8 @@
 import { auth, db } from "@auth/firebase";
+import * as Clipboard from 'expo-clipboard';
+import * as Linking from 'expo-linking';
 import { addDoc, collection, deleteDoc, doc, getCountFromServer, getDoc, increment, serverTimestamp, setDoc, updateDoc } from "firebase/firestore";
+import { Alert, Share } from "react-native";
 import { extractUrl } from "./stringTimeUtils";
 
 export async function uploadToHc(urls: string[]) {
@@ -185,4 +188,64 @@ export async function deletePost(postId: string) {
     } catch (e) {
         console.log("Couldn't delete post", e);
     }
-}
+}
+
+
+export async function sharePost(id: string) {
+    const redirectUrl = Linking.createURL(`/comments/${id}`);
+    const cleanedUrl = redirectUrl.replace("hacknet:///", "https://hacknet-web.vercel.app/")
+    try {
+        await Share.share({
+            message: `Check out this post! ${cleanedUrl}`
+        });
+    } catch (e: any) {
+        if (e) {
+            console.log(e.message)
+        }
+    }
+}
+export async function shareToClipboard(id: string) {
+    const redirectUrl = Linking.createURL(`/comments/${id}`);
+    const cleanedUrl = redirectUrl.replace("hacknet:///", "https://hacknet-web.vercel.app/")
+    Clipboard.setStringAsync(cleanedUrl);
+}
+
+export async function sharePostToWhatsapp(id: string) {
+    const redirectUrl = Linking.createURL(`/comments/${id}`);
+    const cleanedUrl = redirectUrl.replace("hacknet:///", "https://hacknet-web.vercel.app/")
+    const msg = `Check out this post! ${cleanedUrl}`;
+    const url = `whatsapp://send?text=${encodeURIComponent(msg)}`;
+
+    Linking.canOpenURL(url).then(async () => {
+        await Linking.openURL(url);
+    }).catch((e) => {
+        Alert.alert("Whatsapp is probably not installed...");
+    });
+}
+
+
+export async function sharePostToFacebook(id: string) {
+    const redirectUrl = Linking.createURL(`/comments/${id}`);
+    const cleanedUrl = redirectUrl.replace("hacknet:///", "https://hacknet-web.vercel.app/")
+    const url = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(cleanedUrl)}`;
+
+    Linking.canOpenURL(url).then(async () => {
+        await Linking.openURL(url);
+    }).catch((e) => {
+        Alert.alert("Facebook is probably not installed...");
+    });
+}
+
+export async function sharePostToReddit(id: string) {
+    const redirectUrl = Linking.createURL(`/comments/${id}`);
+    const cleanedUrl = redirectUrl.replace("hacknet:///", "https://hacknet-web.vercel.app/")
+    const url = `reddit://submit?url=${encodeURIComponent(cleanedUrl)}&title=Check+Out+This+Post:&type=LINK`;
+    const fallBackurl = `https://www.reddit.com/submit?url=${encodeURIComponent(cleanedUrl)}&title=Check+Out+This+Post:&type=LINK`;
+
+    Linking.canOpenURL(url).then(async () => {
+        await Linking.openURL(url);
+    }).catch(async (e) => {
+        await Linking.openURL(fallBackurl);
+    });
+}
+

src/utils/types.tsx

@@ -35,4 +35,8 @@ export type BottomSheetItem = {
     text: string;
     func: () => void;
     icon: "delete" | "share-variant" | "account-plus" | "heart"
+};
+
+export type BottomSheetData = {
+    postId: string;
 };

yarn.lock

@@ -3979,6 +3979,11 @@ expo-blur@~14.1.5:
   resolved "https://registry.yarnpkg.com/expo-blur/-/expo-blur-14.1.5.tgz#910712389e19286ccdc136275bf569f427aa05ef"
   integrity sha512-CCLJHxN4eoAl06ESKT3CbMasJ98WsjF9ZQEJnuxtDb9ffrYbZ+g9ru84fukjNUOTtc8A8yXE5z8NgY1l0OMrmQ==
 
+expo-clipboard@~7.1.5:
+  version "7.1.5"
+  resolved "https://registry.yarnpkg.com/expo-clipboard/-/expo-clipboard-7.1.5.tgz#6980f825d4d7f53aa557d3321dd975bf65541910"
+  integrity sha512-TCANUGOxouoJXxKBW5ASJl2WlmQLGpuZGemDCL2fO5ZMl57DGTypUmagb0CVUFxDl0yAtFIcESd78UsF9o64aw==
+
 expo-constants@~17.1.7:
   version "17.1.7"
   resolved "https://registry.yarnpkg.com/expo-constants/-/expo-constants-17.1.7.tgz#35194c1cef51f1ea756333418f1e077be79a012b"