app-expo-cli 1.1.1 → 1.1.2

package/template/src/lib/inputs/InputText.tsx

@@ -1,232 +0,0 @@
-import React, { useCallback } from "react";
-import {
-  Animated,
-  Easing,
-  NativeSyntheticEvent,
-  Text,
-  TextInput,
-  TextInputFocusEventData,
-  TextInputProps,
-  TouchableOpacity,
-  View,
-} from "react-native";
-
-import { SvgXml } from "react-native-svg";
-import tw from "../tailwind";
-
-const eye = `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="25" height="25" x="0" y="0" viewBox="0 0 511.999 511.999" style="enable-background:new 0 0 512 512" xml:space="preserve" class=""><g><path d="M508.745 246.041c-4.574-6.257-113.557-153.206-252.748-153.206S7.818 239.784 3.249 246.035a16.896 16.896 0 0 0 0 19.923c4.569 6.257 113.557 153.206 252.748 153.206s248.174-146.95 252.748-153.201a16.875 16.875 0 0 0 0-19.922zM255.997 385.406c-102.529 0-191.33-97.533-217.617-129.418 26.253-31.913 114.868-129.395 217.617-129.395 102.524 0 191.319 97.516 217.617 129.418-26.253 31.912-114.868 129.395-217.617 129.395z" fill="#fff" opacity="1" data-original="#fff" class=""></path><path d="M255.997 154.725c-55.842 0-101.275 45.433-101.275 101.275s45.433 101.275 101.275 101.275S357.272 311.842 357.272 256s-45.433-101.275-101.275-101.275zm0 168.791c-37.23 0-67.516-30.287-67.516-67.516s30.287-67.516 67.516-67.516 67.516 30.287 67.516 67.516-30.286 67.516-67.516 67.516z" fill="#fff" opacity="1" data-original="#fff" class=""></path></g></svg>`;
-
-const eyeOff = `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="25" height="25" x="0" y="0" viewBox="0 0 128 128" style="enable-background:new 0 0 512 512" xml:space="preserve" class=""><g><path d="m79.891 65.078 7.27-7.27C87.69 59.787 88 61.856 88 64c0 13.234-10.766 24-24 24-2.144 0-4.213-.31-6.192-.839l7.27-7.27a15.929 15.929 0 0 0 14.813-14.813zm47.605-3.021c-.492-.885-7.47-13.112-21.11-23.474l-5.821 5.821c9.946 7.313 16.248 15.842 18.729 19.602C114.553 71.225 95.955 96 64 96c-4.792 0-9.248-.613-13.441-1.591l-6.573 6.573C50.029 102.835 56.671 104 64 104c41.873 0 62.633-36.504 63.496-38.057a3.997 3.997 0 0 0 0-3.886zm-16.668-39.229-88 88C22.047 111.609 21.023 112 20 112s-2.047-.391-2.828-1.172a3.997 3.997 0 0 1 0-5.656l11.196-11.196C10.268 83.049 1.071 66.964.504 65.943a4 4 0 0 1 0-3.887C1.367 60.504 22.127 24 64 24c10.827 0 20.205 2.47 28.222 6.122l12.95-12.95c1.563-1.563 4.094-1.563 5.656 0s1.563 4.094 0 5.656zM34.333 88.011 44.46 77.884C41.663 73.96 40 69.175 40 64c0-13.234 10.766-24 24-24 5.175 0 9.96 1.663 13.884 4.459l8.189-8.189C79.603 33.679 72.251 32 64 32 32.045 32 13.447 56.775 8.707 63.994c3.01 4.562 11.662 16.11 25.626 24.017zm15.934-15.935 21.809-21.809C69.697 48.862 66.958 48 64 48c-8.822 0-16 7.178-16 16 0 2.958.862 5.697 2.267 8.076z" fill="#fff" opacity="1" data-original="#fff" class=""></path></g></svg>`;
-
-interface InputTextProps {
-  onPress?: () => void;
-  svgFirstIcon?: string;
-  fieldStyle?: any;
-  focusSTyle?: any;
-  label?: string;
-  required?: boolean;
-  labelStyle?: any;
-  svgSecondIcon?: string;
-  placeholder?: string;
-  placeholderStyle?: any;
-  textInputProps?: TextInputProps;
-  svgSecondOnPress?: () => void;
-  textXValue?: number;
-  textXOutRangeFirst?: number;
-  textXOutRangeSecond?: number;
-  svgSecondStyle?: any;
-  errorText?: string;
-  errorSvgIcon?: any;
-  onFocus?: () => void;
-  onBlur?: (e: NativeSyntheticEvent<TextInputFocusEventData>) => void;
-  onChangeText?: (text: string) => void;
-  value?: string;
-  touched?: boolean;
-  containerLayoutStyle?: any;
-  containerStyle?: any;
-  editable?: boolean;
-  errorTextTop?: boolean;
-  variant?: "default" | "password";
-}
-
-const InputText = ({
-  onPress,
-  svgFirstIcon,
-  fieldStyle,
-  focusSTyle,
-  label,
-  required,
-  labelStyle,
-  svgSecondIcon,
-  placeholder,
-  textXValue = -28,
-  textXOutRangeFirst = 25,
-  textXOutRangeSecond = 45,
-  errorSvgIcon,
-  textInputProps,
-  errorText,
-  onBlur,
-  onChangeText,
-  onFocus,
-  svgSecondStyle,
-  svgSecondOnPress,
-  variant,
-  value,
-  touched,
-  containerLayoutStyle,
-  containerStyle,
-  editable = true,
-  placeholderStyle,
-  errorTextTop = false,
-}: InputTextProps) => {
-  const [focus, setFocus] = React.useState(false);
-  const [isPasswordVisible, setIsPasswordVisible] = React.useState(false);
-  // const [text, setText] = React.useState("");
-  const textInputRef = React.useRef<TextInput>(null); // Ref to focus the TextInput
-
-  const textY = React.useRef(new Animated.Value(0));
-
-  const handleFocus = useCallback(() => {
-    setFocus(true);
-    Animated.timing(textY.current, {
-      toValue: -28,
-      duration: 200,
-      useNativeDriver: true,
-      easing: Easing.ease,
-    }).start();
-    textInputRef.current?.focus(); // Focus the TextInput
-  }, []);
-
-  const handleBlur = useCallback(() => {
-    setFocus(false);
-    Animated.timing(textY.current, {
-      toValue: 0,
-      duration: 200,
-      useNativeDriver: true,
-      easing: Easing.linear,
-    }).start();
-  }, []);
-
-  // React.useEffect(() => {
-  //   if (value?.trim().length) {
-  //     if (!textInputRef.current?.focus()) {
-  //       handleFocus();
-  //     }
-  //   } else {
-  //     handleBlur();
-  //   }
-  // }, [value]);
-
-  const textX = textY.current.interpolate({
-    inputRange: [textXValue, 0],
-    outputRange: [textXOutRangeFirst, textXOutRangeSecond],
-    extrapolate: "clamp",
-  });
-  const textScale = textY.current.interpolate({
-    inputRange: [-28, 0],
-    outputRange: [0.8, 1],
-    extrapolate: "clamp",
-  });
-
-  return (
-    <TouchableOpacity
-      disabled={!editable}
-      activeOpacity={1} // Ensure the opacity doesn't change on press
-      onPress={editable ? onPress : handleFocus} // Focus the input when the container is pressed
-      style={[tw``, containerLayoutStyle]}
-    >
-      {label && (
-        <Text
-          style={[tw`text-base font-InterRegular  py-2 text-white`, labelStyle]}
-        >
-          {label}
-          {required && (
-            <Text style={tw`text-red-500 font-InterRegular`}> *</Text>
-          )}
-        </Text>
-      )}
-      {errorText && touched && errorTextTop && (
-        <View style={tw`px-2 py-1 flex-row gap-1 items-center`}>
-          {errorSvgIcon && <SvgXml xml={errorSvgIcon} />}
-
-          <Text style={tw`text-red-500 text-xs`}>{errorText}</Text>
-        </View>
-      )}
-      <View
-        style={[
-          tw`flex-row w-full border items-center  px-6 gap-2 ${
-            errorText && touched ? "border-red-500" : "border border-white/20"
-          }  rounded-full h-14 `,
-          // tw`${focus ? "border-blue-500" : "bg-white/10"}`,
-          containerStyle,
-        ]}
-      >
-        {svgFirstIcon && <SvgXml xml={svgFirstIcon} />}
-        {placeholder?.trim() && (
-          <Animated.Text
-            numberOfLines={1}
-            style={[
-              tw`absolute bg-base rounded-full text-base font-InterRegular py-2 px-2 ${
-                errorText && touched ? "text-red-500" : "text-gray-400"
-              }`,
-              placeholderStyle,
-              {
-                transform: [
-                  { translateY: textY.current },
-                  { translateX: textX },
-                  { scale: textScale },
-                ],
-              },
-            ]}
-          >
-            {placeholder}
-          </Animated.Text>
-        )}
-
-        <TextInput
-          editable={editable}
-          ref={textInputRef} // Assign the ref to the TextInput
-          onFocus={() => {
-            onFocus && onFocus();
-          }}
-          onBlur={(e) => {
-            onBlur && onBlur(e);
-          }}
-          style={tw`flex-1 px-2 h-12 text-sm  font-InterRegular text-white `}
-          secureTextEntry={variant === "password" && !isPasswordVisible}
-          {...textInputProps}
-          value={value}
-          onChangeText={(text) => {
-            // setText(text);
-            onChangeText && onChangeText(text);
-          }}
-        />
-        {svgSecondIcon && (
-          <TouchableOpacity
-            onPress={svgSecondOnPress}
-            disabled={!svgSecondOnPress}
-          >
-            <SvgXml xml={svgSecondIcon} />
-          </TouchableOpacity>
-        )}
-
-        {variant === "password" && (
-          <TouchableOpacity
-            onPress={() => setIsPasswordVisible(!isPasswordVisible)}
-          >
-            {isPasswordVisible ? <SvgXml xml={eyeOff} /> : <SvgXml xml={eye} />}
-          </TouchableOpacity>
-        )}
-      </View>
-      {errorText && touched && !errorTextTop && (
-        <View style={tw`px-2 py-1 flex-row gap-1 items-center`}>
-          {errorSvgIcon && <SvgXml xml={errorSvgIcon} />}
-
-          <Text style={tw`text-red-500 text-xs`}>{errorText}</Text>
-        </View>
-      )}
-    </TouchableOpacity>
-  );
-};
-
-export default InputText;

