app-expo-cli 1.0.5 → 1.0.7

package/template/src/lib/progressBar/ProgressBar.tsx

@@ -0,0 +1,64 @@
+import Svg, { Circle } from "react-native-svg";
+
+import React from "react";
+import { View } from "react-native";
+// CircularProgressBar.js
+import tw from "@/src/lib/tailwind"; // Assuming you use tailwind-react-native-classnames
+
+interface CircularProgressBarProps {
+  size?: number;
+  strokeWidth?: number;
+  progress?: number;
+  bgColor?: string;
+  progressColor?: string;
+  children?: React.ReactNode;
+}
+
+const CircularProgressBar = ({
+  size = 130,
+  strokeWidth = 10,
+  progress = 75, // The progress percentage (0-100)
+  bgColor = "#AFAFAF",
+  progressColor = "#FF6D00",
+  children,
+}: CircularProgressBarProps) => {
+  // 1. Calculations
+  const radius = (size - strokeWidth) / 2;
+  const circumference = 2 * Math.PI * radius;
+  const strokeDashoffset = circumference - (circumference * progress) / 100;
+
+  return (
+    <View style={tw`justify-center items-center`}>
+      <Svg width={size} height={size}>
+        {/* Background Circle */}
+        <Circle
+          stroke={bgColor}
+          fill="none"
+          cx={size / 2}
+          cy={size / 2}
+          r={radius}
+          strokeWidth={strokeWidth}
+        />
+
+        {/* Progress Circle */}
+        <Circle
+          stroke={progressColor}
+          fill="none"
+          cx={size / 2}
+          cy={size / 2}
+          r={radius}
+          strokeWidth={strokeWidth}
+          strokeDasharray={circumference}
+          strokeDashoffset={strokeDashoffset}
+          strokeLinecap="round"
+          transform={`rotate(-90 ${size / 2} ${size / 2})`} // Start from the top
+        />
+      </Svg>
+
+      {/* Optional: Render content in the center */}
+      <View style={tw`absolute`}>{children}</View>
+    </View>
+  );
+};
+
+export default CircularProgressBar;

package/template/src/lib/tailwind.js

@@ -0,0 +1,9 @@
+// lib/tailwind.js
+
+import { create } from "twrnc";
+
+// create the customized version...
+const tw = create(require(`@/tailwind.config`)); // <- your path may differ
+
+// ... and then this becomes the main function your app uses
+export default tw;

package/template/src/lib/ui/Avatar.tsx

@@ -0,0 +1,55 @@
+import { Image, View } from "react-native";
+
+import React from "react";
+import tw from "../tailwind";
+
+interface IAvatar {
+  source: { uri: string };
+  name?: string;
+  size?: number;
+  containerStyle?: any;
+  imageStyle?: any;
+}
+
+const Avatar = ({
+  source,
+  size = 30,
+  containerStyle,
+  imageStyle,
+  name,
+}: IAvatar) => {
+  return (
+    <View style={containerStyle}>
+      {name && (
+        <Image
+          style={[
+            tw`rounded-full`,
+            {
+              height: size,
+              width: size,
+            },
+            imageStyle,
+          ]}
+          source={{
+            uri: `https://ui-avatars.com/api/?background=random&name=${name}&bold=true`,
+          }}
+        />
+      )}
+      {source && (
+        <Image
+          style={[
+            tw`rounded-full`,
+            {
+              height: size,
+              width: size,
+            },
+            imageStyle,
+          ]}
+          source={source}
+        />
+      )}
+    </View>
+  );
+};
+
+export default Avatar;

package/template/src/redux/api-config/baseApi.ts

@@ -39,21 +39,6 @@ const baseQueryWithRath: BaseQueryFn<BaseQueryArgs, unknown, unknown> = async (
       },
     });
 
