app-expo-cli 1.0.5 → 1.0.6

package/template/src/lib/imageViewer/ImageViwer.tsx

@@ -0,0 +1,332 @@
+import {
+  Alert,
+  Dimensions,
+  Image,
+  Modal,
+  PermissionsAndroid,
+  Platform,
+  Pressable,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import Animated, {
+  interpolate,
+  runOnJS,
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+  withTiming,
+} from 'react-native-reanimated';
+import {
+  Gesture,
+  GestureDetector,
+  GestureHandlerRootView,
+} from 'react-native-gesture-handler';
+import React, {useRef, useState} from 'react';
+
+import RNFS from 'react-native-fs';
+
+const {width: SCREEN_WIDTH, height: SCREEN_HEIGHT} = Dimensions.get('window');
+interface ImageViewProps {
+  source: {uri: string}; // Image source (required)
+  style?: any; // Custom styles for the thumbnail
+  modalBackgroundStyle?: any; // Style for the modal background
+  headerStyle?: any; // Style for the header container
+  closeButtonStyle?: any; // Style for the close button text
+  onClose?: () => void; // Optional callback for the close button
+  onModalOpen?: () => void; // Optional callback for when the modal opens
+  animationConfig?: {
+    openDuration?: number;
+    closeDuration?: number;
+  }; // Customize animation durations
+  gesturesEnabled?: boolean; // Toggle gestures
+  aspectRatio?: number; // Allow customizable aspect ratio
+  doubleTapScale?: number; // Customize double-tap zoom scale
+}
+
+const ImageView: React.FC<ImageViewProps> = ({
+  source,
+  style,
+  modalBackgroundStyle,
+  headerStyle,
+  closeButtonStyle,
+  onClose,
+  onModalOpen,
+  animationConfig = {openDuration: 500, closeDuration: 300},
+  gesturesEnabled = true,
+  aspectRatio = 1,
+  doubleTapScale = 2,
+}) => {
+  const [isModalVisible, setIsModalVisible] = useState(false);
+  const [origin, setOrigin] = useState({x: 0, y: 0, width: 0, height: 0});
+
+  const scale = useSharedValue(1);
+  const translateX = useSharedValue(0);
+  const translateY = useSharedValue(0);
+  const animatedOpacity = useSharedValue(1);
+  const animatedPosition = useSharedValue(0);
+
+  const ref = useRef<Image>(null);
+
+  const cumulativeTranslateX = useSharedValue(0);
+  const cumulativeTranslateY = useSharedValue(0);
+
+  const initialImageWidth = SCREEN_WIDTH;
+  const initialImageHeight = SCREEN_WIDTH / aspectRatio;
+
+  const calculateBounds = (scaleFactor: number) => {
+    'worklet';
+    const scaledWidth = initialImageWidth * scaleFactor;
+    const scaledHeight = initialImageHeight * scaleFactor;
+
+    const maxTranslateX = Math.max((scaledWidth - SCREEN_WIDTH) / 2, 0);
+    const maxTranslateY = Math.max((scaledHeight - SCREEN_HEIGHT) / 2, 0);
+
+    return {maxTranslateX, maxTranslateY};
+  };
+
+  const clamp = (value: number, min: number, max: number) => {
+    'worklet';
+    return Math.min(Math.max(value, min), max);
+  };
+
+  const doubleTapGesture = Gesture.Tap()
+    .numberOfTaps(2)
+    .onEnd(() => {
+      if (scale.value > 1) {
+        scale.value = withSpring(1);
+        translateX.value = withSpring(0);
+        translateY.value = withSpring(0);
+        cumulativeTranslateX.value = 0;
+        cumulativeTranslateY.value = 0;
+      } else {
+        scale.value = withSpring(doubleTapScale);
+      }
+    });
+
+  const pinchGesture = Gesture.Pinch()
+    .onUpdate(e => {
+      scale.value = Math.max(1, e.scale);
+    })
+    .onEnd(() => {
+      if (scale.value < 1) {
+        scale.value = withSpring(1);
+      }
+    });
+
+  const panGesture = Gesture.Pan()
+    .onUpdate(e => {
+      if (scale.value > 1) {
+        const {maxTranslateX, maxTranslateY} = calculateBounds(scale.value);
+
+        translateX.value = clamp(
+          e.translationX + cumulativeTranslateX.value,
+          -maxTranslateX,
+          maxTranslateX,
+        );
+        translateY.value = clamp(
+          e.translationY + cumulativeTranslateY.value,
+          -maxTranslateY,
+          maxTranslateY,
+        );
+      }
+    })
+    .onEnd(() => {
+      if (scale.value > 1) {
+        cumulativeTranslateX.value = translateX.value;
+        cumulativeTranslateY.value = translateY.value;
+      }
+    });
+
+  const combinedGesture = gesturesEnabled
+    ? Gesture.Simultaneous(
+        Gesture.Simultaneous(pinchGesture, panGesture),
+        doubleTapGesture,
+      )
+    : undefined;
+
+  const animatedImageStyle = useAnimatedStyle(() => {
+    'worklet';
+    return {
+      opacity: animatedOpacity.value,
+      width: interpolate(
+        animatedPosition.value,
+        [0, 1],
+        [origin.width, initialImageWidth],
+      ),
+      height: interpolate(
+        animatedPosition.value,
+        [0, 1],
+        [origin.height, initialImageHeight],
+      ),
+      transform: [
+        {
+          translateX: interpolate(
+            animatedPosition.value,
+            [0, 1],
+            [origin.x + origin.width / 2 - SCREEN_WIDTH / 2, translateX.value],
+          ),
+        },
+        {
+          translateY: interpolate(
+            animatedPosition.value,
+            [0, 1],
+            [
+              origin.y + origin.height / 2 - SCREEN_HEIGHT / 2,
+              translateY.value,
+            ],
+          ),
+        },
+        {scale: scale.value},
+      ],
+    };
+  });
+
+  const animatedBackgroundStyle = useAnimatedStyle(() => {
+    'worklet';
+    return {
+      opacity: animatedOpacity.value,
+      backgroundColor: 'black',
+      ...modalBackgroundStyle,
+    };
+  });
+
+  const handleOpenModal = () => {
+    ref.current?.measure((x, y, width, height, pageX, pageY) => {
+      setOrigin({x: pageX, y: pageY, width, height});
+      animatedPosition.value = 0;
+      animatedOpacity.value = 0;
+
+      setIsModalVisible(true);
+      onModalOpen?.();
+
+      animatedPosition.value = withTiming(1, {
+        duration: animationConfig.openDuration,
+      });
+      animatedOpacity.value = withTiming(1, {
+        duration: animationConfig.openDuration,
+      });
+    });
+  };
+
+  const handleCloseModal = () => {
+    'worklet';
+    animatedOpacity.value = withTiming(
+      0,
+      {duration: animationConfig.closeDuration},
+      () => {
+        // Use runOnJS to call non-worklet functions
+        runOnJS(setIsModalVisible)(false);
+        if (onClose) {
+          runOnJS(onClose)();
+        }
+      },
+    );
+  };
+
+  const handleDownload = async () => {
+    if (Platform.OS === 'android') {
+      const granted = await PermissionsAndroid.request(
+        PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,
+        {
+          title: 'Storage Permission Required',
+          message: 'The app needs access to your storage to download images.',
+        },
+      );
+      if (granted !== PermissionsAndroid.RESULTS.GRANTED) {
+        Alert.alert(
+          'Permission Denied',
+          'Cannot download image without storage permission.',
+        );
+        return;
+      }
+    }
+
+    const fileName = source.uri.split('/').pop();
+    const path = `${RNFS.DownloadDirectoryPath}/${fileName}`;
+    try {
+      await RNFS.downloadFile({
+        fromUrl: source.uri,
+        toFile: path,
+      }).promise;
+      Alert.alert('Download Successful', 'Image downloaded successfully.');
+    } catch (error) {
+      Alert.alert(
+        'Download Failed',
+        'An error occurred while downloading the image.',
+      );
+    }
+  };
+
+  return (
+    <>
+      <Pressable onPress={handleOpenModal}>
+        <Image ref={ref} source={source} style={[style]} />
+      </Pressable>
+
+      <Modal
+        statusBarTranslucent
+        animationType="fade"
+        transparent
+        visible={isModalVisible}
+        onRequestClose={handleCloseModal}>
+        <GestureHandlerRootView style={styles.modalContainer}>
+          <Animated.View
+            style={[styles.modalBackground, animatedBackgroundStyle]}>
+            <View style={[styles.header, headerStyle]}>
+              <TouchableOpacity onPress={handleCloseModal}>
+                <Text style={[styles.closeButton, closeButtonStyle]}>
+                  Close
+                </Text>
+              </TouchableOpacity>
+              <TouchableOpacity onPress={() => handleDownload()}>
+                <Text style={styles.downloadButton}>Download</Text>
+              </TouchableOpacity>
+            </View>
+            <GestureDetector gesture={combinedGesture}>
+              <Animated.Image
+                source={source}
+                style={[animatedImageStyle]}
+                resizeMode="cover"
+              />
+            </GestureDetector>
+          </Animated.View>
+        </GestureHandlerRootView>
+      </Modal>
+    </>
+  );
+};
+
+export default ImageView;
+
+const styles = StyleSheet.create({
+  modalContainer: {
+    flex: 1,
+  },
+  modalBackground: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  header: {
+    position: 'absolute',
+    top: 50,
+    right: 20,
+    zIndex: 1,
+    flexDirection: 'row-reverse',
+    gap: 15,
+  },
+  closeButton: {
+    color: 'white',
+    fontSize: 18,
+    fontWeight: 'bold',
+  },
+  downloadButton: {
+    color: 'white',
+    fontSize: 18,
+    fontWeight: 'bold',
+    marginLeft: 15,
+  },
+});

package/template/src/lib/imageZoomer/ImageZoomer.tsx

@@ -0,0 +1,104 @@
+import Animated, {
+  clamp,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from "react-native-reanimated";
+import { Gesture, GestureDetector } from "react-native-gesture-handler";
+
+import { Dimensions } from "react-native";
+import React from "react";
+
+const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get("window");
+
+interface ZoomableImageProps {
+  uri: string;
+}
+
+const ZoomableImage: React.FC<ZoomableImageProps> = ({ uri }) => {
+  const scale = useSharedValue(1);
+  const savedScale = useSharedValue(1);
+
+  const translateX = useSharedValue(0);
+  const translateY = useSharedValue(0);
+  const savedTranslateX = useSharedValue(0);
+  const savedTranslateY = useSharedValue(0);
+
+  const imageWidth = SCREEN_WIDTH;
+  const imageHeight = SCREEN_HEIGHT * 0.8;
+
+  const pinchGesture = Gesture.Pinch()
+    .onUpdate((event) => {
+      scale.value = clamp(savedScale.value * event.scale, 1, 5);
+    })
+    .onEnd(() => {
+      savedScale.value = scale.value;
+    });
+
+  const panGesture = Gesture.Pan()
+    .onUpdate((event) => {
+      if (scale.value > 1) {
+        // Limit pan to image bounds
+        const scaledWidth = imageWidth * scale.value;
+        const scaledHeight = imageHeight * scale.value;
+
+        const maxX = (scaledWidth - imageWidth) / 2;
+        const maxY = (scaledHeight - imageHeight) / 6;
+
+        translateX.value = clamp(
+          savedTranslateX.value + event.translationX,
+          -maxX,
+          maxX
+        );
+        translateY.value = clamp(
+          savedTranslateY.value + event.translationY,
+          -maxY,
+          maxY
+        );
+      }
+    })
+    .onEnd(() => {
+      savedTranslateX.value = translateX.value;
+      savedTranslateY.value = translateY.value;
+    });
+
+  const doubleTapGesture = Gesture.Tap()
+    .numberOfTaps(2)
+    .onEnd(() => {
+      const newScale = scale.value > 1 ? 1 : 2;
+      scale.value = withTiming(newScale);
+      savedScale.value = newScale;
+
+      translateX.value = withTiming(0);
+      translateY.value = withTiming(0);
+      savedTranslateX.value = 0;
+      savedTranslateY.value = 0;
+    });
+
+  const composedGesture = Gesture.Simultaneous(
+    doubleTapGesture,
+    Gesture.Simultaneous(pinchGesture, panGesture)
+  );
+
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      transform: [
+        { translateX: translateX.value },
+        { translateY: translateY.value },
+        { scale: scale.value },
+      ],
+    };
+  });
+
+  return (
+    <GestureDetector gesture={composedGesture}>
+      <Animated.Image
+        source={{ uri }}
+        style={[{ width: imageWidth, height: imageHeight }, animatedStyle]}
+        resizeMode="contain"
+      />
+    </GestureDetector>
+  );
+};
+
+export default ZoomableImage;

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

