app-expo-cli 1.0.5 → 1.0.7

package/template/src/app/auth/reset_pass.tsx

@@ -1,37 +1,34 @@
 import * as Yup from "yup";
 
-import { Image, Text, View } from "react-native";
 import { router, useGlobalSearchParams } from "expo-router";
+import { Image, Text, View } from "react-native";
 
-import AppBgWrapper from "@/src/components/common/AppBgWrapper";
+import { Icon } from "@/assets/icon";
+import { ImageAssets } from "@/assets/images";
 import BackButton from "@/src/lib/backHeader/BackButton";
-import { Formik } from "formik";
-import { Icon } from "@/assets/icons/Icon";
-import { ImageAssets } from "@/assets/images/image";
-import InputText from "@/src/lib/inputs/InputText";
-import { KeyboardAwareScrollView } from "react-native-keyboard-controller";
-import React from "react";
 import TButton from "@/src/lib/buttons/TButton";
+import InputText from "@/src/lib/inputs/InputText";
 import tw from "@/src/lib/tailwind";
-import { useResetPasswordMutation } from "@/src/redux/apiSlices/authSlices";
+import { Formik } from "formik";
+import React from "react";
 
 const Rest_pass = () => {
   const [showPassword, setShowPassword] = React.useState(false);
   const [showPasswordTwo, setShowPasswordTwo] = React.useState(false);
-  const [resetPassword, { isLoading }] = useResetPasswordMutation();
+  // const [resetPassword, { isLoading }] = useResetPasswordMutation();
   const { email } = useGlobalSearchParams();
   const handleResetPassword = async (values: any) => {
     try {
       values.email = email;
 
-      const res = await resetPassword(values).unwrap();
-      if (res?.success) {
-        router.push(
-          "/auth/change_pass_modal?title=You’re All Set!&subtitle=Your password has been changed successfully!&buttonTitle=Back to login&route=/auth"
-        );
-      } else {
-        router.push(`/modals/toaster?content=${res?.message}`);
-      }
+      // const res = await resetPassword(values).unwrap();
+      // if (res?.success) {
+      router.push(
+        "/auth/change_pass_modal?title=You’re All Set!&subtitle=Your password has been changed successfully!&buttonTitle=Back to login&route=/auth",
+      );
+      // } else {
+      // router.push(`/modals/toaster?content=${res?.message}`);
+      // }
     } catch (error: any) {
       router.push(`/modals/toaster?content=${error?.message}`);
     }
@@ -50,102 +47,102 @@ const Rest_pass = () => {
   });
 
   return (
-    <AppBgWrapper>
+    <View style={tw`flex-1`}>
       <BackButton
         onPress={() => router.dismiss()}
         containerStyle={tw`absolute top-5`}
       />
-      <KeyboardAwareScrollView
-        style={tw`z-10 flex-1`}
-        contentContainerStyle={tw`items-center justify-center flex-1`}
-      >
-        <View style={tw`z-10 flex-1 items-center justify-center  p-5`}>
-          <View style={tw`justify-center items-center  gap-2`}>
-            <Image
-              source={ImageAssets.logo}
-              style={tw`h-30 aspect-square mb-5`}
-              resizeMode="contain"
-            />
-            <View style={tw`items-center justify-center gap-2`}>
-              <Text
-                style={tw`text-white font-InterSemiBold text-2xl -tracking-[1px]`}
-              >
-                Reset Password
-              </Text>
-              <Text
-                style={tw`text-white text-base text-center font-InterRegular -tracking-[1px]`}
-              >
-                Enter a new password for your account
-              </Text>
-            </View>
-          </View>
 
-          {/* Formik Wrapper */}
-          <Formik
-            initialValues={{ new_password: "", c_password: "" }}
-            validationSchema={loginValidationSchema}
-            onSubmit={handleResetPassword}
-          >
-            {({
-              handleChange,
-              handleBlur,
-              handleSubmit,
-              values,
-              errors,
-              touched,
-              isValid,
-            }) => (
-              <View style={tw`w-full py-8 gap-6`}>
-                <View style={tw`gap-3`}>
-                  <InputText
-                    svgFirstIcon={Icon.lock}
-                    textInputProps={{
-                      placeholder: "New Password",
-                      placeholderTextColor: "#A9A9A9",
-                      secureTextEntry: !showPassword,
-                    }}
-                    svgSecondIcon={showPassword ? Icon.eye : Icon.eyeOff}
-                    svgSecondOnPress={() => setShowPassword(!showPassword)}
-                    value={values.new_password}
-                    onChangeText={handleChange("new_password")}
-                    onBlur={handleBlur("new_password")}
-                    touched={touched.new_password}
-                    errorText={errors.new_password}
-                  />
-                  <InputText
-                    svgFirstIcon={Icon.lock}
-                    textInputProps={{
-                      placeholder: "Confirm New Password",
-                      placeholderTextColor: "#A9A9A9",
-                      secureTextEntry: !showPasswordTwo,
-                    }}
-                    svgSecondIcon={showPasswordTwo ? Icon.eye : Icon.eyeOff}
-                    svgSecondOnPress={() =>
-                      setShowPasswordTwo(!showPasswordTwo)
-                    }
-                    value={values.c_password}
-                    onChangeText={handleChange("c_password")}
-                    onBlur={handleBlur("c_password")}
-                    touched={touched.c_password}
-                    errorText={errors.c_password}
-                  />
-                </View>
+      <View style={tw`z-10 flex-1 items-center justify-center  p-5`}>
+        <View style={tw`justify-center items-center  gap-2`}>
+          {/* IF want to add logo here */}
+          <Image
+            source={ImageAssets.logo}
+            style={tw`h-30 aspect-square mb-5`}
+            resizeMode="contain"
+          />
+          <View style={tw`items-center justify-center gap-2`}>
+            <Text
+              style={tw`text-white font-InterSemiBold text-2xl -tracking-[1px]`}
+            >
+              Reset Password
+            </Text>
+            <Text
+              style={tw`text-white text-base text-center font-InterRegular -tracking-[1px]`}
+            >
+              Enter a new password for your account
+            </Text>
+          </View>
+        </View>
 
-                {/* Submit button calls handleSubmit from Formik */}
-                <TButton
-                  isLoading={isLoading}
-                  title="Change password"
-                  onPress={() => {
-                    handleSubmit();
+        {/* Formik Wrapper */}
+        <Formik
+          initialValues={{ new_password: "", c_password: "" }}
+          validationSchema={loginValidationSchema}
+          onSubmit={handleResetPassword}
+        >
+          {({
+            handleChange,
+            handleBlur,
+            handleSubmit,
+            values,
+            errors,
+            touched,
+            isValid,
+          }) => (
+            <View style={tw`w-full py-8 gap-6`}>
+              <View style={tw`gap-3`}>
+                <InputText
+                  // === Place icons here ===
+                  svgFirstIcon={Icon.lock}
+                  textInputProps={{
+                    placeholder: "New Password",
+                    placeholderTextColor: "#A9A9A9",
+                    secureTextEntry: !showPassword,
+                  }}
+                  // === Place icons here ===
+                  svgSecondIcon={showPassword ? Icon.eye : Icon.eyeOff}
+                  svgSecondOnPress={() => setShowPassword(!showPassword)}
+                  value={values.new_password}
+                  onChangeText={handleChange("new_password")}
+                  onBlur={handleBlur("new_password")}
+                  touched={touched.new_password}
+                  errorText={errors.new_password}
+                />
+                <InputText
+                  // === Place icons here ===
+                  svgFirstIcon={Icon.lock}
+                  textInputProps={{
+                    placeholder: "Confirm New Password",
+                    placeholderTextColor: "#A9A9A9",
+                    secureTextEntry: !showPasswordTwo,
                   }}
-                  disabled={!isValid}
+                  // === Place icons here ===
+                  svgSecondIcon={showPasswordTwo ? Icon.eye : Icon.eyeOff}
+                  svgSecondOnPress={() => setShowPasswordTwo(!showPasswordTwo)}
+                  value={values.c_password}
+                  onChangeText={handleChange("c_password")}
+                  onBlur={handleBlur("c_password")}
+                  touched={touched.c_password}
+                  errorText={errors.c_password}
                 />
               </View>
-            )}
-          </Formik>
-        </View>
-      </KeyboardAwareScrollView>
-    </AppBgWrapper>
+
+              {/* Submit button calls handleSubmit from Formik */}
+              <TButton
+                // If you connect API then you can add loading here
+                // isLoading={isLoading}
+                title="Change password"
+                onPress={() => {
+                  handleSubmit();
+                }}
+                disabled={!isValid}
+              />
+            </View>
+          )}
+        </Formik>
+      </View>
+    </View>
   );
 };
 

package/template/src/app/index.tsx

@@ -1,11 +1,74 @@
-import { Text, View } from "react-native";
+import * as Font from "expo-font";
+import * as SplashScreen from "expo-splash-screen";
+import * as React from "react";
 
-import tw from "../lib/tailwind";
+import { ActivityIndicator, Image, Pressable, View } from "react-native";
+import Animated, { FadeInDown, FadeInUp } from "react-native-reanimated";
+
+import { ImageAssets } from "@/assets/images";
+import { router } from "expo-router";
+import tw from "../../../myApp/src/lib/tailwind";
+
+// Import tw from twrnc
+
+SplashScreen.preventAutoHideAsync();
+const Splash = () => {
+  // =============== If you setup you custom font then add here and in assets/fonts folder =================
+  const [fontsLoaded] = Font.useFonts({
+    InterBlack: require("@/assets/fonts/Inter_18pt-Black.ttf"),
+    InterBlackItalic: require("@/assets/fonts/Inter_18pt-BlackItalic.ttf"),
+  });
+
+  // const [tokenChecker] = useTokenCheckMutation();
+
+  const handleTokenChecker = React.useCallback(async () => {
+    //  ========= API CALL PLACEHOLDER FOR TOKEN CHECKER =========
+
+    // const response = await tokenChecker({}).unwrap();
+    // console.log(response);
+    // if (response?.data?.isVerified) {
+    // console.log(response);
+    // SplashScreen.hideAsync();
+    // router.replace("/home/tabs");
+    // router.replace("/auth/location_access");
+    // router.replace("/auth");
+    // } else {
+    //   SplashScreen.hideAsync();
+    //   router.replace("/auth");
+    // }
+
+    //  === NORMAL LOGIC ===
+    SplashScreen.hideAsync();
+    router.replace("/auth");
+  }, []);
+
+  React.useEffect(() => {
+    if (fontsLoaded) {
+      handleTokenChecker();
+    }
+  }, [handleTokenChecker, fontsLoaded]);
 
-export default function Index() {
   return (
-    <View style={tw``}>
-      <Text style={tw``}>Edit app/index.tsx to edit this screen.</Text>
-    </View>
+    <Pressable
+      style={tw`flex-1 z-2   w-full  overflow-hidden justify-center items-center`}
+      onPress={() => {}}
+    >
+      <Animated.View
+        entering={FadeInUp.duration(1000)}
+        exiting={FadeInDown.duration(1000)}
+        style={tw``}
+      >
+        <Image
+          style={tw`h-45 w-45 mb-[20%]`}
+          resizeMode="contain"
+          source={ImageAssets.logo}
+        />
+      </Animated.View>
+      <View style={tw`absolute bottom-[15%] left-[45%]`}>
+        <ActivityIndicator size="large" color={tw.color("white")} />
+      </View>
+    </Pressable>
   );
-}
+};
+
+export default Splash;

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

@@ -29,11 +29,6 @@ const ConfirmationModal = () => {
         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 ?

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

@@ -1,45 +1,14 @@
 import { router, useGlobalSearchParams } from "expo-router";
-import { Platform, Pressable, Text, View } from "react-native";
+import { 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
@@ -48,23 +17,34 @@ const Success_modal = () => {
       }}
       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
+        style={tw`w-[90%]  bg-black/85 border border-secondary rounded-xl overflow-hidden items-center justify-center p-6 pb-8`}
+      >
+        <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>
-      )}
+      </View>
     </Pressable>
   );
 };

