How to get jpg image from heic format in react native

Question

I am picking photos from gallery and upload to server but since few days I noticed that some photos have extension heic and browsers can't render those images.

1. Is there a way to extract photos from uploaded heic?
2. How in react native I can get jpeg from this format?

Answer 1

You can convert it on the server side, with the help of this awesome lib Tifig.

https://github.com/monostream/tifig

You can also use API's like https://cloudconvert.com/formats/image/heic to convert either on server side or on the mobile (client side).

Answer 2

I'm assuming you are using react-native-image-picker, which is the community library and most used one.

Actually is not necessary to install another module, just grab always the uri from the response and update the filename in case you are having a heic image. Code example:

const options = {
    title: 'Select Avatar',
    storageOptions: {
    skipBackup: true,
    path: 'images'
    },
    noData: true,
    quality: 1,
    mediaType: 'photo'
};

ImagePicker.showImagePicker(options, imgResponse => {

    this.setState({ imageLoading: true, avatarMediaId: null });

    if ((imgResponse.didCancel) || (imgResponse.error)) {
        this.setState({ imageLoading: false });
    } else {
        let source = {};
        let fileName = imgResponse.fileName;
        if (Platform.OS === 'ios' && (fileName.endsWith('.heic') || fileName.endsWith('.HEIC'))) {
            fileName = `${fileName.split(".")[0]}.JPG`;
        }
        source = { uri: imgResponse.uri, fileName };
        this.uploadImage(source);
    }
});

Answer 3

Here's my solution: I am using react-native-image-crop-picker.

In my case, the server doesn't accept if a filename is .HEIC, telling me to use .png or .jpg
So I just:

image.filename.replace(/HEIC/g, 'jpg')

To give you a whole picture:

const formData = new FormData();
formData.append('file', {
  uri: image.path,
  name: image.filename.replace(/HEIC/g, 'jpg'),
  type: image.mime,
});

return await axios.post(`/avatar/${id}`, formData);