React Native-camera | QR Code Scanner Mask

yarn add react-native-camera & react-native link


......................................................................................................................................................................................................................................


 android/app/build.gradle,  I added this

missingDimensionStrategy 'react-native-camera', 'general'

 in defaultConfig like this.

.....................................................................................................................................................................................................................................

it's not neccessary
/*
android/build.gradle

And i also added these two lines

maven { url "https://jitpack.io" } 
            maven { url 'https://maven.google.com/' 
            name 'Google'
        }

*/

.......................................................................................................................................................................................................................................

import React from 'react';
import {
    View,
    StyleSheet,
    Dimensions
} from 'react-native';
import { RNCamera } from 'react-native-camera';

const { width } = Dimensions.get('screen');

export default class App extends React.Component {
    render() {
        const leftTop = {
            borderLeftWidth: 3,
            borderTopWidth: 3,
            borderColor: 'white'
        };
        const leftBottom = {
            borderLeftWidth: 3,
            borderBottomWidth: 3,
            borderColor: 'white'
        };
        const rightTop = {
            borderRightWidth: 3,
            borderTopWidth: 3,
            borderColor: 'white'
        };
        const rightBottom = {
            borderRightWidth: 3,
            borderBottomWidth: 3,
            borderColor: 'white'
        };
        return(
            <View style={{ flex: 1 }}>
                <RNCamera style={{ ...StyleSheet.absoluteFill }} />
                <View style={{ ...StyleSheet.absoluteFill, alignItems: 'center', justifyContent: 'center' }}>
                    <View style={{ width: width / 2, height: width / 2 }}>

                        <View style={{ flex: 1, flexDirection: 'row' }}>
                            <View style={{ flex: 1, ...leftTop }} />
                            <View style={{ flex: 1 }} />
                            <View style={{ flex: 1, ...rightTop }} />
                        </View>

                        <View style={{ flex: 1 }} />
                     
                        <View style={{ flex: 1, flexDirection: 'row' }}>
                            <View style={{ flex: 1, ...leftBottom }} />
                            <View style={{ flex: 1 }} />
                            <View style={{ flex: 1, ...rightBottom }} />
                        </View>
                    </View>
                </View>
            </View>
        );
    }
}

..................................................................................................................................................................................................................................