react-native-image-crop-tools CropView not showing image to be cropped

Question

I am using react-native-image-crop-tools for cropping the image but CropView not showing the image to be cropped only a blank screen is showing. any solution regarding this?

import { CropView } from 'react-native-image-crop-tools';

const [uri, setUri] = useState('https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg');

{uri !== undefined && <CropView
sourceUrl={uri}
style={{flex:1}}
ref={cropViewRef}
onImageCrop={(res) => console.warn(res)}
keepAspectRatio
aspectRatio={{ width: 16, height: 9 }}
/>}

Answer 1

Try this, I hope it will help you.

app.js

import React, { useState, useRef } from 'react';
import { Button, StyleSheet, View} from 'react-native';
import { CropView } from 'react-native-image-crop-tools';
import { launchImageLibrary } from 'react-native-image-picker';

export default function app() {
  const [uri, setUri] = useState();
  const cropViewRef = useRef();
  let options = {
    mediaType: 'photo',
    quality: 1,
  };
  return (
    <>
      <View style={styles.container}>
        <Button
          title={'Pick Image'}
          onPress={() => {
            launchImageLibrary(options, response => {
              setUri(response.assets[0].uri);
            });
          }}
        />
        {uri !== undefined && <CropView
          sourceUrl={uri}
          style={styles.cropView}
          ref={cropViewRef}
          onImageCrop={(res) => console.log(res)}
          keepAspectRatio
          aspectRatio={{ width: 16, height: 9 }}
        />}
        <Button
          title={'Get Cropped View'}
          onPress={() => {
            cropViewRef.current.saveImage(true, 100);
          }}
        />
      </View>
    </>
  );
};

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

Answer 2

The library doesn't support remote images. It working in iOS is merely coincidental as might the native ios library supports for the cropping of network images.

If you want to crop a remote image please download it first using RNFetchBlob and then pass the local file path to it.

Supporting remote images directly is a somewhat complicated task and out of scope for this project.

You also can check out the closed issue in the library.

https://github.com/hhunaid/react-native-image-crop-tools/issues/16

You can have a try with the below example to crop the network images in the android platform:

For ex:

import React, {useCallback, useEffect, useState} from 'react';
import {View, Text} from 'react-native';
import {CropView} from 'react-native-image-crop-tools';
import RNFetchBlob from 'rn-fetch-blob';

export default () => {
  const [uri, setUri] = useState('');

  const getImage = useCallback(() => {
    try {
      RNFetchBlob.config({
        fileCache: true,
        // by adding this option, the temp files will have a file extension
        appendExt: 'png',
      })
        .fetch(
          'GET',
          'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg',
        )
        .then(res => {
          let status = res.info().status;

          if (status === 200) {
            setUri('file://' + res.path());
          } else {
            console.log(status);
          }
        })
        // Something went wrong:
        .catch((errorMessage, statusCode) => {
          // error handling
          console.log('Error : ', errorMessage);
        });
    } catch (err) {
      console.log('Error : ', err.message);
    }
  }, []);

  useEffect(() => {
    getImage();
  }, [getImage]);

  if (uri === '') {
    return (
      <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
        <Text>{'processing...'}</Text>
      </View>
    );
  }

  return (
    <CropView
      sourceUrl={uri}
      style={{flex: 1, height: '100%', width: '100%'}}
      // ref={cropViewRef}
      onImageCrop={res => console.warn(res)}
      keepAspectRatio
      aspectRatio={{width: 16, height: 9}}
    />
  );
};