react-native-image-resizer

react-native-image-resizer copied to clipboard

Something's up with the setup. On my setup, Android, Flow, react-native 0.52, I have to do this:

import * as ImageResizer from 'react-native-image-resizer'
...
ImageResizer.default.createResizedImage(imageInfo.name, thumbnailWidth,...)

Anything else, including what's suggested in the docs, results in this error:

TypeError: undefined is not a function (evaluating 'ImageResizer.createResizedImage(imageInfo.name, thumbnailWidth, thumbnailWidth * aspectRatio, imageType, compressionQuality)'

I am not too familiar about this, but there are several flavors of index.js, and 1) I wasn't sure what's getting selected in my case, 2) they export conflicting sets of things. In the flow case the function is a named export and in the typescript case as well as the other files its not. Just pointing this out, FYI, not sure if this has anything to do with this problem.

Have you tried:

import ImageResizer from 'react-native-image-resizer'

?

Have you tried:

import ImageResizer from 'react-native-image-resizer'

Then you'll get the error: Module 'react-native-image-resizer' has no default export.

That's simply because the type definition, which is part of the package does not match to the export of the .js file.

@jens-duttke works for me

@pstanton: Make sure to set allowSyntheticDefaultImports to false in your tsconfig.json

@jens-duttke

That's simply because the type definition, which is part of the package does not match to the export of the .js file.

I don't really understand what you meant. Do you know how we could fix that ?

@PierreCapo

Instead of default exporting an object with properties (where the object is ImageResizer.default then), the export could looks like:

export const createResizedImage = (...) => { ... };

The type definition could looks like:

declare module 'react-native-image-resizer' {
  export interface Response {
    path: string;
    uri: string;
    size?: number;
    name?: string;
  }

  export function createResizedImage(
      uri: string,
      width: number,
      height: number,
      format: 'PNG' | 'JPEG' | 'WEBP',
      quality: number,
      rotation?: number,
      outputPath?: string
    ): Promise<Response>;
}

then.

If I understand correctly this should move from export default to named export, right ? Thanks for the answer and code btw

Correct

any fix for this issue?

// this didn't work
import ImageResizer from 'react-native-image-resizer';
ImageResizer.createResizedImage(...);

// this also didn't work
import * as ImageResizer from 'react-native-image-resizer';
ImageResizer.default.createResizedImage(...);

versions:

typescript: ~3.9.5
react-native: ~0.62.2
react-native-image-resize: ^1.2.6

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

This issue has been automatically closed. Thank you for your contributions.