react-native-detect-document

The react-native library helps you detect document in image for Android and IOS

Thanks library react-native-document-scanner-plugin gave me the idea to make this project

Installation

npm install react-native-detect-document react-native-reanimated react-native-svg react-native-gesture-handler

or

yarn add react-native-detect-document react-native-reanimated react-native-svg react-native-gesture-handler

IOS

cd ios && pod install

Usage

import * as React from 'react';
import {
  StyleSheet,
  View,
  Text,
  TouchableHighlight,
  TouchableOpacity,
  Image,
  Platform,
} from 'react-native';
import RNDDM from 'react-native-detect-document';
import MultipleImagePicker from '@baronha/react-native-multiple-image-picker';
// import CropperView from "./CropperView";
const { detectFile, CropperView } = RNDDM;

export default function App() {
  const [responseImg, setResponseImg] = React.useState(null);
  const [resultCrop, setResultCrop] = React.useState(null);
  const customCrop = React.useRef();

  // console.log('CropperView', RNDDM);

  const takePicture = async () => {
    try {
      const response = await MultipleImagePicker.openPicker({
        usedCameraButton: true,
        mediaType: 'image',
        singleSelectedMode: true,
        isPreview: false,
      });

      const filePath = Platform.select({
        ios: response.path,
        android: `file://${response.realPath}`,
      });
      const { corners, width, height } = await detectFile(filePath);

      // console.log('data',corners);
      const rectangle = {
        topLeft: corners.TOP_LEFT,
        topRight: corners.TOP_RIGHT,
        bottomRight: corners.BOTTOM_RIGHT,
        bottomLeft: corners.BOTTOM_LEFT,
      };

      setResponseImg({ realPath: filePath, width, height, rectangle });

      // console.log({ corrers});
    } catch (e) {
      console.log('e', e);
    }
  };

  const crop = async () => {
    // console.log('loading');
    await customCrop.current.crop();
    // console.log('end');
  };

  const updateImage = (res) => {
    // console.log('res',res);
    setResultCrop(res);
  };

  if (resultCrop) {
    return (
      <View style={{ flex: 1, padding: 40 }}>
        <Image
          style={{ flex: 1, resizeMode: 'contain' }}
          resizeMode="contain"
          source={{ uri: `data:image/png;base64,${resultCrop}` }}
        />
        <TouchableOpacity
          style={{ height: 50, zIndex: 10 }}
          onPress={() => {
            setResultCrop(null);
            setResponseImg(null);
          }}
        >
          <Text>Back</Text>
        </TouchableOpacity>
      </View>
    );
  }

  // console.log({responseImg});

  if (responseImg) {
    return (
      <View style={{ flex: 1 }}>
        <CropperView
          updateImage={updateImage}
          rectangleCoordinates={responseImg.rectangle}
          initialImage={responseImg.realPath}
          height={responseImg.height}
          width={responseImg.width}
          ref={customCrop}
          overlayColor="rgba(18,190,210, 1)"
          overlayStrokeColor="rgba(20,190,210, 1)"
          handlerColor="rgba(20,150,160, 1)"
          enablePanStrict={false}
        />
        <View
          style={{ flexDirection: 'row', paddingVertical: 10, height: 300 }}
        >
          <TouchableOpacity onPress={crop} style={{ flex: 1 }}>
            <Text>CROP IMAGE</Text>
          </TouchableOpacity>
          <TouchableOpacity
            onPress={() => setResponseImg(null)}
            style={{ flex: 1 }}
          >
            <Text>Back</Text>
          </TouchableOpacity>
        </View>
      </View>
    );
  }

  return (
    <View style={styles.container}>
      <TouchableHighlight onPress={takePicture} underlayColor="gray">
        <Text>Pick image</Text>
      </TouchableHighlight>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  box: {
    width: 60,
    height: 60,
    marginVertical: 20,
  },
});

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Made with create-react-native-library