package/template/src/lib/loader/GLoading.tsx

@@ -1,26 +0,0 @@
-import { ActivityIndicator, View } from "react-native";
-
-import { PrimaryColor } from "../../utils/utils";
-import React from "react";
-import tw from "../tailwind";
-
-interface IGLoadingProps {
-  loading: boolean;
-  setLoading: React.Dispatch<React.SetStateAction<boolean>>;
-}
-
-const GLoading = ({ loading, setLoading }: IGLoadingProps) => {
-  return (
-    <>
-      {loading && (
-        <View
-          style={tw` bg-base z-50 w-full  bg-opacity-40 h-full  absolute justify-center items-center`}
-        >
-          <ActivityIndicator size={"large"} color={PrimaryColor} />
-        </View>
-      )}
-    </>
-  );
-};
-
-export default GLoading;

package/template/src/lib/loading/MLoading.tsx

@@ -1,14 +0,0 @@
-import { ActivityIndicator, View } from "react-native";
-
-import React from "react";
-import tw from "../tailwind";
-
-const MLoading = () => {
-  return (
-    <View style={tw`flex-1 justify-center items-center bg-base `}>
-      <ActivityIndicator size={"large"} color={"#fff"} />
-    </View>
-  );
-};
-
-export default MLoading;

package/template/src/lib/loading/SLoading.tsx