-    // console.log(result?.headers);
-    // Check if response data is a string and malformed
-
-    // console.log(result.request, "result from base url");
-
-    // if (result?.status === 403) {
-    //   AsyncStorage.removeItem("token");
-    //   AsyncStorage.removeItem("user");
-    // }
-
-    // if (result?.status === 401) {
-    //   AsyncStorage.removeItem("token");
-    //   AsyncStorage.removeItem("user");
-    // }
-
     return { data: result?.data };
   } catch (error: any) {
     return {
@@ -71,9 +56,6 @@ export const api = createApi({
   tagTypes: tagTypesList,
 });
 
-// export const imageUrl = 'http://192.168.12.160:7000/';
-// export const imageUrl = "http://103.186.20.114:8050";
-
 export const getImageUrl = (url: string) => {
   if (!url) return "";
   if (url.startsWith("http://") || url.startsWith("https://")) {
@@ -83,7 +65,3 @@ export const getImageUrl = (url: string) => {
   const path = url.replace(/^\/+/, "");
   return `${base}/${path}`;
 };
-
-export const getMedia = (url: string) => {
-  return `${BaseURl}${url}`;
-};

package/template/src/redux/interface/interface.ts

@@ -1,196 +1,14 @@
-import { IFetchData, Paginate } from "./common";
+// import { IFetchData, Paginate } from "./common";
 
-export interface IUser {
-  _id: string;
-  name: string;
-  display_name: string;
-  avatar: string;
-  role: string;
-  ghost: boolean;
-  bio: string;
-  verified: boolean;
-  email: string;
-  status: "active" | "inactive" | "deleted";
-  vibes: number;
-  audio: number;
-  podcast: number;
-  following: number;
-  followers: number;
-  views: number;
-  clicks: number;
-  is_friend?: boolean;
-  subscription?: Subscriptions;
-  plan?: IPlans;
-  last_post_mode: {
-    _id: string;
-    icon: string;
-    name: string;
-  };
-}
+//======== Example of uses  ===============
 
-export interface Subscriptions {
-  _id: string;
-  user: string;
-  plan: string;
-  stripe_customer_id: string;
-  stripe_subscription_id: string;
-  current_period_start: string;
-  current_period_end: string;
-  subscription_status: string;
-  createdAt: string;
-  updatedAt: string;
-}
+// export interface IPrivateCircleUser {
+//   _id: string;
+//   name: string;
+//   display_name: string;
+//   avatar: string;
+//   email: string;
+//   already_added: boolean;
+// }
 
-export interface IMedia {
-  _id: string;
-  file_type: string;
-  url: string;
-  is_favorite: boolean;
-  duration?: number;
-}
-
-export type IUserFetch = IFetchData<IUser>;
-
-export interface IPost {
-  _id: string;
-  user: {
-    _id: string;
-    name: string;
-    avatar: string;
-    display_name: string;
-    ghost: string;
-    verified: string;
-  };
-  is_followed: boolean;
-  post_type: "audio" | "vibes" | "podcast";
-  privacy: "public" | "private_circle" | "solo";
-  private_circle: [];
-  captions: string;
-  location: {
-    address: string;
-    type: "Point";
-    coordinates: [number, number];
-  };
-  createdAt: string;
-  updatedAt: string;
-  id: string;
-  mood: {
-    _id: string;
-    name: string;
-    color: string;
-    icon: string;
-  };
-  music_station: boolean;
-  is_verified: boolean;
-  image: IMedia[];
-  audio: IMedia[];
-  podcast: IMedia[];
-  likes: number;
-  is_liked: false;
-  is_favorite: false;
-}
-
-export interface IMoods {
-  _id: string;
-  createdAt: string;
-  icon: string;
-  user: string;
-  name: string;
-  updatedAt: string;
-}
-
-export interface IFriends {
-  _id: string;
-  name: string;
-  display_name: string;
-  role: string;
-  ghost: boolean;
-  bio: string;
-  avatar: string;
-  verified: boolean;
-  email: string;
-  status: string;
-}
-
-export enum EPlanLevel {
-  ONE = "one",
-  TWO = "two",
-  THREE = "three",
-  FOUR = "four",
-  FIVE = "five",
-}
-
-export interface IPlans {
-  _id: string;
-  name: string;
-  slug: string;
-  price: string;
-  currency: string;
-  interval: string;
-  features: string[];
-  level: EPlanLevel;
-  color: string;
-  stripe_product_id: string;
-  stripe_price_id: string;
-  isActive: string;
-  createdAt: string;
-  updatedAt: string;
-  current_plan: boolean;
-}
-
-interface IStatistics {
-  price: string;
-  plan_level: string;
-  plan_name: string;
-  plan_interval: string;
-  plan_color: string;
-  is_active: boolean;
-  start_date: number;
-  end_date: number;
-  total_click: number;
-  total_views: number;
-  total_followers: number;
-  durations: number;
-  remaining_days: number;
-  days_progress: number;
-}
-
-export interface IComment {
-  _id: string;
-  user: {
-    _id: string;
-    name: string;
-    avatar: string;
-  };
-  edited: boolean;
-  post: string;
-  parent_comment: string;
-  comment: string;
-  createdAt: Date;
-  updatedAt: Date;
-  replies: IComment[];
-}
-
-export type ICommentFetch = Paginate<IComment>;
-
-export type ISinglePost = IFetchData<IPost>;
-export type IFriendsFetch = IFetchData<IFriends[]>;
-
-export type IStatisticsFetch = IFetchData<IStatistics>;
-
-export type IPostFetch = Paginate<IPost>;
-
-export type IPlansFetch = IFetchData<IPlans[]>;
-
-export type IMoodsFetch = IFetchData<IMoods[]>;
-
-export interface IPrivateCircleUser {
-  _id: string;
-  name: string;
-  display_name: string;
-  avatar: string;
-  email: string;
-  already_added: boolean;
-}
-
-export type IPrivateCircleUserFetch = IFetchData<IPrivateCircleUser[]>;
+// export type IPrivateCircleUserFetch = IFetchData<IPrivateCircleUser[]>;

package/template/src/redux/store.ts

@@ -1,6 +1,6 @@
 import { configureStore } from "@reduxjs/toolkit";
-import { api } from "./api/baseApi";
-import userSlice from "./service/user";
+import { api } from "./api-config/baseApi";
+import userSlice from "./service/demo";
 
 const store = configureStore({
   reducer: {

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

@@ -1,29 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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

@@ -1,75 +0,0 @@
-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

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

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

@@ -1,105 +0,0 @@
-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/hooks/useCheckLocation.ts

@@ -1,36 +0,0 @@
-import * as Location from "expo-location";
-
-import { router } from "expo-router";
-import { useState } from "react";
-
-interface Ilocation {
-  longitude: number;
-  latitude: number;
-}
-
-export const useCheckLocation = () => {
-  const [location, setLocation] = useState<Ilocation | null>(null);
-  const [loading, setLoading] = useState(false);
-
-  const getLocation = async () => {
-    setLoading(true);
-    let { status } = await Location.requestForegroundPermissionsAsync();
-    if (status !== "granted") {
-      // router?.dismiss();
-      router?.push("/modals/toaster?content=Location access denied");
-    }
-
-    let location = await Location.getCurrentPositionAsync({});
-    // console.log(location);
-
-    const { latitude, longitude } = location.coords;
-
-    setLocation({
-      latitude,
-      longitude,
-    });
-    setLoading(false);
-  };
-
-  return { location, loading, getLocation, setLoading };
-};