motorinc-gallery-picker-pro 1.0.2 → 1.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "motorinc-gallery-picker-pro",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "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

@@ -46,7 +46,7 @@ import {
   SPACING_24,
   SPACING_4,
 } 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 +83,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 +105,7 @@ const MainPhotoGallery = React.forwardRef<MainPhotoGalleryRef, props>(
       onCancel,
       onNext,
       maxSelectionLimit = 10,
-      statusBarvalue
+      statusBarvalue,
     },
     ref,
   ) => {
@@ -329,7 +329,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 +954,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 +982,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 +1125,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 +1181,6 @@ const MainPhotoGallery = React.forwardRef<MainPhotoGalleryRef, props>(
       if (selectedAssetIds.size === 0) return;
 
       try {
-
         // Capture cropped images first
         await captureAllCroppedImages();
         const selectedAssets = assets.filter(asset =>
@@ -1514,8 +1516,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 +1536,7 @@ const MainPhotoGallery = React.forwardRef<MainPhotoGalleryRef, props>(
                     ? 'rgba(235, 238, 245, 0.60)'
                     : '#fff'
                 }
-              />
-              
+              /> */}
             </TouchableOpacity>
 
             {/* <Text
@@ -1546,20 +1557,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(60558)}
+              </PlayyText>
             </TouchableOpacity>
           </View>
         </View>
@@ -1677,19 +1695,19 @@ const MainPhotoGallery = React.forwardRef<MainPhotoGalleryRef, props>(
 
       return (
         <NavigationHeader
-        backIcon
-        statusBarvalue={statusBarvalue!}
-        handleBack={onCancel}
-        buttonTitle='Next'
-        buttontextColor='#fff'
-        backIconColor='#fff'
-        isButton
-        label='Back'
-        labelColor='#fff'
-        // @ts-ignore
-        handlePressButton={onNext}
-      />
-      )      
+          backIcon
+          statusBarvalue={statusBarvalue!}
+          handleBack={onCancel}
+          buttonTitle="Next"
+          buttontextColor="#fff"
+          backIconColor="#fff"
+          isButton
+          label="Back"
+          labelColor="#fff"
+          // @ts-ignore
+          handlePressButton={onNext}
+        />
+      );
     };
 
     const renderSelectedImagesModal = () => (
@@ -1973,70 +1991,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"
-
-                : "OpenSansSemiCondensed-ExtraBold"
+      <FontProvider
+        fonts={{
+          regular: 'Playy-Regular',
+          medium: 'Playy-Medium',
 
-           }}
+          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>
     );
   },
 );
@@ -2057,6 +2069,7 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center',
+    gap: 8,
   },
   simpleHeader: {
     flexDirection: 'row',