@@ -1,14 +0,0 @@
-import { ActivityIndicator, View } from "react-native";
-
-import React from "react";
-import tw from "../tailwind";
-
-const SLoading = () => {
-  return (
-    <View style={tw`flex-1 bg-[#121212] justify-center items-center`}>
-      <ActivityIndicator size={"large"} color={"#fff"} />
-    </View>
-  );
-};
-
-export default SLoading;

package/template/src/lib/modals/ActionModal.tsx

@@ -1,97 +0,0 @@
-import { Pressable, Text, TouchableOpacity, View } from "react-native";
-import React, { SetStateAction } from "react";
-
-import tw from "../tailwind";
-
-export interface IActionModalDataProp {
-  title?: string;
-  icon?: React.ReactNode;
-  titleStyle?: any;
-  enableBoth?: boolean;
-  customComponent?: React.ReactNode;
-  onPress?: () => void;
-}
-
-interface IActionModalProps {
-  visible: boolean;
-  setVisible: React.Dispatch<SetStateAction<boolean>>;
-  actionData?: Array<IActionModalDataProp>;
-  containerStyle?: any;
-}
-
-const ActionModal = ({
-  setVisible,
-  visible,
-  actionData,
-  containerStyle,
-}: IActionModalProps) => {
-  return (
-    <>
-      {visible && (
-        <Pressable
-          onPress={() => setVisible(!visible)}
-          style={[
-            tw`absolute w-full h-full z-10`,
-            {
-              backgroundColor: "rgba(0,0,0,0.2)",
-            },
-          ]}
-        >
-          <Pressable
-            onPress={(e) => e.stopPropagation()} // Prevent closing modal when clicking inside
-            style={[
-              tw`absolute  bg-white w-[60%] md:w-[55%] tablet:w-[20%] top-[8%] right-[4%] rounded-3xl px-5 py-4 pt-7 z-20 gap-3`,
-              containerStyle,
-            ]}
-          >
-            {actionData?.map((item, index) => {
-              return (
-                <React.Fragment key={index}>
-                  <>
-                    {item.enableBoth ? (
-                      <>
-                        <View style={tw`pb-4 flex-row justify-between`}>
-                          <Text
-                            style={[
-                              tw`text-black900 font-RobotoBold text-sm`,
-                              item.titleStyle,
-                            ]}
-                          >
-                            {item.title}
-                          </Text>
-                          <View>{item.customComponent}</View>
-                        </View>
-                      </>
-                    ) : (
-                      <>
-                        {item.customComponent ? (
-                          <View style={tw`pb-4`}>{item.customComponent}</View>
-                        ) : (
-                          <TouchableOpacity
-                            style={tw`pb-4`}
-                            onPress={item.onPress}
-                          >
-                            <Text
-                              style={[
-                                tw`text-black900 font-RobotoBold text-sm`,
-                                item.titleStyle,
-                              ]}
-                            >
-                              {item.title}
-                            </Text>
-                          </TouchableOpacity>
-                        )}
-                      </>
-                    )}
-                  </>
-                </React.Fragment>
-              );
-            })}
-          </Pressable>
-        </Pressable>
-      )}
-    </>
-  );
-};
-
-export default React.memo(ActionModal);

