Skip to content

Adds 'orientation' field to Result #236

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

zedtux
Copy link

@zedtux zedtux commented Jul 10, 2025

🚀 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 added a commit to Pharmony/react-native-multiple-image-picker that referenced this pull request Jul 15, 2025
…ency & auto-linking fix

This commit introduces comprehensive improvements to the React Native Multiple Image Picker library:

🔧 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

🖼️ 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

📱 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 allowing developers to 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

🚨 Breaking Changes: None - All changes are backward compatible

Closes NitrogenZLab#236
@zedtux zedtux force-pushed the features/add-result-orientation-field branch from edf2554 to a7d1e28 Compare July 15, 2025 07:32
@zedtux
Copy link
Author

zedtux commented Jul 15, 2025

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?

…ency & auto-linking fix

This commit introduces comprehensive improvements to the React Native Multiple Image Picker library:

🔧 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

🖼️ 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

📱 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 allowing developers to 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

🚨 Breaking Changes: None - All changes are backward compatible

Closes NitrogenZLab#236
@zedtux zedtux force-pushed the features/add-result-orientation-field branch from bf0b921 to 1c3c5b9 Compare July 16, 2025 07:17
@zedtux
Copy link
Author

zedtux commented Jul 16, 2025

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

@zedtux zedtux changed the title WIP: Adds 'orientation' field to Result Adds 'orientation' field to Result Jul 16, 2025
@baronha
Copy link
Member

baronha commented Jul 21, 2025

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

@baronha baronha self-requested a review July 27, 2025 09:06
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Image orientation missing in Result
2 participants