motorinc-gallery-picker-pro 1.0.0

package/motorinc-gallery-picker-pro.podspec

@@ -0,0 +1,21 @@
+require "json"
+
+package = JSON.parse(File.read(File.join(__dir__, "package.json")))
+
+Pod::Spec.new do |s|
+  s.name         = "motorinc-gallery-picker-pro"
+  s.version      = package["version"]
+  s.summary      = package["description"]
+  s.homepage     = package["homepage"]
+  s.license      = package["license"]
+  s.authors      = package["author"]
+
+  s.platforms    = { :ios => "11.0" }
+  s.source       = { :git => "https://github.com/yourrepo/gallery-picker.git", :tag => "#{s.version}" }
+
+  s.source_files = "ios/**/*.{h,m,mm,swift}"
+  s.requires_arc = true
+
+  s.dependency "React-Core"
+  s.dependency "React"
+end

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "motorinc-gallery-picker-pro",
+  "version": "1.0.0",
+  "description": "A comprehensive React Native media gallery picker with smooth animations, multi-select, single-select, crop functionality, and native iOS/Android support",
+  "main": "index.js",
+  "types": "index.d.ts",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "echo \"No build step needed for JS files\""
+  },
+  "keywords": [
+    "react-native",
+    "gallery",
+    "media-picker",
+    "photo-picker",
+    "video-picker",
+    "image-picker",
+    "crop",
+    "multi-select",
+    "single-select",
+    "modern-ui",
+    "native",
+    "ios",
+    "android",
+    "gesture",
+    "animation"
+  ],
+  "author": "Shakti Ranjan Mohanty",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-native": ">=0.70.0",
+    "react-native-gesture-handler": ">=2.0.0",
+    "react-native-reanimated": ">=3.0.0",
+    "react-native-view-shot": ">=4.0.0"
+  },
+  "dependencies": {
+    "motorinc-global-components": "^2.1.5",
+    "react-native-worklets": "^0.4.1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/shaktimohanty21/motorinc-gallery-picker-pro.git"
+  },
+  "homepage": "https://github.com/shaktimohanty21/motorinc-gallery-picker-pro#readme",
+  "bugs": {
+    "url": "https://github.com/shaktimohanty21/motorinc-gallery-picker-pro/issues"
+  },
+  "files": [
+    "android/",
+    "ios/",
+    "src/",
+    "index.js",
+    "index.d.ts",
+    "react-native.config.js",
+    "motorinc-gallery-picker-pro.podspec",
+    "README.md",
+    "LICENSE"
+  ],
+  "engines": {
+    "node": ">=18"
+  }
+}

package/react-native.config.js

@@ -0,0 +1,13 @@
+module.exports = {
+  dependency: {
+    platforms: {
+      android: {
+        sourceDir: 'android',
+        packageImportPath: 'import com.gallerypicker.imagepicker.ImagePickerPackage;',
+      },
+      ios: {
+        podspecPath: 'motorinc-gallery-picker-pro.podspec',
+      },
+    },
+  },
+};

package/src/components/ImageCropper.tsx

