How to Determine if an Image is in Landscape or Portrait Mode using CameraRoll in React Native

Question

I am working on a React Native project where I am using the CameraRoll library to access photos from the device's gallery. My requirement is to determine whether each photo was originally taken in landscape or portrait mode.

I have successfully fetched the photos using CameraRoll.getPhotos(), but the returned object does not seem to provide explicit information about the original orientation (landscape or portrait) of the photos. Here is an example of the data I am getting:

{
  "extension": "jpg",
  "fileSize": 1057317,
  "filename": "example.jpg",
  "height": null,
  "orientation": 0,
  "playableDuration": null,
  "uri": "file:///example-path",
  "width": null
}

As you can see, the width and height are returning null, and I am not sure how to use the orientation field to determine the original mode of the photo.

Is there a way to accurately determine if each photo was taken in landscape or portrait mode using CameraRoll? I am open to using additional libraries if necessary.

Thank you for your assistance.

Answer 1

I'm not familiar with CameraRoll but if you want to, you can take an advantage of Image.getSize or Image.resolveAssetSource method

here's a Hook example to use Image.getSize method [untested]

import {Image} from 'react-native';

const imageOrientation = (source) => {
  const [Orientation, setOrientation] = React.useState(null);

  React.useEffect(() => {
    Image.getSize(
      source,
      (widthSize, heightSize) => {
        if (widthSize > heightSize) setOrientation('landscape')
        else setOrientation('portrait')
      },
      (err) => {
        console.error(err);
      }
    );
  }, [source]);

  return Orientation
};

and later you can use it like this

const orientationImage = imageOrientation(uriOfTheImage)

React.useEffect(() => {
  console.log('orientationImage => ', orientationImage)
}, [orientationImage]);