package/template/src/app/settings/about_us.tsx

@@ -1,6 +1,6 @@
 import { Image, ScrollView, View } from "react-native";
 
-import { ImageAssets } from "@/assets/images/image";
+import { ImageAssets } from "@/assets/images";
 import BackButton from "@/src/lib/backHeader/BackButton";
 import TButton from "@/src/lib/buttons/TButton";
 import tw from "@/src/lib/tailwind";

package/template/src/app/settings/privacy_policy.tsx

@@ -1,6 +1,6 @@
 import { Image, ScrollView, View } from "react-native";
 
-import { ImageAssets } from "@/assets/images/image";
+import { ImageAssets } from "@/assets/images";
 import BackButton from "@/src/lib/backHeader/BackButton";
 import TButton from "@/src/lib/buttons/TButton";
 import tw from "@/src/lib/tailwind";

package/template/src/app/settings/terms_and_conditions.tsx

@@ -1,6 +1,6 @@
 import { Image, ScrollView, View } from "react-native";
 
-import { ImageAssets } from "@/assets/images/image";
+import { ImageAssets } from "@/assets/images";
 import BackButton from "@/src/lib/backHeader/BackButton";
 import TButton from "@/src/lib/buttons/TButton";
 import tw from "@/src/lib/tailwind";

