Not able to find Image in cache using npm react-native-view-shot

Question

I am using npm react-native-view-shot to capture the view in the image and save locally on the device.

When I try to take snap-shot using the following code I get path but not image at the location, below is code and output

Path:- file:///data/user/0/com.caryn/cache/ReactNative-snapshot-image5936120548912611616.jpg

captureRef(this.ref, this.state.value)
        .then(res =>
            this.state.value.result !== "file"
                ? res
                : new Promise((success, failure) =>
                    // just a test to ensure res can be used in Image.getSize
                    Image.getSize(
                        res,
                        (width, height) => (console.log(res, width, height), success(res)),
                        failure)))
        .then(res => {
            this.setState({
                error: null,
                res,
                previewSource: {uri: res}
            })
            console.log(res)
        })
        .catch(error => (console.warn(error), this.setState({error, res: null, previewSource: null})));

Answer 1

According to react-native-view-shot documentation.

Import import {captureRef} from "react-native-view-shot";

I have solved the following problems.

1. Saving the snap to locale storage and

2. The image in view was getting blur on capture snap

   you can also refer

Write state in the constructor as following you can add height & width to value in state

  constructor(props) {
    super(props)
    this.ref = React.createRef();
    this.state = {
        previewSource: null,
        error: null,
        res: null,
        value: {
            format: "jpg",
            quality: 0.9,
        }
    }

Create view ref using collapsable={false} ref={(ref) => this.ref = ref}

On button press

    <Button title={'press me'} onPress={() => this.snapshot()}/>

Call Following method

    snapshot() {
       captureRef(this.ref, this.state.value)
        .then(res =>
            this.state.value.result !== "file"
                ? res
                : new Promise((success, failure) =>
                // just a test to ensure res can be used in Image.getSize
                Image.getSize(
                    res,
                    (width, height) => (console.log(res, width, height), success(res)),
                    failure)))
        .then(res => {
            this.setState({
                error: null,
                res,
                previewSource: {uri: res}
            })

            CameraRoll.saveToCameraRoll(res)
                .then(Alert.alert('Success', 'Photo added to camera roll!'))
                .catch(err => console.log('err:', err))
        }).catch(error => (console.warn(error), this.setState({error, res: null, previewSource: null})));
}

Save Image to locale storage using the following code

• Install npm @react-native-community/cameraroll

• Import import CameraRoll from "@react-native-community/cameraroll";

  CameraRoll.saveToCameraRoll(uri)
      .then((resp) => Alert.alert(resp))
      .catch(err => console.log('err:', err))