app-expo-cli 1.0.0

package/template/src/app/common/image.tsx

@@ -0,0 +1,202 @@
+import { router, useGlobalSearchParams } from "expo-router";
+import React, { useRef } from "react";
+import {
+  Dimensions,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from "react-native";
+import {
+  GestureHandlerRootView,
+  PanGestureHandler,
+  PinchGestureHandler,
+  TapGestureHandler,
+} from "react-native-gesture-handler";
+import Animated, {
+  useAnimatedGestureHandler,
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+  withTiming,
+} from "react-native-reanimated";
+
+import tw from "@/src/lib/tailwind";
+import { SvgXml } from "react-native-svg";
+
+const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get("window");
+const AnimatedImage = Animated.createAnimatedComponent(Animated.Image);
+
+const clamp = (value: number, min: number, max: number) => {
+  "worklet";
+  return Math.min(Math.max(value, min), max);
+};
+
+const ImageModal = () => {
+  const { url }: { url?: string } = useGlobalSearchParams();
+
+  console.log(url);
+
+  const scale = useSharedValue(1);
+  const translateX = useSharedValue(0);
+  const translateY = useSharedValue(0);
+
+  const pinchRef = useRef(null);
+  const panRef = useRef(null);
+  const doubleTapRef = useRef(null);
+
+  const pinchHandler = useAnimatedGestureHandler({
+    onStart: (_, ctx: any) => {
+      ctx.startScale = scale.value;
+    },
+    onActive: (event, ctx: any) => {
+      scale.value = clamp(ctx.startScale * event.scale, 0.8, 4);
+    },
+    onEnd: () => {
+      if (scale.value < 1) scale.value = withTiming(1);
+      if (scale.value > 4) scale.value = withTiming(4);
+
+      // Adjust translation after pinch to stay in bounds
+      const maxX = (SCREEN_WIDTH * scale.value - SCREEN_WIDTH) / 2;
+      const maxY = (SCREEN_HEIGHT * scale.value - SCREEN_HEIGHT) / 2;
+
+      translateX.value = withTiming(clamp(translateX.value, -maxX, maxX));
+      translateY.value = withTiming(clamp(translateY.value, -maxY, maxY));
+    },
+  });
+
+  const panHandler = useAnimatedGestureHandler({
+    onStart: (_, ctx: any) => {
+      ctx.startX = translateX.value;
+      ctx.startY = translateY.value;
+    },
+    onActive: (event, ctx: any) => {
+      const maxX = (SCREEN_WIDTH * scale.value - SCREEN_WIDTH) / 2;
+      const maxY = (SCREEN_HEIGHT * scale.value - SCREEN_HEIGHT) / 2;
+
+      translateX.value = clamp(ctx.startX + event.translationX, -maxX, maxX);
+      translateY.value = clamp(ctx.startY + event.translationY, -maxY, maxY);
+    },
+    onEnd: () => {
+      const maxX = (SCREEN_WIDTH * scale.value - SCREEN_WIDTH) / 2;
+      const maxY = (SCREEN_HEIGHT * scale.value - SCREEN_HEIGHT) / 2;
+
+      translateX.value = withSpring(clamp(translateX.value, -maxX, maxX));
+      translateY.value = withSpring(clamp(translateY.value, -maxY, maxY));
+    },
+  });
+
+  const doubleTapHandler = useAnimatedGestureHandler({
+    onActive: () => {
+      if (scale.value > 1.5) {
+        scale.value = withTiming(1);
+        translateX.value = withTiming(0);
+        translateY.value = withTiming(0);
+      } else {
+        scale.value = withTiming(2);
+      }
+    },
+  });
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [
+      { translateX: translateX.value },
+      { translateY: translateY.value },
+      { scale: scale.value },
+    ],
+  }));
+
+  return (
+    <GestureHandlerRootView style={styles.flex}>
+      {/* Close Button */}
+      <TouchableOpacity
+        onPress={() => router.dismiss()}
+        style={tw`flex-row items-center gap-3 absolute bottom-4 right-4 z-50`}
+      >
+        <View
+          style={[
+            tw`bg-[#3D3D3D] w-12 h-12 justify-center items-center rounded-full `,
+          ]}
+        >
+          <SvgXml
+            xml={`<svg width="12" height="18" viewBox="0 0 12 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.477124 9.99984L9.69575 18L12 16.0003L3.9335 9L12 1.99969L9.69575 0L0.477124 8.00016C0.171621 8.26536 0 8.625 0 9C0 9.375 0.171621 9.73464 0.477124 9.99984Z" fill="white"/>
+</svg>
+
+
+
+`}
+          />
+        </View>
+      </TouchableOpacity>
+
+      {/* Gesture Handlers */}
+      <PanGestureHandler
+        onGestureEvent={panHandler}
+        minPointers={1}
+        maxPointers={2}
+        ref={panRef}
+      >
+        <Animated.View style={styles.flex}>
+          <PinchGestureHandler
+            onGestureEvent={pinchHandler}
+            ref={pinchRef}
+            simultaneousHandlers={[panRef, doubleTapRef]}
+          >
+            <Animated.View style={styles.flex}>
+              <TapGestureHandler
+                onGestureEvent={doubleTapHandler}
+                numberOfTaps={2}
+                ref={doubleTapRef}
+                maxDelayMs={300}
+              >
+                <Animated.View style={styles.imageWrapper}>
+                  {url ? (
+                    <AnimatedImage
+                      source={{ uri: url }}
+                      style={[styles.image, animatedStyle]}
+                      resizeMode="contain"
+                    />
+                  ) : (
+                    <View style={styles.placeholder}>
+                      <Text style={tw`text-white`}>No image URL provided</Text>
+                    </View>
+                  )}
+                </Animated.View>
+              </TapGestureHandler>
+            </Animated.View>
+          </PinchGestureHandler>
+        </Animated.View>
+      </PanGestureHandler>
+    </GestureHandlerRootView>
+  );
+};
+
+const styles = StyleSheet.create({
+  flex: { flex: 1, backgroundColor: tw.color("base") },
+  closeRow: {
+    position: "absolute",
+    top: 50,
+    left: 0,
+    right: 0,
+    zIndex: 10,
+    flexDirection: "row",
+    justifyContent: "flex-start",
+    paddingHorizontal: 10,
+  },
+  imageWrapper: {
+    width: "100%",
+    height: "100%",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  image: { width: "100%", height: "100%", backgroundColor: "transparent" },
+  placeholder: {
+    width: "100%",
+    height: "100%",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+});
+
+export default ImageModal;

package/template/src/app/common/openurl.tsx

@@ -0,0 +1,42 @@
+import { Text, TouchableOpacity, View } from "react-native";
+import { router, useGlobalSearchParams } from "expo-router";
+
+import React from "react";
+import { SvgXml } from "react-native-svg";
+import WebView from "react-native-webview";
+import tw from "@/src/lib/tailwind";
+
+const OpenUrl = () => {
+  const params = useGlobalSearchParams();
+  return (
+    <View style={tw`flex-1 bg-base`}>
+      <TouchableOpacity
+        onPress={() => router.dismiss()}
+        style={tw`flex-row items-center gap-3 absolute bottom-4 right-4 z-50`}
+      >
+        <View
+          style={[
+            tw`bg-[#3D3D3D] w-12 h-12 justify-center items-center rounded-full `,
+          ]}
+        >
+          <SvgXml
+            xml={`<svg width="12" height="18" viewBox="0 0 12 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.477124 9.99984L9.69575 18L12 16.0003L3.9335 9L12 1.99969L9.69575 0L0.477124 8.00016C0.171621 8.26536 0 8.625 0 9C0 9.375 0.171621 9.73464 0.477124 9.99984Z" fill="white"/>
+</svg>
+
+
+
+`}
+          />
+        </View>
+      </TouchableOpacity>
+      {params?.url ? (
+        <WebView source={{ uri: params?.url } as any} style={{ flex: 1 }} />
+      ) : (
+        <Text>no url</Text>
+      )}
+    </View>
+  );
+};
+
+export default OpenUrl;

package/template/src/app/home/_layout.tsx

@@ -0,0 +1,29 @@
+import { Stack } from "expo-router";
+
+export const unstable_settings = {
+  initialRouteName: "index",
+};
+
+export default function RootLayout() {
+  // const { top, bottom } = useSafeAreaInsets();
+  return (
+    <Stack
+      screenOptions={{
+        headerShown: false,
+        // statusBarAnimation: "fade",
+        statusBarStyle: "light",
+      }}
+    >
+      <Stack.Screen name="tabs" options={{}} />
+      <Stack.Screen name="other_user" options={{}} />
+      <Stack.Screen name="post_vibe" options={{}} />
+      <Stack.Screen name="post_music" options={{}} />
+      <Stack.Screen name="post_podcast" options={{}} />
+      <Stack.Screen name="create_mood" options={{}} />
+      <Stack.Screen name="view_post" options={{}} />
+      <Stack.Screen name="report" options={{}} />
+      <Stack.Screen name="report_details" options={{}} />
+      <Stack.Screen name="appeal" options={{}} />
+    </Stack>
+  );
+}

package/template/src/app/home/drawer/_layout.tsx

@@ -0,0 +1,27 @@
+import { Drawer } from "expo-router/drawer";
+
+function CustomDrawerContent(props) {
+  return (
+    <DrawerContentScrollView {...props}>
+      <DrawerItemList {...props} />
+      <DrawerItem
+        label="Help"
+        onPress={() => Linking.openURL("https://mywebsite.com/help")}
+      />
+    </DrawerContentScrollView>
+  );
+}
+
+export default function Layout() {
+  return (
+    <Drawer>
+      <Drawer.Screen
+        name="index" // This is the name of the page and must match the url from root
+        options={{
+          drawerLabel: "Home",
+          title: "overview",
+        }}
+      />
+    </Drawer>
+  );
+}

package/template/src/app/home/tabs/_layout.tsx

@@ -0,0 +1,75 @@
+import { Text, View } from "react-native";
+
+import { Tabs } from "expo-router";
+
+// Define your route params
+
+// Props type for MyTabBar
+function MyTabBar({ state, descriptors, navigation }) {
+  return (
+    <View style={{ flexDirection: "row" }}>
+      {state.routes.map((route, index) => {
+        const { options } = descriptors[route.key];
+        const label =
+          options.tabBarLabel !== undefined
+            ? options.tabBarLabel
+            : options.title !== undefined
+              ? options.title
+              : route.name;
+
+        const isFocused = state.index === index;
+
+        const onPress = () => {
+          const event = navigation.emit({
+            type: "tabPress",
+            target: route.key,
+            canPreventDefault: true,
+          });
+
+          if (!isFocused && !event.defaultPrevented) {
+            navigation.navigate(route.name, route.params);
+          }
+        };
+
+        const onLongPress = () => {
+          navigation.emit({
+            type: "tabLongPress",
+            target: route.key,
+          });
+        };
+
+        return (
+          <PlatformPressable
+            key={route.key}
+            href={buildHref(route.name, route.params)}
+            accessibilityState={isFocused ? { selected: true } : {}}
+            accessibilityLabel={options.tabBarAccessibilityLabel}
+            testID={options.tabBarButtonTestID}
+            onPress={onPress}
+            onLongPress={onLongPress}
+            style={{ flex: 1 }}
+          >
+            <Text style={{ color: isFocused ? colors.primary : colors.text }}>
+              {label}
+            </Text>
+          </PlatformPressable>
+        );
+      })}
+    </View>
+  );
+}
+
+export default function Layout() {
+  return (
+    <Tabs
+      screenOptions={{
+        headerShown: false,
+        tabBarHideOnKeyboard: true,
+        lazy: true,
+      }}
+      tabBar={(props: any) => <MyTabBar {...props} />}
+    >
+      <Tabs.Screen name="index" />
+    </Tabs>
+  );
+}

package/template/src/app/home/tabs/index.tsx

@@ -0,0 +1,11 @@
+import { Text, View } from "react-native";
+
+const Home = () => {
+  return (
+    <View>
+      <Text>index</Text>
+    </View>
+  );
+};
+
+export default Home;

package/template/src/app/index.tsx

@@ -0,0 +1,11 @@
+import { Text, View } from "react-native";
+
+import tw from "../lib/tailwind";
+
+export default function Index() {
+  return (
+    <View style={tw``}>
+      <Text style={tw``}>Edit app/index.tsx to edit this screen.</Text>
+    </View>
+  );
+}

package/template/src/app/modals/confirmation_logout_modal.tsx

@@ -0,0 +1,78 @@
+import { router, useGlobalSearchParams } from "expo-router";
+import { Pressable, Text, View } from "react-native";
+
+import TButton from "@/src/lib/buttons/TButton";
+import tw from "@/src/lib/tailwind";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+
+const ConfirmationModal = () => {
+  const params = useGlobalSearchParams();
+
+  const handleUnfollow = async () => {
+    try {
+      await AsyncStorage.removeItem("token");
+      router.canDismiss() && router.dismissAll();
+      router.replace("/auth");
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  return (
+    <Pressable
+      onPress={() => {
+        router.dismiss();
+      }}
+      style={tw`flex-1 bg-black/45 items-center justify-center`}
+    >
+      <View
+        style={tw`w-[90%] bg-black/85 border border-secondary rounded-xl overflow-hidden items-center justify-center p-4`}
+      >
+        <View style={tw`items-center gap-5 w-full py-4`}>
+          {/* <Text style={tw`text-white text-xl font-InterBold text-center`}>
+          {subject || "subject"}
+        </Text> */}
+          {/* <SvgXml xml={Icon.unfriend} width={80} height={80} /> */}
+
+          <View style={tw`gap-2 w-full items-center`}>
+            <Text style={tw`text-white text-2xl font-InterBold text-center`}>
+              Are you sure ?
+            </Text>
+            <Text
+              style={tw`text-gray-400 text-xs font-InterRegular text-center `}
+            >
+              If want you to logout from the app. {"\n"} then press sure!
+              otherwise press cancel
+            </Text>
+          </View>
+
+          <View style={tw`flex-row gap-3`}>
+            <TButton
+              offGradient
+              containerStyle={tw`w-[45%]  self-center bg-black border border-secondary rounded-xl h-13`}
+              titleStyle={tw`text-sm font-InterSemiBold`}
+              onPress={() => {
+                router?.dismiss();
+              }}
+              title={"Cancel"}
+            />
+            <TButton
+              containerStyle={tw`w-[45%]   self-center h-13`}
+              titleStyle={tw`text-sm font-InterSemiBold`}
+              gradinLayoutStyle={tw`rounded-xl`}
+              onPress={() => {
+                router?.dismiss();
+                // router.push("/profile_setup");
+                // route && router.push(route);
+                handleUnfollow();
+              }}
+              title={"Sure"}
+            />
+          </View>
+        </View>
+      </View>
+    </Pressable>
+  );
+};
+
+export default ConfirmationModal;

package/template/src/app/modals/payment_modal.tsx

@@ -0,0 +1,105 @@
+import { _HIGHT, _WIDTH } from "@/src/utils/utils";
+import { router, useGlobalSearchParams } from "expo-router";
+import { Alert, View } from "react-native";
+
+import ModalHeader from "@/src/components/ModalHeader";
+import tw from "@/src/lib/tailwind";
+import React from "react";
+import { WebView } from "react-native-webview";
+
+const userAgent =
+  "Mozilla/5.0 (Linux; Android 10; SM-G975F) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Mobile Safari/537.36";
+
+// --- This JavaScript will try to force the loaded website's background to black ---
+// This is useful if the website itself doesn't have a dark mode.
+
+// --- Main Purchase Screen Component ---
+const PurchaseScreen = () => {
+  const [data, setData] = React.useState<any>(null);
+
+  const handlePurchase = (values: any) => {
+    // console.log("Payment Details:", values);
+    Alert.alert("Payment Successful", "Your plan has been purchased.");
+    router.dismiss();
+  };
+
+  const param = useGlobalSearchParams();
+
+  React.useLayoutEffect(() => {
+    try {
+      const parsedData = JSON?.parse(
+        Array.isArray(param.data) ? param.data[0] : param.data || "{}"
+      );
+      setData(parsedData);
+    } catch (e) {
+      console.error("Failed to parse data:", e);
+      setData({}); // Set to empty object on error
+    }
+  }, [param.data]);
+
+  // console.log(data);
+
+  return (
+    <View style={tw`flex-1 bg-black/60 justify-end items-center w-full`}>
+      <View
+        style={[
+          // Changed bg-base to bg-black to make the modal background dark
+          tw`bg-black rounded-t-2xl`,
+          {
+            height: _HIGHT * 0.9,
+            width: _WIDTH,
+          },
+        ]}
+      >
+        {/* Header */}
+        <ModalHeader title="Payment" onPress={() => router.dismiss()} />
+        {data?.session_url || data?.url ? (
+          <WebView
+            // Changed bg-base to bg-black and added flex-1
+            // This makes the WebView's own background black and ensures it fills the space
+            style={tw`bg-black flex-1`}
+            source={
+              param.type === "subscription"
+                ? {
+                    uri: data?.session_url,
+                  }
+                : {
+                    uri: data?.url,
+                  }
+            }
+            startInLoadingState={true}
+            userAgent={userAgent}
+            javaScriptEnabled={true}
+            domStorageEnabled={true}
+            forceDarkOn={true} // You already had this, which is correct!
+            // --- Injected JavaScript ---
+            // This runs the code from `forceDarkJS` to force the website content
+            // to have a black background, just in case forceDarkOn isn't enough.
+            // injectedJavaScript={forceDarkJS}
+            // Run this on the first load
+            onMessage={() => {}} // Required for injectedJavaScript to run on first load
+            directionalLockEnabled
+            sharedCookiesEnabled={true}
+            thirdPartyCookiesEnabled={true}
+            originWhitelist={["*"]}
+            onNavigationStateChange={(navState) => {
+              if (navState.url.includes("success")) {
+                handlePurchase(data);
+              }
+              if (navState.url.includes("cancel")) {
+                router.dismiss();
+              }
+            }}
+          />
+        ) : (
+          // Added a fallback view in case session_url is missing
+          <View style={tw`flex-1 items-center justify-center bg-black`}>
+            {/* You could put a loading spinner or error message here */}
+          </View>
+        )}
+      </View>
+    </View>
+  );
+};
+
+export default PurchaseScreen;

package/template/src/app/modals/success_modal.tsx

@@ -0,0 +1,72 @@
+import { router, useGlobalSearchParams } from "expo-router";
+import { Platform, Pressable, Text, View } from "react-native";
+
+import { Icon } from "@/assets/icons/Icon";
+import TButton from "@/src/lib/buttons/TButton";
+import tw from "@/src/lib/tailwind";
+import { BlurView } from "expo-blur";
+import React from "react";
+import { SvgXml } from "react-native-svg";
+
+const Success_modal = () => {
+  const params = useGlobalSearchParams();
+  // ?title='You’re All Set!'&subtitle='Your password has been changed successfully!'&buttonTitle='Back to login'&route='/auth
+  // const { title, subtitle, buttonTitle, route }: any = params;
+  const CommonContent = () => {
+    return (
+      <View style={tw`items-center gap-5 w-full`}>
+        <SvgXml width={80} height={80} xml={Icon.check2} />
+
+        <View style={tw`gap-2 w-full items-center`}>
+          <Text style={tw`text-white text-2xl font-semibold text-center`}>
+            {params?.message || "Email sent successfully"}
+          </Text>
+        </View>
+
+        <TButton
+          containerStyle={tw`w-full  mt-3 h-13 self-center `}
+          gradinLayoutStyle={tw`rounded-xl`}
+          onPress={() => {
+            router?.dismiss();
+            // router.push("/home/tabs/account");
+            if (params?.route as string) {
+              router.push(params?.route as any);
+            } else {
+              router?.dismiss();
+            }
+          }}
+          title={(params?.b_text as string) || "Done"}
+        />
+      </View>
+    );
+  };
+
+  return (
+    <Pressable
+      onPress={() => {
+        router.dismiss();
+      }}
+      style={tw`flex-1 bg-black/45 items-center justify-center`}
+    >
+      {Platform.OS === "ios" ? (
+        <BlurView
+          style={tw`w-[90%]   rounded-xl overflow-hidden items-center justify-center p-6 pb-8`}
+          tint="dark"
+          blurReductionFactor={5}
+          intensity={100}
+          experimentalBlurMethod="dimezisBlurView"
+        >
+          <CommonContent />
+        </BlurView>
+      ) : (
+        <View
+          style={tw`w-[90%]  bg-black/85 border border-secondary rounded-xl overflow-hidden items-center justify-center p-6 pb-8`}
+        >
+          <CommonContent />
+        </View>
+      )}
+    </Pressable>
+  );
+};
+
+export default Success_modal;

package/template/src/app/modals/toaster.tsx

@@ -0,0 +1,31 @@
+import { Text, View } from "react-native";
+import { router, useGlobalSearchParams, usePathname } from "expo-router";
+
+import React from "react";
+import tw from "@/src/lib/tailwind";
+
+const Taster = () => {
+  const params = useGlobalSearchParams();
+  const pathname = usePathname(); // current route path
+
+  React.useEffect(() => {
+    const currentPath = pathname; // save the path when modal loads
+
+    const timer = setTimeout(() => {
+      // check if user still on this modal page
+      if (router.canGoBack() && pathname === currentPath) {
+        router.dismiss();
+      }
+    }, Number(params?.time) || 2000);
+
+    return () => clearTimeout(timer);
+  }, [params?.time, pathname]);
+
+  return (
+    <View style={tw`p-4 bg-gray-900`}>
+      <Text style={tw`text-white`}>{params?.content}</Text>
+    </View>
+  );
+};
+
+export default Taster;