package/template/src/lib/DateTimePicker/DateTimePicker.tsx

@@ -0,0 +1,63 @@
+import DatePicker, { DatePickerProps } from "react-native-date-picker";
+import { Text, TouchableOpacity, View } from "react-native";
+
+import { IconCalendar } from "@/icons/icons";
+import { PrimaryColor } from "../../utils/utils";
+import React from "react";
+import { SvgXml } from "react-native-svg";
+import tw from "../tailwind";
+
+interface DateTimePickerProps {
+  getCurrentDate?: (value: string) => any;
+  dateProps?: DatePickerProps;
+  title: string;
+}
+
+const DateTimePicker = ({
+  dateProps,
+  getCurrentDate,
+  title,
+}: DateTimePickerProps) => {
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <View>
+      <View>
+        <TouchableOpacity
+          onPress={() => {
+            setOpen(true);
+          }}
+        >
+          <View
+            style={tw`bg-white h-12 px-2 rounded-md flex-row items-center justify-between`}
+          >
+            <Text style={tw`text-sm text-gray-500 font-DegularDisplayRegular`}>
+              {title}
+            </Text>
+            <SvgXml xml={IconCalendar} />
+          </View>
+        </TouchableOpacity>
+      </View>
+      <DatePicker
+        style={tw`border-0 h-12 rounded-lg bg-transparent`}
+        mode="time"
+        modal
+        theme="dark"
+        dividerColor={PrimaryColor}
+        buttonColor={PrimaryColor}
+        open={open}
+        date={new Date()}
+        onConfirm={(currentData: any) => {
+          if (currentData) {
+            getCurrentDate && getCurrentDate(currentData?.toISOString());
+          }
+          setOpen(false);
+        }}
+        onCancel={() => setOpen(false)}
+        {...dateProps}
+      />
+    </View>
+  );
+};
+
+export default DateTimePicker;