package/template/src/lib/modals/BottomModal.tsx

@@ -1,224 +0,0 @@
-import {
-  Animated,
-  KeyboardAvoidingView,
-  Modal,
-  PanResponder,
-  Platform,
-  SafeAreaView,
-  StyleSheet,
-  TouchableOpacity,
-  View,
-} from "react-native";
-// Importing necessary packages and components
-import React, { useRef } from "react";
-
-// Defining the props for RBSheet
-interface RBSheetProps {
-  height?: number;
-  openDuration?: number;
-  closeDuration?: number;
-  closeOnPressMask?: boolean;
-  closeOnPressBack?: boolean;
-  draggable?: boolean;
-  dragOnContent?: boolean;
-  useNativeDriver?: boolean;
-  customStyles?: any;
-  customModalProps?: any;
-  customAvoidingViewProps?: any;
-  visible?: boolean;
-  setVisible?: React.Dispatch<React.SetStateAction<boolean>>;
-  title?: string;
-  headerComponent?: React.ReactNode;
-  children?: React.ReactNode;
-}
-
-const BottomModal = React.forwardRef(
-  (
-    {
-      height = 100,
-      openDuration = 300,
-      closeDuration = 200,
-      closeOnPressMask = true,
-      closeOnPressBack = false,
-      draggable = false,
-      dragOnContent = false,
-      useNativeDriver = false,
-      customStyles = {},
-      customModalProps = {},
-      customAvoidingViewProps = {},
-      setVisible,
-      visible,
-      title = "Modal Title",
-      children = <View />,
-      headerComponent,
-    }: RBSheetProps,
-    ref
-  ) => {
-    // Animated height and pan values
-    const animatedHeight = useRef(new Animated.Value(0)).current;
-    const pan = useRef(new Animated.ValueXY()).current;
-
-    // Function to handle modal visibility
-    const handleSetVisible = (isVisible: boolean) => {
-      if (isVisible) {
-        // Open animation
-        Animated.timing(animatedHeight, {
-          useNativeDriver,
-          toValue: height,
-          duration: openDuration,
-        }).start();
-      } else {
-        // Close animation
-        Animated.timing(animatedHeight, {
-          useNativeDriver,
-          toValue: 0,
-          duration: closeDuration,
-        }).start(() => {
-          setVisible && setVisible(false);
-          pan.setValue({ x: 0, y: 0 }); // Reset pan values
-        });
-      }
-    };
-
-    // Creating PanResponder for drag functionality
-    const panResponder = useRef(
-      PanResponder.create({
-        onStartShouldSetPanResponder: () => draggable,
-        onMoveShouldSetPanResponder: (e, gestureState) =>
-          draggable && dragOnContent && gestureState.dy > 0,
-        onPanResponderMove: (e, gestureState) => {
-          if (gestureState.dy > 0) {
-            Animated.event([null, { dy: pan.y }], { useNativeDriver })(
-              e,
-              gestureState
-            );
-          }
-        },
-        onPanResponderRelease: (e, gestureState) => {
-          if (gestureState.dy > 100) {
-            handleSetVisible(false);
-          } else {
-            Animated.spring(pan, {
-              toValue: { x: 0, y: 0 },
-              useNativeDriver,
-            }).start();
-          }
-        },
-      })
-    ).current;
-
-    React.useEffect(() => {
-      if (visible) {
-        handleSetVisible(visible);
-      } else {
-        handleSetVisible(false);
-      }
-    }, [visible]);
-
-    // React Native modal render
-
-    return (
-      <Modal
-        transparent
-        visible={visible}
-        onRequestClose={closeOnPressBack ? () => handleSetVisible(false) : null}
-        {...customModalProps}
-      >
-        <KeyboardAvoidingView
-          behavior={Platform.OS === "ios" ? "padding" : "height"}
-          style={[styles.wrapper, customStyles]}
-          {...customAvoidingViewProps}
-        >
-          <TouchableOpacity
-            style={styles.mask}
-            activeOpacity={1}
-            onPress={
-              closeOnPressMask ? () => handleSetVisible(false) : () => {}
-            }
-          />
-          <ModalContent>
-            <Animated.View
-              style={[
-                styles.container,
-                { transform: pan.getTranslateTransform() },
-                { height: animatedHeight },
-                customStyles,
-              ]}
-              {...(dragOnContent && panResponder.panHandlers)}
-            >
-              {draggable && (
-                <View
-                  style={styles.draggableContainer}
-                  {...(!dragOnContent && panResponder.panHandlers)}
-                >
-                  {headerComponent ? (
-                    headerComponent
-                  ) : (
-                    <View
-                      style={[styles.draggableIcon, customStyles.draggableIcon]}
-                    />
-                  )}
-                </View>
-              )}
-              {children}
-            </Animated.View>
-          </ModalContent>
-        </KeyboardAvoidingView>
-      </Modal>
-    );
-  }
-);
-
-export default BottomModal;
-
-export const ModalContent = ({ children }: any): React.ReactElement => {
-  if (Platform.OS === "ios") {
-    return children;
-  } else {
-    return <SafeAreaView style={styles.safeArea}>{children}</SafeAreaView>;
-  }
-};
-
-const styles = StyleSheet.create({
-  safeArea: {
-    flex: 1,
-    justifyContent: "flex-end", // Ensures the modal content starts at the bottom
-  },
-  wrapper: {
-    flex: 1,
-    backgroundColor: "#00000077",
-  },
-  mask: {
-    flex: 1,
-    backgroundColor: "transparent",
-  },
-  container: {
-    backgroundColor: "transparent",
-    width: "100%",
-    height: 0,
-    overflow: "hidden",
-  },
-  header: {
-    padding: 15,
-    borderBottomWidth: 1,
-    borderBottomColor: "#ccc",
-    backgroundColor: "#f8f8f8",
-  },
-  title: {
-    fontSize: 16,
-    fontWeight: "bold",
-    textAlign: "center",
-  },
-  draggableContainer: {
-    width: "100%",
-    alignItems: "center",
-    backgroundColor: "transparent",
-  },
-  draggableIcon: {
-    width: 35,
-    height: 5,
-    borderRadius: 5,
-    margin: 10,
-    backgroundColor: "#ccc",
-  },
-});