motorinc-gallery-picker-pro 1.0.2 → 1.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "motorinc-gallery-picker-pro",
-  "version": "1.0.2",
+  "version": "1.0.6",
   "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",
@@ -35,7 +35,7 @@
     "react-native-view-shot": ">=4.0.0"
   },
   "dependencies": {
-    "motorinc-global-components": "^2.1.5",
+    "motorinc-global-components": "^3.9.5",
     "react-native-worklets": "^0.4.1"
   },
   "repository": {

package/src/components/MainPhotoGallery.tsx

@@ -45,8 +45,9 @@ import {
   SPACING_16,
   SPACING_24,
   SPACING_4,
+  Header,
 } from 'motorinc-global-components';
-import { ThemeContext, FontProvider, useTheme } from 'motorinc-global-components';
+import {ThemeContext, FontProvider, useTheme} from 'motorinc-global-components';
 const {width: screenWidth, height: screenHeight} = Dimensions.get('window');
 
 export interface CropParams {
@@ -83,7 +84,7 @@ interface props {
   onCancel?: () => void; // Callback for cancel button
   onNext?: (selectedAssets: PhotoAsset[]) => void; // Callback for next button
   maxSelectionLimit?: number;
-  statusBarvalue?: number
+  statusBarvalue?: number;
 }
 
 const MainPhotoGallery = React.forwardRef<MainPhotoGalleryRef, props>(
@@ -105,7 +106,7 @@ const MainPhotoGallery = React.forwardRef<MainPhotoGalleryRef, props>(
       onCancel,
       onNext,
       maxSelectionLimit = 10,
-      statusBarvalue
+      statusBarvalue,
     },
     ref,
   ) => {
@@ -329,7 +330,11 @@ const MainPhotoGallery = React.forwardRef<MainPhotoGalleryRef, props>(
       };
 
       return (
-        <View style={[styles.selectedAssetWrapper, {height: 1.07 * screenWidth, width: screenWidth}]}> 
+        <View
+          style={[
+            styles.selectedAssetWrapper,
+            {height: 1.07 * screenWidth, width: screenWidth},
+          ]}>
           <ImageCropper
             ref={getCropperRef(item.id)}
             key={`${item.id}-${aspectRatio}`}
@@ -950,9 +955,9 @@ const MainPhotoGallery = React.forwardRef<MainPhotoGalleryRef, props>(
     const handleSingleAssetSelection = (asset: PhotoAsset) => {
       // For single selection mode - keep the selection persistent
       console.log('Single asset selected:', asset);
-       translateY.value = withTiming(0, {
-          duration: 300,
-        });
+      translateY.value = withTiming(0, {
+        duration: 300,
+      });
 
       // Set the selected asset and keep it selected
       setSelectedAssetIds(new Set([asset.id]));
@@ -978,9 +983,9 @@ const MainPhotoGallery = React.forwardRef<MainPhotoGalleryRef, props>(
     };
 
     const handleMultiAssetSelection = (asset: PhotoAsset) => {
-        translateY.value = withTiming(0, {
-          duration: 300,
-        });
+      translateY.value = withTiming(0, {
+        duration: 300,
+      });
 
       if (!isSelectionMode) {
         // Start selection mode on long press
@@ -1121,10 +1126,9 @@ const MainPhotoGallery = React.forwardRef<MainPhotoGalleryRef, props>(
       if (multiSelect) {
         // Start multi-selection mode on long press
         handleMultiAssetSelection(asset);
-          translateY.value = withTiming(0, {
+        translateY.value = withTiming(0, {
           duration: 300,
         });
-
       }
     };
 
@@ -1178,7 +1182,6 @@ const MainPhotoGallery = React.forwardRef<MainPhotoGalleryRef, props>(
       if (selectedAssetIds.size === 0) return;
 
       try {
-
         // Capture cropped images first
         await captureAllCroppedImages();
         const selectedAssets = assets.filter(asset =>
@@ -1473,7 +1476,7 @@ const MainPhotoGallery = React.forwardRef<MainPhotoGalleryRef, props>(
               <TouchableOpacity
                 activeOpacity={0.8}
                 key={ratio}
-                style={[styles.aspectRatioButton]}
+                // style={[styles.aspectRatioButton]}
                 onPress={() => setAspectRatio(ratio)}
                 hitSlop={{top: 12, bottom: 12}}>
                 <View
@@ -1514,8 +1517,18 @@ const MainPhotoGallery = React.forwardRef<MainPhotoGalleryRef, props>(
               onPress={() => {
                 displayPreviousIndex();
               }}>
-
-                 <IconComponent
+              <PlayyText
+                BodyEmphasized
+                color={
+                  !selectedAssets ||
+                  selectedAssets.length === 0 ||
+                  currentSelectedIndex === 0
+                    ? 'rgba(235, 238, 245, 0.60)'
+                    : '#fff'
+                }>
+                {String.fromCharCode(60558)}
+              </PlayyText>
+              {/* <IconComponent
                 name={icons.leftArrow}
                 color={
                   !selectedAssets ||
@@ -1524,8 +1537,7 @@ const MainPhotoGallery = React.forwardRef<MainPhotoGalleryRef, props>(
                     ? 'rgba(235, 238, 245, 0.60)'
                     : '#fff'
                 }
-              />
-              
+              /> */}
             </TouchableOpacity>
 
             {/* <Text
@@ -1546,20 +1558,27 @@ const MainPhotoGallery = React.forwardRef<MainPhotoGalleryRef, props>(
               onPress={() => {
                 displayNextIndex();
               }}>
-
-
-
-                   <IconComponent
-                  name={icons.rightArrow}
-                  color={
-                   !selectedAssets ||
-                selectedAssets.length === 0 ||
-                currentSelectedIndex >= selectedAssets.length - 1
-                      ? "rgba(235, 238, 245, 0.60)"
-                      : "#fff"
-                  }
-                />
-              
+              {/* <IconComponent
+                name={icons.rightArrow}
+                color={
+                  !selectedAssets ||
+                  selectedAssets.length === 0 ||
+                  currentSelectedIndex >= selectedAssets.length - 1
+                    ? 'rgba(235, 238, 245, 0.60)'
+                    : '#fff'
+                }
+              /> */}
+              <PlayyText
+                BodyEmphasized
+                color={
+                  !selectedAssets ||
+                  selectedAssets.length === 0 ||
+                  currentSelectedIndex >= selectedAssets.length - 1
+                    ? 'rgba(235, 238, 245, 0.60)'
+                    : '#fff'
+                }>
+                {String.fromCharCode(60559)}
+              </PlayyText>
             </TouchableOpacity>
           </View>
         </View>
@@ -1667,6 +1686,12 @@ const MainPhotoGallery = React.forwardRef<MainPhotoGalleryRef, props>(
       );
     };
 
+    const handleNextPress = useCallback(() => {
+      if (onNext) {
+        onNext(selectedAssets || []);
+      }
+    }, [onNext, selectedAssets]);
+
     const renderCancelNextButtons = () => {
       // Only show buttons if we have the callbacks and are in multi-select mode
       if (!multiSelect || (!onCancel && !onNext)) {
@@ -1676,20 +1701,37 @@ const MainPhotoGallery = React.forwardRef<MainPhotoGalleryRef, props>(
       const currentSelectedAssets = selectedAssets || [];
 
       return (
-        <NavigationHeader
-        backIcon
-        statusBarvalue={statusBarvalue!}
-        handleBack={onCancel}
-        buttonTitle='Next'
-        buttontextColor='#fff'
-        backIconColor='#fff'
-        isButton
-        label='Back'
-        labelColor='#fff'
-        // @ts-ignore
-        handlePressButton={onNext}
-      />
-      )      
+        // <NavigationHeader
+        //   backIcon
+        //   statusBarvalue={statusBarvalue!}
+        //   handleBack={onCancel}
+        //   buttonTitle="Next"
+        //   buttontextColor="#fff"
+        //   backIconColor="#fff"
+        //   isButton
+        //   label="Back"
+        //   labelColor="#fff"
+        //   // @ts-ignore
+        //   handlePressButton={onNext}
+        // />
+        <Header
+          statusBarValue={statusBarvalue}
+          style={{backgroundColor: '#000'}}>
+          <Header.Row>
+            <Header.Left
+              label="Back"
+              labelColor="#fff"
+              onBackPress={onCancel}
+            />
+            <Header.Right
+              buttonTitle="Next"
+              buttonTextColor="#008BF5"
+              isButton
+              onButtonPress={handleNextPress}
+            />
+          </Header.Row>
+        </Header>
+      );
     };
 
     const renderSelectedImagesModal = () => (
@@ -1973,70 +2015,64 @@ const MainPhotoGallery = React.forwardRef<MainPhotoGalleryRef, props>(
     });
 
     return (
-         <FontProvider
-            fonts={{
-              regular: "Playy-Regular",
-              medium: "Playy-Medium",
-
-             bold: "Playy-Bold",
-
-              SemiCondensedExtraBold: Platform.OS === "android"
-
-                ? "OpenSans_SemiCondensed-ExtraBold"
+      <FontProvider
+        fonts={{
+          regular: 'Playy-Regular',
+          medium: 'Playy-Medium',
 
-                : "OpenSansSemiCondensed-ExtraBold"
+          bold: 'Playy-Bold',
 
-           }}
-
-     >
-      <View
-        style={{
-          backgroundColor: '#000',
+          SemiCondensedExtraBold:
+            Platform.OS === 'android'
+              ? 'OpenSans_SemiCondensed-ExtraBold'
+              : 'OpenSansSemiCondensed-ExtraBold',
         }}>
+        <View
+          style={{
+            backgroundColor: '#000',
+          }}>
+          {renderCancelNextButtons()}
+
+          <Animated.View
+            style={[
+              styles.container,
+              animatedStyle,
+              {
+                height: screenHeight + (screenWidth * 1.07 + 44 - 140),
+              },
+            ]}>
+            <GestureHandlerRootView>
+              {(permissionStatus === 'authorized' ||
+                permissionStatus === 'limited') && (
+                <>
+                  <GestureDetector gesture={selectedAssetGesture}>
+                    <View>{renderSelectedAssetsHeader()}</View>
+                  </GestureDetector>
+
+                  <GestureDetector gesture={renderHeaderGesture}>
+                    <Animated.View>
+                      {renderCustomHeader()}
+                      {renderHeader()}
+                    </Animated.View>
+                  </GestureDetector>
+                </>
+              )}
 
-        {renderCancelNextButtons()}
+              <GestureDetector gesture={assetGesture}>
+                {renderAssetsGrid()}
+              </GestureDetector>
+            </GestureHandlerRootView>
+            {renderManageModal()}
 
-        <Animated.View
-          style={[
-            styles.container,
-            animatedStyle,
-            {
-              height: screenHeight + (screenWidth * 1.07 + 44 - 140),
-            },
-          ]}>
-          <GestureHandlerRootView>
-            {(permissionStatus === 'authorized' ||
-              permissionStatus === 'limited') && (
-              <>
-                <GestureDetector gesture={selectedAssetGesture}>
-                  <View>{renderSelectedAssetsHeader()}</View>
-                </GestureDetector>
-
-                <GestureDetector gesture={renderHeaderGesture}>
-                  <Animated.View>
-                    {renderCustomHeader()}
-                    {renderHeader()}
-                  </Animated.View>
-                </GestureDetector>
-              </>
+            {/* Loading overlay for album picker processing */}
+            {loading && (
+              <View style={styles.loadingOverlay}>
+                <ActivityIndicator size="large" color="#fff" />
+              </View>
             )}
-
-            <GestureDetector gesture={assetGesture}>
-              {renderAssetsGrid()}
-            </GestureDetector>
-          </GestureHandlerRootView>
-          {renderManageModal()}
-
-          {/* Loading overlay for album picker processing */}
-          {loading && (
-            <View style={styles.loadingOverlay}>
-              <ActivityIndicator size="large" color="#fff" />
-            </View>
-          )}
-        </Animated.View>
-      </View>
-     </FontProvider>
-
+          </Animated.View>
+        </View>
+      </FontProvider>
     );
   },
 );
@@ -2056,6 +2092,7 @@ const styles = StyleSheet.create({
   navControls: {
     flexDirection: 'row',
     justifyContent: 'center',
+    gap: 16,
     alignItems: 'center',
   },
   simpleHeader: {
@@ -2595,6 +2632,7 @@ const styles = StyleSheet.create({
   aspectRatioContainer: {
     flexDirection: 'row',
     paddingHorizontal: 4,
+    gap: 12,
   },
   aspectRatioButton: {
     paddingHorizontal: 12,