package/template/src/lib/Empty/EmptyCard.tsx

@@ -0,0 +1,67 @@
+import { ActivityIndicator, Text, TouchableOpacity, View } from "react-native";
+
+import React from "react";
+import { SvgXml } from "react-native-svg";
+import tw from "../tailwind";
+
+interface NoFoundCardProps {
+  title?: string;
+  description?: string;
+  hight?: number;
+  isLoading?: boolean;
+  reload?: () => void;
+}
+
+const EmptyCard = ({
+  description,
+  title,
+  hight = 200,
+  isLoading,
+  reload,
+}: NoFoundCardProps) => {
+  return (
+    <View>
+      <View
+        style={[
+          tw`flex-1 justify-center items-center gap-3  opacity-15`,
+          {
+            height: hight && hight,
+          },
+        ]}
+      >
+        {isLoading ? (
+          <ActivityIndicator color={"white"} size={"large"} />
+        ) : (
+          <>
+            <SvgXml
+              height={60}
+              width={60}
+              // opacity={0.2}
+              xml={`<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="512" height="512" x="0" y="0" viewBox="0 0 512.784 512.784" style="enable-background:new 0 0 512 512" xml:space="preserve" class=""><g><path d="M256.49 512.611c-39.223 0-76.087-8.051-109.57-23.929-9.98-4.733-14.234-16.66-9.501-26.641s16.661-14.234 26.641-9.501c182.603 84.249 373.961-104.925 287.358-288.361-10.496-24.22 23.859-40.738 36.143-17.138 81.565 167.692-45.06 367.114-231.071 365.57zM52.124 376.652c9.964-4.768 14.175-16.71 9.407-26.674C-25.292 167.823 166.08-25.438 348.923 61.684c9.98 4.732 21.906.477 26.638-9.503s.479-21.908-9.501-26.641C147.806-76.935-76.809 149.894 25.452 367.246c4.782 10.061 16.93 14.133 26.672 9.406zM34.632 506.753l472-472c7.811-7.811 7.811-20.474 0-28.284s-20.474-7.811-28.284 0l-472 472c-7.811 7.811-7.811 20.474 0 28.284 7.811 7.811 20.474 7.811 28.284 0z" fill="#FFF" opacity="1" data-original="#FFF" class=""></path></g></svg>
+`}
+            />
+            <Text
+              style={tw`text-white font-InterRegular text-base text-center`}
+            >
+              {title ? title : "Data not exists"}
+            </Text>
+          </>
+        )}
+      </View>
+      {reload && (
+        <TouchableOpacity
+          onPress={reload}
+          style={tw`absolute bottom-0 right-0 left-0`}
+        >
+          <Text
+            style={tw`text-primary font-InterRegular text-base text-center`}
+          >
+            Reload
+          </Text>
+        </TouchableOpacity>
+      )}
+    </View>
+  );
+};
+
+export default EmptyCard;