Demonstrates a camera overlay in CSS for scanning documents

RNCameraOverlay.js

// Expo link: https://snack.expo.io/Qae6_Vsh1

import * as React from 'react';
import { Button, ImageBackground, Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';

// You can import from local files
import AssetExample from './components/AssetExample';

// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';

const image = { uri: "https://upload.wikimedia.org/wikipedia/commons/thumb/4/4d/Cat_November_2010-1a.jpg/1200px-Cat_November_2010-1a.jpg" }

export default function App() {
  return (
    <View style={styles.container}>
      <ImageBackground source={image} style={styles.image}>
        <View style={styles.header}>
          <Button title="flash"></Button>
        </View>
        <View style={styles.top_row}>
          <View style={styles.top_1}></View>
          <View style={styles.top_2}></View>
          <View style={styles.top_3}></View>
          <View style={styles.top_4}></View>
          <View style={styles.top_5}></View>
        </View>
        <View style={styles.middle_row}>
          <View style={styles.middle_1}>
            <View style={styles.left_1}></View>
            <View style={styles.left_2}></View>
            <View style={styles.left_3}></View>
          </View>
          <View style={styles.middle_2}>
            <View style={styles.viewport_top}></View>
              <View style={styles.viewport_middle}>
                <View style={styles.viewport_left}></View>
                <View style={styles.viewport}>
                
                  {/* add content here */}

                </View>
                <View style={styles.viewport_right}></View>
              </View>
              <View style={styles.viewport_bottom}></View>
            </View>
            <View style={styles.middle_3}>
              <View style={styles.right_1}></View>
              <View style={styles.right_2}></View>
              <View style={styles.right_3}></View>
          </View>
        </View>
        <View style={styles.bottom_row}>
          <View style={styles.bottom_1}></View>
          <View style={styles.bottom_2}></View>
          <View style={styles.bottom_3}></View>
          <View style={styles.bottom_4}></View>
          <View style={styles.bottom_5}></View>
        </View>
        <View style={styles.footer}>
          <Button title="library"></Button>
          <Button title="shutter"></Button>
        </View>
      </ImageBackground>
    </View>
  );
}

const backColor = 'rgba(0,0,0,0.4)';
const frameColor = '#f00';
const frameWidth = 5;
const viewportPadding = 10;
const frameSizeNormal = 30;
const frameSizeLess = frameSizeNormal - frameWidth;
const frameSizeMore = frameSizeNormal + frameWidth;

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  image: {
    flex: 1,
    resizeMode: "cover",
    justifyContent: "center"
  },
  header: {
    flexDirection: 'row',
    paddingTop: 10,
    backgroundColor: backColor,
    justifyContent: 'center',
  },
  footer: {
    flexDirection: 'row',
    paddingBottom: 20,
    backgroundColor: backColor,
    justifyContent: 'center',
  },
  top_row: {
    flexDirection: 'row',
    height: 10,
    backgroundColor: backColor,
  },
  top_1: {
    width: frameSizeLess,
  },
  top_2: {
    width: frameSizeMore,
    borderBottomWidth: frameWidth,
    borderBottomColor: frameColor,
  },
  top_3: {
    flex: 1,
  },
  top_4: {
    width: frameSizeMore,
    borderBottomWidth: frameWidth,
    borderBottomColor: frameColor,
  },
  top_5: {
    width: frameSizeLess,
  },
  middle_row: {
    flex: 1,
    flexDirection: 'row',
  },
  middle_1: {
    width: frameSizeNormal,
    backgroundColor: backColor,
  },
  left_1: {
    height: frameSizeNormal,
    borderRightWidth: frameWidth,
    borderRightColor: frameColor,
  },
  left_2: {
    flex: 1,
  },
  left_3: {
    height: frameSizeNormal,
    borderRightWidth: frameWidth,
    borderRightColor: frameColor,
  },
  middle_2: {
    flex: 1,
  },
  viewport_top: {
    height: viewportPadding,
    backgroundColor: backColor,
  },
  viewport_middle: {
    flex: 1,
    flexDirection: 'row',
  },
  viewport_left: {
    width: viewportPadding,
    backgroundColor: backColor,
  },
  viewport: {
    flex: 1,
  },
  viewport_right: {
    width: viewportPadding,
    backgroundColor: backColor,
  },
  viewport_bottom: {
    height: viewportPadding,
    backgroundColor: backColor,
  },
  right_1: {
    height: frameSizeNormal,
    borderLeftWidth: frameWidth,
    borderLeftColor: frameColor,
  },
  right_2: {
    flex: 1,
  },
  right_3: {
    height: frameSizeNormal,
    borderLeftWidth: frameWidth,
    borderLeftColor: frameColor,
  },
  middle_3: {
    width: frameSizeNormal,
    backgroundColor: backColor,
  },
  bottom_row: {
    flexDirection: 'row',
    height: 20,
    backgroundColor: backColor,
  },
  bottom_1: {
    width: frameSizeLess,
  },
  bottom_2: {
    width: frameSizeMore,
    borderTopWidth: frameWidth,
    borderTopColor: frameColor,
  },
  bottom_3: {
    flex: 1,
  },
  bottom_4: {
    width: frameSizeMore,
    borderTopWidth: frameWidth,
    borderTopColor: frameColor,
  },
  bottom_5: {
    width: frameSizeLess,
  },
});