I'm working on react native App using expo API, the App basically takes a picture then the App crop it using ImageEditor.cropImage, finally copy the picture from cache to another location. the code:

  takePicture = async function() {
    if (this.camera) {
      this.camera.takePictureAsync().then(async (data) => {

        cropdata = {
          offset:{x:0, y:0},
          size:{width:100, height:100},
        };

        await ImageEditor.cropImage(
          data.uri, 
          cropdata,
          async (uri) => {
            FileSystem.moveAsync({
              from: uri,
              to: `${FileSystem.documentDirectory}photos/Photo_${this.state.photoId}.jpg`,
            }).then(() => {
              this.setState({
                photoId: this.state.photoId + 1,
              });
              Vibration.vibrate();
            });
          },
          (error) => {
            console.log(error);
          }
        );

      });
    }
  };

But the following error is shown:

[Unhandled promise rejection: Error: Location 'file:///data/user/0/host.exp.exponent/cache/ReactNative_cropped_image_574763720.jpg' isn't movable.]

any idea?

I'm working on react native App using expo API, the App basically takes a picture then the App crop it using ImageEditor.cropImage, finally copy the picture from cache to another location. the code:

  takePicture = async function() {
    if (this.camera) {
      this.camera.takePictureAsync().then(async (data) => {

        cropdata = {
          offset:{x:0, y:0},
          size:{width:100, height:100},
        };

        await ImageEditor.cropImage(
          data.uri, 
          cropdata,
          async (uri) => {
            FileSystem.moveAsync({
              from: uri,
              to: `${FileSystem.documentDirectory}photos/Photo_${this.state.photoId}.jpg`,
            }).then(() => {
              this.setState({
                photoId: this.state.photoId + 1,
              });
              Vibration.vibrate();
            });
          },
          (error) => {
            console.log(error);
          }
        );

      });
    }
  };

But the following error is shown:

[Unhandled promise rejection: Error: Location 'file:///data/user/0/host.exp.exponent/cache/ReactNative_cropped_image_574763720.jpg' isn't movable.]

any idea?

• javascript
• react-native
• exp

1 Answer 1

Expo’s FileSystem module can copy/move/etc. files that are previously saved in the app’s scope (for example via ImagePicker or using Asset.loadAsync). ImagerEditor is a core React Native functionality and it saves your image to a file that is outside Expo’s scope, thus FileSystem cannot perform actions on this file. more on this can be found here:

https://forums.expo.io/t/where-does-camera-takepictureasync-save-photos/6475/7

so instead of using ImageEditor.cropImage() one should use expo ImageManipulator.