@@ -0,0 +1,433 @@
+import React, {forwardRef, useImperativeHandle} from 'react';
+import {View, Text, StyleSheet, Dimensions} from 'react-native';
+import {Gesture, GestureDetector} from 'react-native-gesture-handler';
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  runOnJS,
+  withTiming,
+} from 'react-native-reanimated';
+import {captureRef} from 'react-native-view-shot';
+import PhotoAssetImage from './PhotoAssetImage';
+import {PhotoAsset} from '../modules/ImagePickerModule';
+const {width: screenWidth, height: screenHeight} = Dimensions.get('window');
+
+export interface CropValues {
+  scale: number;
+  translateX: number;
+  translateY: number;
+}
+
+export interface ImageCropperRef {
+  captureImage: () => Promise<string>;
+}
+
+interface ImageCropperProps {
+  asset: PhotoAsset;
+  containerWidth: number;
+  containerHeight: number;
+  cropWidth: number;
+  cropHeight: number;
+  initialCropValues?: CropValues;
+  onCropChange?: (values: CropValues) => void;
+  showOverlay?: boolean;
+  showGrid?: boolean;
+  enableGestures?: boolean;
+}
+
+const ImageCropper = forwardRef<ImageCropperRef, ImageCropperProps>(
+  (
+    {
+      asset,
+      containerWidth,
+      containerHeight,
+      cropWidth,
+      cropHeight,
+      initialCropValues = {scale: 1, translateX: 0, translateY: 0},
+      onCropChange,
+      showOverlay = true,
+      showGrid = true,
+      enableGestures = true,
+    },
+    ref,
+  ) => {
+    // Shared values for gestures
+    const cropScale = useSharedValue(initialCropValues.scale);
+    const cropTranslateX = useSharedValue(initialCropValues.translateX);
+    const cropTranslateY = useSharedValue(initialCropValues.translateY);
+    const savedScale = useSharedValue(initialCropValues.scale);
+    const savedTranslateX = useSharedValue(initialCropValues.translateX);
+    const savedTranslateY = useSharedValue(initialCropValues.translateY);
+    
+    // Shared value for grid opacity animation
+    const gridOpacity = useSharedValue(0);
+
+    // Ref for capturing the crop area
+    const cropAreaRef = React.useRef<View>(null);
+
+    // Expose capture method via ref
+    useImperativeHandle(ref, () => ({
+      captureImage: async () => {
+        if (cropAreaRef.current) {
+          try {
+            const result = await captureRef(cropAreaRef.current, {
+              format: 'jpg',
+              quality: 1,
+              result: 'data-uri',
+            });
+            return result;
+          } catch (error) {
+            console.error('Error capturing crop area:', error);
+            throw error;
+          }
+        }
+        throw new Error('Crop area ref not available');
+      },
+    }));
+
+    // Update values when initialCropValues change
+    React.useEffect(() => {
+      cropScale.value = initialCropValues.scale;
+      cropTranslateX.value = initialCropValues.translateX;
+      cropTranslateY.value = initialCropValues.translateY;
+      savedScale.value = initialCropValues.scale;
+      savedTranslateX.value = initialCropValues.translateX;
+      savedTranslateY.value = initialCropValues.translateY;
+    }, [initialCropValues]);
+
+    const cropAnimatedStyle = useAnimatedStyle((): any => {
+      return {
+        transform: [
+          {scale: cropScale.value},
+          {translateX: cropTranslateX.value},
+          {translateY: cropTranslateY.value},
+        ],
+      };
+    });
+
+    const gridAnimatedStyle = useAnimatedStyle(() => {
+      return {
+        opacity: gridOpacity.value,
+      };
+    });
+
+    const notifyCropChange = () => {
+      if (onCropChange) {
+        onCropChange({
+          scale: cropScale.value,
+          translateX: cropTranslateX.value,
+          translateY: cropTranslateY.value,
+        });
+      }
+    };
+
+    const gesture = Gesture.Simultaneous(
+      Gesture.Pan()
+        .onStart(() => {
+          savedTranslateX.value = cropTranslateX.value;
+          savedTranslateY.value = cropTranslateY.value;
+          gridOpacity.value = withTiming(1, {duration: 150});
+        })
+        .onUpdate(event => {
+          const newX = savedTranslateX.value + event.translationX;
+          const newY = savedTranslateY.value + event.translationY;
+
+          const scaledWidth = containerWidth * cropScale.value;
+          const scaledHeight = containerHeight * cropScale.value;
+
+          // Adjusted calculation for max translation based on crop scale
+          const baseMaxTranslateX = (scaledWidth - cropWidth) / 2;
+          const maxTranslateX = baseMaxTranslateX / cropScale.value;
+
+          if (newX > maxTranslateX) {
+            cropTranslateX.value = maxTranslateX;
+          } else if (newX < -maxTranslateX) {
+            cropTranslateX.value = -maxTranslateX;
+          } else {
+            cropTranslateX.value = newX;
+          }
+
+          // Apply same logic for Y translation with proper height
+          const baseMaxTranslateY = (scaledHeight - cropHeight) / 2;
+          const maxTranslateY = baseMaxTranslateY / cropScale.value;
+
+          if (newY > maxTranslateY) {
+            cropTranslateY.value = maxTranslateY;
+          } else if (newY < -maxTranslateY) {
+            cropTranslateY.value = -maxTranslateY;
+          } else {
+            cropTranslateY.value = newY;
+          }
+        })
+        .onEnd(() => {
+          'worklet';
+          gridOpacity.value = withTiming(0, {duration: 300});
+          runOnJS(notifyCropChange)();
+        }),
+      Gesture.Pinch()
+        .onStart(() => {
+          savedScale.value = cropScale.value;
+          gridOpacity.value = withTiming(1, {duration: 150});
+        })
+        .onUpdate(event => {
+          const minScale = Math.max(
+            cropWidth / containerWidth,
+            cropHeight / containerHeight,
+          );
+          const newScale = Math.max(
+            minScale,
+            Math.min(6, savedScale.value * event.scale),
+          );
+          cropScale.value = newScale;
+        })
+        .onEnd(() => {
+          'worklet';
+          gridOpacity.value = withTiming(0, {duration: 300});
+          runOnJS(notifyCropChange)();
+        }),
+    );
+
+    const imageContainer = (
+      <Animated.View
+        style={[
+          styles.imageContainer,
+          {width: containerWidth, height: containerHeight},
+          cropAnimatedStyle,
+        ]}>
+        <PhotoAssetImage
+          uri={asset.uri}
+          style={[styles.photoAssetImage, styles.photoResizeCover]}
+          width={containerWidth * 3 }
+          height={containerHeight * 3}
+        />
+      </Animated.View>
+    );
+
+    return (
+      <View
+        style={[
+          styles.container,
+          {width: containerWidth, height: containerHeight},
+        ]}>
+        {enableGestures ? (
+          <GestureDetector gesture={gesture}>{imageContainer}</GestureDetector>
+        ) : (
+          imageContainer
+        )}
+
+
+            {/* Hidden crop capture area - positioned to capture only the visible crop area */}
+            <View
+              ref={cropAreaRef}
+              style={[
+                styles.cropCaptureArea,
+                {
+                  left: (containerWidth - cropWidth) / 2,
+                  top: (containerHeight - cropHeight) / 2,
+                  width: cropWidth,
+                  height: cropHeight,
+                  overflow: 'hidden',
+                },
+              ]}>
+              <Animated.View
+                style={[
+                  styles.cropInnerWrapper,
+                  {width: containerWidth, height: containerHeight},
+                  {left: -(containerWidth - cropWidth) / 2, top: -(containerHeight - cropHeight) / 2},
+                  cropAnimatedStyle,
+                ]}>
+                <PhotoAssetImage
+                  uri={asset.uri}
+                  style={[styles.photoAssetImage, styles.photoResizeCover]}
+                  width={containerWidth * 3}
+                  height={containerHeight * 3}
+                />
+              </Animated.View>
+            </View>
+
+        {/* Overlay masks - only show if enabled */}
+        {showOverlay && (
+          <View style={styles.overlayContainer} pointerEvents="none">
+            {/* Top mask */}
+            {(containerHeight - cropHeight) / 2 > 0 && (
+              <Animated.View
+                style={[
+                  styles.mask,
+                  {
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    height: (containerHeight - cropHeight) / 2,
+                  },
+                ]}
+              />
+            )}
+
+            {/* Bottom mask */}
+            {(containerHeight - cropHeight) / 2 > 0 && (
+              <Animated.View
+                style={[
+                  styles.mask,
+                  {
+                    bottom: 0,
+                    left: 0,
+                    right: 0,
+                    height: (containerHeight - cropHeight) / 2,
+                  },
+                ]}
+              />
+            )}
+
+            {/* Left mask */}
+            {(containerWidth - cropWidth) / 2 > 0 && (
+              <Animated.View
+                style={[
+                  styles.mask,
+                  {
+                    top: (containerHeight - cropHeight) / 2,
+                    left: 0,
+                    width: (containerWidth - cropWidth) / 2,
+                    height: cropHeight,
+                  },
+                ]}
+              />
+            )}
+
+            {/* Right mask */}
+            {(containerWidth - cropWidth) / 2 > 0 && (
+              <Animated.View
+                style={[
+                  styles.mask,
+                  {
+                    top: (containerHeight - cropHeight) / 2,
+                    right: 0,
+                    width: (containerWidth - cropWidth) / 2,
+                    height: cropHeight,
+                  },
+                ]}
+              />
+            )}
+
+            {/* Crop border and grid */}
+            <View
+              style={[
+                styles.cropBorder,
+                {left: (containerWidth - cropWidth) / 2, top: (containerHeight - cropHeight) / 2, width: cropWidth, height: cropHeight},
+              ]}>
+              {showGrid && (
+                <>
+                  {/* Grid lines */}
+                  <Animated.View
+                    style={[
+                      styles.gridLine,
+                      gridAnimatedStyle,
+                      {left: cropWidth / 3, height: cropHeight, width: 1},
+                    ]}
+                  />
+                  <Animated.View
+                    style={[
+                      styles.gridLine,
+                      gridAnimatedStyle,
+                      {
+                        left: (cropWidth * 2) / 3,
+                        height: cropHeight,
+                        width: 1,
+                      },
+                    ]}
+                  />
+                  <Animated.View
+                    style={[
+                      styles.gridLine,
+                      gridAnimatedStyle,
+                      {top: cropHeight / 3, width: cropWidth, height: 1},
+                    ]}
+                  />
+                  <Animated.View
+                    style={[
+                      styles.gridLine,
+                      gridAnimatedStyle,
+                      {
+                        top: (cropHeight * 2) / 3,
+                        width: cropWidth,
+                        height: 1,
+                      },
+                    ]}
+                  />
+                </>
+              )}
+            </View>
+
+          </View>
+        )}
+
+        {/* Video indicator */}
+        {asset.mediaType === 'video' && (
+          <View style={styles.videoIndicator}>
+            <Text style={styles.videoIcon}>🎥</Text>
+          </View>
+        )}
+      </View>
+    );
+  },
+);
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: '#000',
+    overflow: 'hidden',
+  },
+  imageContainer: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  photoAssetImage: {
+    flex: 1,
+    alignSelf: 'stretch',
+  },
+  photoResizeCover: {
+    resizeMode: 'cover' as any,
+  },
+  overlayContainer: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+  },
+  mask: {
+    backgroundColor: "#000",
+    position: 'absolute',
+  },
+
+  gridLine: {
+    position: 'absolute',
+    backgroundColor: 'rgba(84, 85, 86, 0.60)',
+    zIndex: 2,
+  },
+  cropCaptureArea: {
+    position: 'absolute',
+    backgroundColor: 'transparent',
+    pointerEvents: 'none',
+  },
+  cropInnerWrapper: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    position: 'absolute',
+  },
+  cropBorder: {
+    position: 'absolute',
+  },
+  videoIndicator: {
+    position: 'absolute',
+    bottom: 8,
+    right: 8,
+    backgroundColor: 'rgba(0, 0, 0, 0.7)',
+    borderRadius: 4,
+    padding: 2,
+  },
+  videoIcon: {
+    fontSize: 10,
+  },
+});
+
+export default ImageCropper;