How to get saved file path

[rajscet]

[mohamed2m2018]

when you call the function saveImage, you can get the file data from this line
onImageCrop={(res) => console.warn(res)} Which you supply to the CropView component, and where res is your file data which includes the path

you will have something like that {"height": 264, "target": 6539, "uri": "file:///Users/mohamedsalah/Library/Developer/CoreSimulator/Devices/E13A700A-8CA3-4786-9F15-20606DDF6CF4/data/Containers/Data/Application/953702B2-9FB2-4B10-B263-416CA8A73ADD/Library/Caches/077489DE-2405-403D-8902-DC7EC908487D.jpg", "width": 264}

[ajaymarathe]

Hey @mohamed2m2018 I am not getting in response in After I clicked on "Get Cropped View" Button, here is what i m doing ->

import React, { useRef } from 'react';
import { Button, StatusBar, StyleSheet, View, Image } from 'react-native';
import { CropView } from 'react-native-image-crop-tools';
import Modal from 'react-native-modal';

const CropImage = ({ isVisible, uri, onClose }) => {
  const cropViewRef = useRef();
  return (
    <>
      <View style={{ flex: 1 }}>
        <Modal isVisible={isVisible}>
          <View style={{ flex: 1 }}>
            <StatusBar barStyle="dark-content" />
            <View style={styles.container}>
              <CropView
                sourceUrl={uri}
                style={styles.cropView}
                ref={cropViewRef}
                onImageCrop={(res) => {
                  console.log('res: ', res); // not getting any response here, don't know what's wrong.
                }}
                keepAspectRatio
                aspectRatio={{ width: 16, height: 16 }}
              />
              <Button
                title={'Get Cropped View'}
                onPress={() => {
                  console.log('corp');
                  cropViewRef.current.saveImage(90);
                }}
              />
            </View>
          </View>
        </Modal>
      </View>
    </>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  cropView: {
    flex: 1,
  },
});

export default CropImage;

[dandresfg]

Yo have to use cropViewRef.current.saveImage(true, 90);

[rililive]

Even after getting the response, I get a file location like this {"height": 708, "uri": "/data/user/0/app.therrmobile/cache/temp_file_.jpg", "width": 708}

That is problematic because subsequent cropped image display the image from the first time cropping. I'm not sure if the path is getting cached or what. Any way to cache bust?

Update:

For image preview cachebusting, I just added some random query params to end of file path ${filepath}?cacheBust=${Math.random()}

[amnbhr]

you need to add 'file://' in the first of uri that you get in response after crop for example: {"height": 708, "uri": "/data/user/0/app.therrmobile/cache/temp_file_.jpg", "width": 708} filepath: file:///data/user/0/app.therrmobile/cache/temp_file_.jpg

[react06]

@ajaymarathe just replace this onPress={() => { console.log('corp'); cropViewRef.current.saveImage(90); }} in your code with onPress={() => cropViewRef.current.saveImage(90)}