[expo-image-picker] Specific images are broken on the ios.

[seungyoubkim]

Please provide the following:

1. SDK Version: 46.0.0 (expo), 13.3.1 (expo-image-picker)
2. Platforms(Android/iOS/web/all): ios
3. Add the appropriate “Tag” based on what Expo library you have a question on.

First of all, I am sorry for writing questions using Google Translator because I am not familiar with English.

I implemented image upload using launchImageLibraryAsync, but when uploading only one of the basic images of the ios emulator, it was broken.

The characteristic of this picture is that it is an HDR picture of HEIF format.

This is the code I wrote.

const Template: FC = () => {
  const [uri, setUri] = useState('');

  const pickImage = async () => {
    const result = await ImagePicker.launchImageLibraryAsync({ quality: 1 });

    if (!result.cancelled) {
      setUri(result.uri);
    }
  };

  return (
    <View>
      {uri && <Image style={{ width: 200, height: 150 }} source={{ uri }} />}
      <Button title={'upload'} onPress={pickImage} />
    </View>
  );
};

Did I do something wrong?

[keith-kurak]

Hi!

Can you describe further what is “broken” about the image? I cannot tell from the picture.

If you believe there is a bug with an Expo package and you can reproduce in a Snack or repo, you can submit an issue here.

Thank you!

[seungyoubkim]

I am sorry for not explaining in detail because I can only upload one screenshot.

In the screenshot, the left side is the original image, and the right side is the image picked using the expo-image-picker.

The difference from the original is that the top of the picture is truncated and the bottom is filled with black.

I’m not sure if it’s a bug, so I posted the question first.

[seungyoubkim]

expo-image-picker - Snack

If you connect to the above snack url and press the “Upload Image” button in the ios emulator to select the same picture as the original picture in the above comment, you can reproduce the above situation.

[seungyoubkim]

I submitted the issue according to your advice. Thank you!

[keith-kurak]

This appears to be intended behavior. The Image component defaults to the resizeMode of cover, which means it zooms in on the image so it can fit within the size you give it. If the image is not the same aspect ratio as the Image component’s height and width, some of it will be cut off. You can change the resizeMode to contain to make the entire image fit within the height and width. You can read more about this property here: Image · React Native

[seungyoubkim]

Setting resizeMode to contain does not solve the problem.

There is a problem with the image uri itself.

In addition, the original image size is 4032x3024, and the Image component size is 320x240, which is the same 4:3 ratio.

[textual]

i’m seeing same behavior, even after expo upgrade

[seungyoubkim]

To resolve this issue, I upgraded the version of expo-image-picker to 14.0.1, and now HEIF pictures fail to pick.

Error: Failed to read picked image
→ Caused by: Cannot load representation of type public.jpeg
    at construct (native)
    at Wrapper (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=im.jobda.app.newrrow:20649:64)
    at construct (native)
    at _createSuperInternal (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=im.jobda.app.newrrow:99085:322)
    at call (native)
    at CodedError (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=im.jobda.app.newrrow:99093:26)

JPEG photos are picked well.

Am I the only one who has a problem?

The expo version is 47.0.0 and the expo-image-picker version is 14.0.1.