@@ -0,0 +1,86 @@
+import { Text, TouchableOpacity, View } from "react-native";
+
+import React from "react";
+import { SvgXml } from "react-native-svg";
+import tw from "../tailwind";
+
+interface CheckBoxProps {
+  onPress?: (version: boolean) => void;
+  color?: string;
+  iconColor?: string;
+  size?: number;
+  style?: any;
+  icon?: string;
+  title?: string;
+  titleStyle?: any;
+  containerStyle?: any;
+  checked?: boolean;
+  titleComponent?: React.ReactNode;
+}
+
+const defaultIcon = `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="12" height="12" x="0" y="0" viewBox="0 0 520 520" style="enable-background:new 0 0 512 512" xml:space="preserve" class=""><g><path d="M239.987 460.841a10 10 0 0 1-7.343-3.213L34.657 243.463A10 10 0 0 1 42 226.675h95.3a10.006 10.006 0 0 1 7.548 3.439l66.168 76.124c7.151-15.286 20.994-40.738 45.286-71.752 35.912-45.85 102.71-113.281 216.994-174.153a10 10 0 0 1 10.85 16.712c-.436.341-44.5 35.041-95.212 98.6-46.672 58.49-108.714 154.13-139.243 277.6a10 10 0 0 1-9.707 7.6z" data-name="6-Check" fill="white" opacity="1"  class=""></path></g></svg>`;
+
+const CheckBox = ({
+  color,
+  iconColor,
+  size,
+  style,
+  icon,
+  checked = false,
+  onPress,
+  title,
+  titleStyle,
+  containerStyle,
+  titleComponent,
+}: CheckBoxProps) => {
+  // This component renders a simple checkbox style
+
+  return (
+    <TouchableOpacity
+      style={[tw` flex-row items-center gap-2 `, containerStyle]}
+      onPress={() => {
+        onPress && onPress(!checked);
+      }}
+    >
+      <View
+        style={[
+          tw`w-5 h-5 border border-white rounded-md`,
+          {
+            backgroundColor: checked
+              ? color || tw.color("primary")
+              : "transparent",
+            justifyContent: "center",
+            alignItems: "center",
+          },
+          style,
+        ]}
+      >
+        {checked && icon ? (
+          <SvgXml xml={icon} width={size || 12} height={size || 12} />
+        ) : (
+          checked && (
+            <SvgXml xml={defaultIcon} width={size || 12} height={size || 12} />
+          )
+        )}
+      </View>
+
+      {
+        // Render title component if provided
+        titleComponent ? titleComponent : null
+      }
+
+      {title && !titleComponent ? (
+        <Text
+          style={[
+            tw`text-white  text-sm leading-5 font-InterRegular `,
+            titleStyle,
+          ]}
+        >
+          {title}
+        </Text>
+      ) : null}
+    </TouchableOpacity>
+  );
+};
+
+export default CheckBox;