app-expo-cli 1.0.5 → 1.0.7

package/template/src/lib/Error/GlobalErrorBoundary.tsx

@@ -0,0 +1,111 @@
+import { Text, TouchableOpacity, View } from "react-native";
+
+import React from "react";
+import tw from "../tailwind";
+
+export default class GlobalErrorBoundary extends React.Component {
+  constructor(props = {}) {
+    super(props);
+    this.state = { hasError: false, error: null } as any;
+  }
+
+  static getDerivedStateFromError(error = null) {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error, info) {
+    console.log("GLOBAL ERROR:", error, info);
+  }
+
+  resetError = () => {
+    this.setState({ hasError: false, error: null });
+  };
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <View
+          style={{
+            flex: 1,
+            justifyContent: "center",
+            alignItems: "center",
+            padding: 24,
+            backgroundColor: tw.color("base"),
+          }}
+        >
+          {/* Error Illustration */}
+          <View
+            style={{
+              width: 120,
+              height: 120,
+              borderRadius: 60,
+              backgroundColor: "#FFE5E0",
+              justifyContent: "center",
+              alignItems: "center",
+              marginBottom: 25,
+            }}
+          >
+            <Text style={{ fontSize: 55 }}>⚠️</Text>
+          </View>
+
+          {/* Title */}
+          <Text
+            style={{
+              fontSize: 22,
+              fontWeight: "700",
+              color: "#333",
+              textAlign: "center",
+              marginBottom: 10,
+            }}
+          >
+            Something went wrong
+          </Text>
+
+          {/* Subtitle */}
+          <Text
+            style={{
+              fontSize: 15,
+              color: "#666",
+              textAlign: "center",
+              marginBottom: 30,
+              lineHeight: 20,
+              width: "85%",
+            }}
+          >
+            An unexpected error occurred. Please try again or restart the app.
+          </Text>
+
+          {/* Button */}
+          <TouchableOpacity
+            onPress={this.resetError}
+            style={{
+              backgroundColor: "#ED6237",
+              paddingVertical: 12,
+              paddingHorizontal: 28,
+              borderRadius: 10,
+              shadowColor: "#000",
+              shadowOpacity: 0.1,
+              shadowRadius: 4,
+            }}
+          >
+            <Text
+              style={{
+                color: "#fff",
+                fontSize: 16,
+                fontWeight: "600",
+              }}
+            >
+              Try Again
+            </Text>
+          </TouchableOpacity>
+        </View>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+export const GlobalErrorBoundaryProvider = ({ children }: any) => {
+  return <GlobalErrorBoundary>{children}</GlobalErrorBoundary>;
+};

package/template/src/lib/animate/AniImage.tsx

@@ -0,0 +1,32 @@
+import { ActivityIndicator } from "react-native";
+import { AnimatedImage } from "react-native-ui-lib";
+import { AnimatedImageProps } from "react-native-ui-lib/src/components/animatedImage";
+import React from "react";
+import tw from "../tailwind";
+
+interface IAniImage extends AnimatedImageProps {
+  source: { uri: string };
+  containerStyle?: any;
+  imageStyle?: any;
+}
+
+const AniImage = ({
+  source,
+  containerStyle,
+  imageStyle,
+  ...props
+}: IAniImage) => {
+  return (
+    <AnimatedImage
+      containerStyle={[tw`  items-center rounded-md`, containerStyle]}
+      errorSource={source}
+      animationDuration={500}
+      style={[tw` rounded-md`, imageStyle]}
+      loader={<ActivityIndicator color="white" size={"small"} />}
+      source={source}
+      {...props}
+    />
+  );
+};
+
+export default AniImage;

package/template/src/lib/backHeader/BackButton.tsx

@@ -0,0 +1,62 @@
+import { Text, TouchableOpacity, View } from "react-native";
+
+import React from "react";
+import { SvgXml } from "react-native-svg";
+import tw from "../tailwind";
+
+interface BackButtonProps {
+  onPress?: () => void;
+  titleStyle?: any;
+  title?: any;
+  containerStyle?: any;
+  buttonStyle?: any;
+}
+
+const BackButton = ({
+  onPress,
+  containerStyle,
+  titleStyle,
+  title,
+  buttonStyle,
+}: BackButtonProps) => {
+  return (
+    <TouchableOpacity
+      activeOpacity={0.5}
+      onPress={onPress}
+      style={[
+        tw` flex-row px-4 pt-4 pb-3  items-center gap-2 `,
+        containerStyle,
+      ]}
+    >
+      <TouchableOpacity
+        onPress={onPress}
+        style={tw`flex-row items-center gap-3 `}
+      >
+        <View
+          style={[
+            tw`bg-[#3D3D3D] w-12 h-12 justify-center items-center rounded-full `,
+            buttonStyle,
+          ]}
+        >
+          <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>
+        <Text
+          numberOfLines={1}
+          style={[tw`text-white  font-InterSemiBold text-base`, titleStyle]}
+        >
+          {title ? title : null}
+        </Text>
+      </TouchableOpacity>
+    </TouchableOpacity>
+  );
+};
+
+export default BackButton;

package/template/src/lib/backHeader/BackWithCoponent.tsx

@@ -0,0 +1,112 @@
+import { Platform, Text, TouchableOpacity, View } from "react-native";
+
+import React from "react";
+import { SvgXml } from "react-native-svg";
+import tw from "../tailwind";
+
+interface BackButtonProps {
+  onPress?: () => void;
+  titleStyle?: any;
+  title?: any;
+  containerStyle?: any;
+  ComponentBtn?: React.ReactNode;
+  offBack?: boolean;
+  togather?: boolean;
+}
+
+const BackWithComponent = ({
+  onPress,
+  containerStyle,
+  titleStyle,
+  ComponentBtn,
+  title,
+  offBack,
+  togather,
+}: BackButtonProps) => {
+  return (
+    <View
+      style={[
+        tw`flex-row items-center justify-between gap-2 `,
+        containerStyle,
+        {
+          paddingTop: Platform.OS === "android" ? 5 : 0,
+          // paddingBottom: 5,
+        },
+      ]}
+    >
+      {!togather ? (
+        <>
+          {!offBack ? (
+            <TouchableOpacity
+              onPress={onPress}
+              style={tw`flex-row items-center gap-3 `}
+            >
+              <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>
+          ) : (
+            title && <View style={tw`w-10 h-10`} />
+          )}
+          <Text
+            numberOfLines={1}
+            style={[tw`text-white font-InterBold text-base`, titleStyle]}
+          >
+            {title}
+          </Text>
+        </>
+      ) : (
+        <>
+          {!offBack ? (
+            <TouchableOpacity
+              activeOpacity={0.5}
+              onPress={onPress}
+              style={[tw` flex-row pl-4 items-center gap-2 `, containerStyle]}
+            >
+              <TouchableOpacity
+                onPress={onPress}
+                style={tw`flex-row items-center gap-3 `}
+              >
+                <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>
+                <Text
+                  numberOfLines={1}
+                  style={[tw`text-white  font-InterBold text-base`, titleStyle]}
+                >
+                  {title ? title : null}
+                </Text>
+              </TouchableOpacity>
+            </TouchableOpacity>
+          ) : (
+            <View style={tw`w-10 h-10`} />
+          )}
+        </>
+      )}
+
+      {ComponentBtn ? ComponentBtn : null}
+    </View>
+  );
+};
+
+export default BackWithComponent;

package/template/src/lib/backHeader/BackWithHeader.tsx

@@ -0,0 +1,46 @@
+import { Platform, Text, TouchableOpacity, View } from "react-native";
+
+import { IconRightArrayGray } from "../../icons/icons";
+import { NavigProps } from "../../interfaces/NaviProps";
+import React from "react";
+import { SvgXml } from "react-native-svg";
+import tw from "../tailwind";
+
+interface IBackWithHeader extends NavigProps<null> {
+  svgIcon?: any;
+  title?: string;
+  titleStyle?: any;
+  containerStyle?: any;
+  offBack?: boolean;
+}
+const BackWithHeader = ({
+  navigation,
+  svgIcon,
+  title,
+  titleStyle,
+  containerStyle,
+  offBack,
+}: IBackWithHeader) => {
+  return (
+    <View
+      style={[
+        tw`px-[4%] ${
+          Platform.OS === "android" ? "pt-5" : "pt-0"
+        }  pb-4 flex-row gap-3 items-center`,
+        containerStyle,
+      ]}
+    >
+      {!offBack && (
+        <TouchableOpacity onPress={() => navigation?.goBack()}>
+          <SvgXml xml={svgIcon || IconRightArrayGray} />
+        </TouchableOpacity>
+      )}
+
+      <Text style={[tw`text-base text-white200 font-RobotoBlack `, titleStyle]}>
+        {title}
+      </Text>
+    </View>
+  );
+};
+
+export default React.memo(BackWithHeader);

package/template/src/lib/backHeader/BackWithTitle.tsx

@@ -0,0 +1,53 @@
+import { Text, TouchableOpacity, View } from "react-native";
+
+import React from "react";
+import { SvgXml } from "react-native-svg";
+import tw from "../tailwind";
+
+interface BackWithTitleProps {
+  onPress?: () => void;
+  title: string;
+  titleStyle?: any;
+  containerStyle?: any;
+  backOff?: boolean;
+}
+
+const BackWithTitle = ({
+  onPress,
+  title,
+  containerStyle,
+  titleStyle,
+  backOff,
+}: BackWithTitleProps) => {
+  return (
+    <TouchableOpacity
+      activeOpacity={0.5}
+      onPress={onPress}
+      style={[tw`flex-row items-center gap-3 p-[4%]`, containerStyle]}
+    >
+      <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>
+      <Text
+        style={[
+          tw`text-white50 font-DegularDisplaySemibold text-xl `,
+          titleStyle,
+        ]}
+      >
+        {title}
+      </Text>
+    </TouchableOpacity>
+  );
+};
+
+export default React.memo(BackWithTitle);

package/template/src/lib/buttons/IButton.tsx

@@ -0,0 +1,69 @@
+import { ActivityIndicator, StyleSheet, TouchableOpacity } from "react-native";
+import { SvgProps, SvgXml } from "react-native-svg";
+
+import React from "react";
+import tw from "../tailwind";
+
+interface IButton {
+  containerStyle?: {};
+  icon?: React.ReactNode;
+  svg?: string;
+  onPress?: () => void;
+  isLoading?: boolean;
+  loadingColor?: string;
+  disabled?: boolean;
+  svgProps?: SvgProps;
+}
+
+const IButton = ({
+  containerStyle,
+  icon,
+  svg,
+  onPress,
+  disabled,
+  isLoading,
+  loadingColor,
+  svgProps,
+}: IButton) => {
+  return (
+    <TouchableOpacity
+      onPress={onPress}
+      disabled={isLoading || disabled}
+      activeOpacity={0.5}
+      style={[
+        tw`bg-primary  items-center  px-3 flex-row justify-center gap-3 rounded-2xl   ${
+          disabled ? "opacity-60" : "opacity-100"
+        }`,
+        containerStyle,
+      ]}
+    >
+      {isLoading ? (
+        <ActivityIndicator
+          color={loadingColor ? loadingColor : tw.color("white")}
+        />
+      ) : (
+        <>
+          {icon ? (
+            icon
+          ) : (
+            <SvgXml
+              xml={
+                svg
+                  ? svg
+                  : `<svg width="16" height="20" viewBox="0 0 16 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M15.3337 1.54972e-05L0.666992 0V19.3333C0.666992 19.5896 0.813889 19.8232 1.04487 19.9342C1.27584 20.0452 1.55001 20.014 1.75012 19.8539L8.00033 14.8538L14.2505 19.8539C14.4506 20.014 14.7248 20.0452 14.9558 19.9342C15.1868 19.8232 15.3337 19.5896 15.3337 19.3333V1.54972e-05Z" fill="white"/>
+  </svg>
+   `
+              }
+              {...svgProps}
+            />
+          )}
+        </>
+      )}
+    </TouchableOpacity>
+  );
+};
+
+export default IButton;
+
+const styles = StyleSheet.create({});

package/template/src/lib/buttons/IwtButton.tsx

@@ -0,0 +1,199 @@
+import { ActivityIndicator, Text, TouchableOpacity, View } from "react-native";
+import { SvgProps, SvgXml } from "react-native-svg";
+
+import { LinearGradient } from "expo-linear-gradient";
+import React from "react";
+import tw from "../tailwind";
+
+interface IButton {
+  containerStyle?: {};
+  titleStyle?: {};
+  icon?: React.ReactNode;
+  svg?: string;
+  svg2?: string;
+  title?: string;
+  firstSvgTitleTogether?: boolean;
+  onPress?: () => void;
+  isLoading?: boolean;
+  loadingColor?: string;
+  disabled?: boolean;
+  svgProps?: SvgProps;
+  svg2Props?: SvgProps;
+  offGradient?: boolean;
+  gradinLayoutStyle?: {};
+  svgTogether?: boolean;
+}
+
+const IwtButton = ({
+  containerStyle,
+  icon,
+  svg,
+  title,
+  titleStyle,
+  onPress,
+  disabled,
+  isLoading,
+  loadingColor,
+  svg2,
+  firstSvgTitleTogether,
+  svgProps,
+  svg2Props,
+  offGradient,
+  gradinLayoutStyle,
+  svgTogether,
+}: IButton) => {
+  return (
+    <TouchableOpacity
+      onPress={onPress}
+      disabled={isLoading || disabled}
+      activeOpacity={0.5}
+      style={[
+        tw` h-14   gap-3 rounded-full overflow-hidden   ${
+          disabled ? "opacity-60" : "opacity-100"
+        }`,
+        containerStyle,
+      ]}
+    >
+      <LinearGradient
+        // Background Linear Gradient
+        colors={
+          offGradient ? ["transparent", "transparent"] : ["#FF8787", "#8578B4"]
+        }
+        style={[
+          tw`w-full h-full flex-row justify-center items-center gap-3 `,
+          gradinLayoutStyle,
+        ]}
+      >
+        {firstSvgTitleTogether ? (
+          <View style={tw`flex-row justify-center items-center gap-2`}>
+            {isLoading ? (
+              <ActivityIndicator
+                color={loadingColor ? loadingColor : "white"}
+              />
+            ) : (
+              <>
+                {icon ? (
+                  icon
+                ) : svg ? (
+                  <SvgXml
+                    xml={
+                      svg
+                        ? svg
+                        : `<svg width="16" height="20" viewBox="0 0 16 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M15.3337 1.54972e-05L0.666992 0V19.3333C0.666992 19.5896 0.813889 19.8232 1.04487 19.9342C1.27584 20.0452 1.55001 20.014 1.75012 19.8539L8.00033 14.8538L14.2505 19.8539C14.4506 20.014 14.7248 20.0452 14.9558 19.9342C15.1868 19.8232 15.3337 19.5896 15.3337 19.3333V1.54972e-05Z" fill="white"/>
+    </svg>
+     `
+                    }
+                    {...svgProps}
+                  />
+                ) : null}
+                {svgTogether && (
+                  <>
+                    {svg2 && (
+                      <SvgXml
+                        xml={
+                          svg2
+                            ? svg2
+                            : `<svg width="16" height="20" viewBox="0 0 16 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M15.3337 1.54972e-05L0.666992 0V19.3333C0.666992 19.5896 0.813889 19.8232 1.04487 19.9342C1.27584 20.0452 1.55001 20.014 1.75012 19.8539L8.00033 14.8538L14.2505 19.8539C14.4506 20.014 14.7248 20.0452 14.9558 19.9342C15.1868 19.8232 15.3337 19.5896 15.3337 19.3333V1.54972e-05Z" fill="white"/>
+    </svg>
+     `
+                        }
+                        {...svgProps}
+                        {...svg2Props}
+                      />
+                    )}
+                  </>
+                )}
+              </>
+            )}
+
+            {title && (
+              <Text
+                style={[
+                  tw`text-white font-InterSemiBold text-base `,
+                  titleStyle,
+                ]}
+              >
+                {title}
+              </Text>
+            )}
+          </View>
+        ) : (
+          <>
+            {isLoading ? (
+              <ActivityIndicator
+                color={loadingColor ? loadingColor : "white"}
+              />
+            ) : (
+              <>
+                {icon ? (
+                  icon
+                ) : svg ? (
+                  <SvgXml
+                    xml={
+                      svg
+                        ? svg
+                        : `<svg width="16" height="20" viewBox="0 0 16 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M15.3337 1.54972e-05L0.666992 0V19.3333C0.666992 19.5896 0.813889 19.8232 1.04487 19.9342C1.27584 20.0452 1.55001 20.014 1.75012 19.8539L8.00033 14.8538L14.2505 19.8539C14.4506 20.014 14.7248 20.0452 14.9558 19.9342C15.1868 19.8232 15.3337 19.5896 15.3337 19.3333V1.54972e-05Z" fill="white"/>
+    </svg>
+     `
+                    }
+                    {...svgProps}
+                  />
+                ) : null}
+                {svgTogether && (
+                  <>
+                    {svg2 && (
+                      <SvgXml
+                        xml={
+                          svg2
+                            ? svg2
+                            : `<svg width="16" height="20" viewBox="0 0 16 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M15.3337 1.54972e-05L0.666992 0V19.3333C0.666992 19.5896 0.813889 19.8232 1.04487 19.9342C1.27584 20.0452 1.55001 20.014 1.75012 19.8539L8.00033 14.8538L14.2505 19.8539C14.4506 20.014 14.7248 20.0452 14.9558 19.9342C15.1868 19.8232 15.3337 19.5896 15.3337 19.3333V1.54972e-05Z" fill="white"/>
+    </svg>
+     `
+                        }
+                        {...svgProps}
+                        {...svg2Props}
+                      />
+                    )}
+                  </>
+                )}
+              </>
+            )}
+
+            {title && (
+              <Text
+                style={[
+                  tw`text-white font-InterSemiBold text-base `,
+                  titleStyle,
+                ]}
+              >
+                {title}
+              </Text>
+            )}
+          </>
+        )}
+        <>
+          {svg2 && !svgTogether && (
+            <SvgXml
+              xml={
+                svg2
+                  ? svg2
+                  : `<svg width="16" height="20" viewBox="0 0 16 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M15.3337 1.54972e-05L0.666992 0V19.3333C0.666992 19.5896 0.813889 19.8232 1.04487 19.9342C1.27584 20.0452 1.55001 20.014 1.75012 19.8539L8.00033 14.8538L14.2505 19.8539C14.4506 20.014 14.7248 20.0452 14.9558 19.9342C15.1868 19.8232 15.3337 19.5896 15.3337 19.3333V1.54972e-05Z" fill="white"/>
+    </svg>
+     `
+              }
+              {...svgProps}
+              {...svg2Props}
+            />
+          )}
+        </>
+      </LinearGradient>
+    </TouchableOpacity>
+  );
+};
+
+export default IwtButton;