react-native-multiple-image-picker icon indicating copy to clipboard operation
react-native-multiple-image-picker copied to clipboard

Adds 'orientation' field to Result

Open zedtux opened this issue 5 months ago • 4 comments

🚀 Implement Orientation Handling, Cross-Platform Real Path Consistency & Auto-linking Fix

📋 Overview

This pull request introduces enhanced orientation handling to the React Native Multiple Image Picker library, ensures cross-platform consistency by implementing realPath on iOS, and fixes critical auto-linking issues that were preventing proper library compilation.

✨ Key Changes

🔧 Auto-linking Fix for Android

  • Fixed broken prefab dependency resolution for react-native-nitro-modules
  • Implemented manual NitroModules linking to bypass prefab issues
  • Added dynamic library path discovery with multiple fallback locations
  • Enhanced CMake configuration with comprehensive error handling and logging
  • Ensures reliable compilation across different Android build environments

Technical Details:

  • Uses file(GLOB) to dynamically find NitroModules library across build variants
  • Searches multiple intermediate build directories for maximum compatibility
  • Provides clear error messages when dependencies are missing
  • Includes direct library path linking as a backup mechanism

🖼️ Orientation Handling for Android

  • Automatic EXIF orientation processing to ensure images display correctly
  • Dimension adjustment based on orientation (width/height swapping for 90°/270° rotations)
  • Comprehensive error handling for corrupted EXIF data and memory issues
  • Performance-optimized one-at-a-time processing to prevent memory exhaustion

Supported EXIF Orientations:

EXIF Value Description Rotation Applied
1 Normal
3 Rotate 180° 180°
6 Rotate 90° CW 90°
8 Rotate 270° CW -90°
2, 4, 5, 7 Flip variations 0° (flip handling)

📱 Cross-Platform realPath Consistency

  • iOS: Now populates realPath with the actual file path (without "file://" prefix)
  • Android: Maintains existing behavior with real file system paths
  • Consistent API: Developers can now reliably use realPath on both platforms

📝 Documentation & Testing

  • Comprehensive documentation in docs/ORIENTATION.md
  • Unit tests for orientation handling (OrientationTest.kt)
  • Updated TypeScript interfaces with proper platform annotations

🔨 Code Changes

iOS (HybridMultipleImagePicker+Result.swift)

// Before
realPath: nil,

// After  
realPath: url.path,

Android (MultipleImagePickerImp.kt)

// New orientation adjustment logic
private fun adjustOrientation(pickerResult: PickerResult, filePath: String): PickerResult {
    // EXIF orientation processing with comprehensive error handling
    val (adjustedWidth, adjustedHeight) = when (orientation) {
        ExifInterface.ORIENTATION_ROTATE_90,
        ExifInterface.ORIENTATION_ROTATE_270 -> {
            Pair(pickerResult.height, pickerResult.width) // Swap dimensions
        }
        else -> Pair(pickerResult.width, pickerResult.height)
    }
    // ... 
}

CMake Auto-linking (MultipleImagePicker+autolinking.cmake)

# Manual NitroModules linking to bypass broken prefab
file(GLOB NITRO_SEARCH_PATHS
    "${PROJECT_ROOT}/node_modules/react-native-nitro-modules/android/build/intermediates/cmake/debug/obj/${ANDROID_ABI}/libNitroModules.so"
    "${PROJECT_ROOT}/node_modules/react-native-nitro-modules/android/build/intermediates/cxx/Debug/*/obj/${ANDROID_ABI}/libNitroModules.so"
    # ... multiple fallback paths
)

💡 Usage Examples

Accessing Orientation Data

import { openPicker } from '@baronha/react-native-multiple-image-picker';

const handleImagePicker = async () => {
  try {
    const results = await openPicker({
      mediaType: 'image',
      maxSelect: 10,
    });

    results.forEach((result) => {
      console.log('Image orientation:', result.orientation);
      console.log('Adjusted dimensions:', result.width, 'x', result.height);
      console.log('Real path:', result.realPath); // Now available on both iOS & Android
      console.log('URI path:', result.path); // Still available for backward compatibility
    });
  } catch (error) {
    console.error('Picker error:', error);
  }
};

Cross-Platform File Access

// Now works consistently on both platforms
const useRealPath = (result: PickerResult) => {
  if (result.realPath) {
    // Use the actual file system path
    return result.realPath;
  }
  // Fallback to regular path
  return result.path;
};

🎯 Benefits

For Developers

  • Consistent cross-platform behavior for file path handling
  • Automatic image orientation correction without manual intervention
  • Reliable library compilation without CMake/prefab issues
  • Better TypeScript support with updated interfaces

For Users

  • Correctly oriented images in all orientations
  • Better performance with memory-efficient processing
  • Improved reliability across different Android devices and build configurations

📊 Platform Support

Feature Android iOS
Orientation Handling ✅ Full EXIF processing ✅ System-level handling
realPath Support ✅ Existing functionality NEW - Now available
Auto-linking FIXED - Manual linking ✅ No changes needed

🔍 Testing

  • Unit tests for orientation calculations
  • Error handling tests for edge cases
  • Cross-platform compatibility verified
  • Memory leak prevention validated

🚨 Breaking Changes

None - All changes are backward compatible. Existing code will continue to work while new features are available as optional enhancements.

🎉 Conclusion

This pull request significantly improves the reliability and cross-platform consistency of the React Native Multiple Image Picker library. The auto-linking fix ensures smooth integration, while the orientation handling and realPath consistency provide developers with robust tools for handling media assets across platforms.

Closes #235.

zedtux avatar Jul 10 '25 07:07 zedtux

All looks good to me, the lib is working on Android and iOS in my React-Native 0.76 application.

Could you please @baronha review this PR and add your comments?

zedtux avatar Jul 15 '25 07:07 zedtux

I did a fix on the autolinking code so that it works for Debug and Release build artifacts.

zedtux avatar Jul 16 '25 07:07 zedtux

Thank you for your effort, I will take a look, man @zedtux

baronha avatar Jul 21 '25 07:07 baronha

Your auto-linking Fix for Android gave me build errors with React Native 0.79.5.

KesoGizmoYoshi avatar Oct 30 '25 16:10 KesoGizmoYoshi