Cannot read property 'convert' of undefined

[builtbyproxy]

Hello, im trying to use this module to convert an HEIC image to any other format, ideally jpeg.

Possible Unhandled Promise Rejection (id: 0):
TypeError: Cannot read property 'convert' of undefined
TypeError: Cannot read property 'convert' of undefined
    at Function.convert (blob:file:///2c18ee93-d65c-4c25-b452-893bcc1f69b1:186035:31)
    at _callee3$ (blob:file:///2c18ee93-d65c-4c25-b452-893bcc1f69b1:183934:61)
    at tryCatch (blob:file:///2c18ee93-d65c-4c25-b452-893bcc1f69b1:24992:19)
    at Generator.invoke [as _invoke] (blob:file:///2c18ee93-d65c-4c25-b452-893bcc1f69b1:25165:24)
    at Generator.prototype.(anonymous function) [as next] (blob:file:///2c18ee93-d65c-4c25-b452-893bcc1f69b1:25035:23)
    at tryCatch (blob:file:///2c18ee93-d65c-4c25-b452-893bcc1f69b1:24992:19)
    at invoke (blob:file:///2c18ee93-d65c-4c25-b452-893bcc1f69b1:25068:22)
    at blob:file:///2c18ee93-d65c-4c25-b452-893bcc1f69b1:25078:15
    at tryCallOne (blob:file:///2c18ee93-d65c-4c25-b452-893bcc1f69b1:8683:14)
    at blob:file:///2c18ee93-d65c-4c25-b452-893bcc1f69b1:8784:17

However, I get the error above when I run the code below:

RNHeicConverter
    .convert({
        path: img.uri,
    })
    .then((result) => {
        console.log(result);
    });

where I import RNHeicConverter as required.

import RNHeicConverter from "react-native-heic-converter";

I have successfully linked RNHeicConverter and I am not seeing errors, this is joining a pretty beefy React-Native project and when I actually log RNHeicConverter to ensure it is functioning as intended it logs:

function HEICConverter() {
      _classCallCheck(this, HEICConverter);
    }

so it certainly doesn't look undefined

---

I think this is happening because of how it pulls RNHeicConverter from nativeModules in your index.js

import { NativeModules } from 'react-native';

const { RNHeicConverter } = NativeModules;

Any thoughts on what the fix may be? Thankyou!

[maxim-kolesnikov]

@builtbyproxy Hello, could you tell me your string of img.uri & react-native version? Maybe you can provide code base for me? Did you see my DEMO?

[builtbyproxy]

Hi @maxim-kolesnikov thanks for the quick response! This is my uri: assets-library://asset/asset.HEIC?id=CC95F08C-88C3-4012-9D6D-64A413D254B3&ext=HEIC

and this is my react-native version: 0.57.0 Im sorry i cant send you any code base, I did see your demo and I mostly implement it how you have it, basically its as i wrote it in my initial post ^^

Thanks again!

[builtbyproxy]

I fixed this by going to my XCode and cleaning my build folder CMD+K

[ghost]

@builtbyproxy hi, after cleaning my build folder, I restarted my metro bundler with resetted cache, and reinstalled my app, and got this error

[builtbyproxy]

Hey @HikaruKun Sorry Im not to sure, I do recall getting that error but I can't remember where You'll have to import platform and a few other things, but to use this I have:

---

Step 1:

import RNHeicConverter from "react-native-heic-converter";

Step 2: This is dependent on how you get your URL

const imgUrlTransform = (imgUrl = '', imgType = '') => {
    if (Platform.OS === 'ios' && imgUrl.includes('ph://')) {
        const formattedType = imgType === 'image/jpeg' ? 'JPG' : imgType.split('/')[1].toUpperCase();
        const imgId = imgUrl.slice(5).split('/L0/')[0];
        return `assets-library://asset/asset.${formattedType}?id=${imgId}&ext=${formattedType}`;
    }
    return imgUrl;
};

Step 3:

const imgTypeTransform = (imgType = '') => {
    if (imgType) {
        if (Platform.OS === "ios") {
            const strSplit = imgType.split('.');
            return `image/${ strSplit[strSplit.length - 1] }`;
        }
        return imgType;
    }
    return "image/jpg";
};

Step 3: Convert imgType and imgUrl, img is the image file itself

let imgType = imgTypeTransform(img.type);
let imgUrl = imgUrlTransform(img.uri, imgType);

Step 4:

if (imgType === "image/heic") {
    await RNHeicConverter
    .convert({ // options
        path: imgUrl,
    })
    .then((result) => {
        if (result.path) {
            imgUrl = result.path;
            imgType = "image/jpg";
        }
    });
}

Step 5: convert file to a buffer for upload to S3 or storage somewhere

const imageBuffer = await RNFetchBlob.fs.readFile(imgUrl, "base64").then((res) => new Buffer(res, "base64"));