TypeError: undefined is not an object (evaluating 'ImageResizerAndroid.createResizedImage') in Expo App

[maximilian-lindsey]

Hi,

I just tried to use ImageResizer like this in my Expo App on my Moto G4 running Android 7.0 and everytime I try to access the createResizedImage() mehtod I get this error

TypeError: undefined is not an object (evaluating 'ImageResizerAndroid.createResizedImage')

When I log ImageResizer I can see the method, but can't access it.
I used

npm install --save react-native-image-resizer
react-native link react-native-image-resizer

to install it.

This is the code of my project:

import React from 'react';
import React from 'react';
import { Button, Image, View } from 'react-native';
import { ImagePicker } from 'expo';
import ImageResizer from 'react-native-image-resizer';

export default class ImagePickerExample extends React.Component {

  state = {
    image: null,
  };

  render() {
    let { image } = this.state;
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button
      title="Take an image"
      onPress={this._takeImage}
      />
      {image &&
        <Image source={{ uri: image }} style={{ width: 200, height: 200 }} />}
        </View>
        );
  }

  _takeImage = async () => {
    let result = await ImagePicker.launchCameraAsync({
      allowsEditing: false,
      quality: 0.7
    });
    
    if (!result.cancelled) {
      console.log(result.uri);
      // IMAGE RESIZER
      ImageResizer.createResizedImage(result.uri, 500, 500, 'JPEG', 70).then((resizedImageUri) => {
        console.log(resizedImageUri);
        result.uri = resizedImageUri;
        const photo = {
          uri: result.uri,
          type: 'image/jpeg',
          name: 'photo.jpg',
        }
        let body = new FormData();
        body.append('image', photo);
        fetch('http://192.168.0.17:3000/images/', {
          method: 'POST',
          headers: {
            'Accept': 'application/json',
            'Content-Type': 'multipart/form-data'
          },
          body: body
        })
        .then((response) => {
          console.log(JSON.stringify(response));
        })
        .catch((error) => {
          console.error(error);
        });
      }).catch((err) => {
        console.log(err);
      });     
    }
    this.setState({ image: result.uri });
  };
}

Here are my package.json dependencies:
"dependencies": { "expo": "^18.0.4", "react": "16.0.0-alpha.12", "react-native": "https://github.com/expo/react-native/archive/sdk-18.0.1.tar.gz", "react-native-image-resizer": "^0.1.1" }

Maybe you can help me fix this issue

[maximilian-lindsey]

I tried to use ImageResizer in my Expo project because it is marked as usable on https://www.native.directory

[4ian]

Thanks for reporting the error! We're relying on Java and Objective-C native modules so yes that won't work in Expo, unless it's integrated in their SDK :)

[daominhsangvn]

You guys must detach the app before use module out of scope Expo

[4ian]

You must indeed eject. I'm closing this as https://www.native.directory/ now properly list the module as not being compatible with Expo :)

[Yamilquery]

So sad... 👎

[takotab]

Any other options to change the size of a picture in expo?

[ahmedsmae]

https://docs.expo.io/versions/latest/sdk/imagemanipulator/