viettel-ekyc-sdk/lib/components/BackgroundCamera.js

Viettel eKYC SDK

import React from 'react';
import { Image, StyleSheet, View } from 'react-native';
import { backgroundImage1, backgroundImage2 } from '../constants/assetsRequire';
import { OS } from '../constants/OS';
import { LinearGradient } from './LinearGradient';
const bg1Info = Image.resolveAssetSource(backgroundImage1);
const bg2Info = Image.resolveAssetSource(backgroundImage2);
export const BackgroundFrontCamera = () => {
    return (React.createElement(View, { style: styles.background },
        React.createElement(Image, { style: styles.imageBackground1, source: backgroundImage1, resizeMode: 'contain' }),
        React.createElement(View, { style: styles.background2 },
            React.createElement(LinearGradient, null)),
        React.createElement(Image, { style: styles.imageBackground2, source: backgroundImage2, resizeMode: 'cover' })));
};
export const BackgroundBackCamera = ({ squareCameraPostion, }) => {
    return (React.createElement(View, { style: styles.background },
        React.createElement(View, { style: styles.background },
            React.createElement(View, { style: { ...styles.topSquareFrame, height: squareCameraPostion.y } }),
            React.createElement(View, { style: {
                    ...styles.leftSquareFrame,
                    top: squareCameraPostion.y,
                    width: squareCameraPostion.x,
                    height: squareCameraPostion.height,
                } }),
            React.createElement(View, { style: {
                    ...styles.rightSquareFrame,
                    top: squareCameraPostion.y,
                    width: squareCameraPostion.x,
                    height: squareCameraPostion.height,
                } }),
            React.createElement(View, { style: {
                    ...styles.bottomSquareFrame,
                    top: squareCameraPostion.height + squareCameraPostion.y,
                } }),
            React.createElement(View, { style: {
                    ...styles.squareFrame,
                    top: squareCameraPostion.y - 2,
                    left: squareCameraPostion.x - 2,
                    right: squareCameraPostion.x - 2,
                    height: squareCameraPostion.height + 2,
                } })),
        React.createElement(View, { style: styles.background },
            React.createElement(View, { style: {
                    ...styles.borderTopLeft,
                    top: squareCameraPostion.y - 10,
                    left: squareCameraPostion.x - 10,
                } }),
            React.createElement(View, { style: {
                    ...styles.borderTopRight,
                    top: squareCameraPostion.y - 10,
                    right: squareCameraPostion.x - 10,
                } }),
            React.createElement(View, { style: {
                    ...styles.borderBottomLeft,
                    top: squareCameraPostion.y + squareCameraPostion.height - 10,
                    left: squareCameraPostion.x - 10,
                } }),
            React.createElement(View, { style: {
                    ...styles.borderBottomRight,
                    top: squareCameraPostion.y + squareCameraPostion.height - 10,
                    right: squareCameraPostion.x - 10,
                } }))));
};
const styles = StyleSheet.create({
    background: {
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        zIndex: 5,
    },
    imageBackground1: {
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        width: OS.WIDTH,
        height: (bg1Info.height * OS.WIDTH) / bg1Info.width,
        zIndex: 0,
    },
    background2: {
        // backgroundColor: '#8D0000',
        position: 'absolute',
        top: (bg1Info.height * OS.WIDTH) / bg1Info.width - 10,
        left: 0,
        right: 0,
        height: 700,
        zIndex: 10,
        opacity: 1,
    },
    imageBackground2: {
        width: OS.WIDTH,
        height: (bg2Info.height * OS.WIDTH) / bg2Info.width,
        position: 'absolute',
        bottom: 0,
        zIndex: 5,
    },
    topSquareFrame: {
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        backgroundColor: 'rgba(0, 0, 0, 0.5)',
    },
    leftSquareFrame: {
        position: 'absolute',
        left: 0,
        backgroundColor: 'rgba(0, 0, 0, 0.5)',
    },
    rightSquareFrame: {
        position: 'absolute',
        right: 0,
        backgroundColor: 'rgba(0, 0, 0, 0.5)',
    },
    bottomSquareFrame: {
        position: 'absolute',
        bottom: 0,
        left: 0,
        right: 0,
        backgroundColor: 'rgba(0, 0, 0, 0.5)',
    },
    squareFrame: {
        position: 'absolute',
        borderColor: 'white',
        borderWidth: 2,
        borderRadius: 5,
    },
    borderTopLeft: {
        position: 'absolute',
        width: 20,
        height: 20,
        borderColor: 'white',
        borderTopWidth: 2,
        borderLeftWidth: 2,
        borderTopLeftRadius: 10,
    },
    borderTopRight: {
        position: 'absolute',
        width: 20,
        height: 20,
        borderColor: 'white',
        borderTopWidth: 2,
        borderRightWidth: 2,
        borderTopRightRadius: 10,
    },
    borderBottomLeft: {
        position: 'absolute',
        width: 20,
        height: 20,
        borderColor: 'white',
        borderBottomWidth: 2,
        borderLeftWidth: 2,
        borderBottomLeftRadius: 10,
    },
    borderBottomRight: {
        position: 'absolute',
        width: 20,
        height: 20,
        borderColor: 'white',
        borderBottomWidth: 2,
        borderRightWidth: 2,
        borderBottomRightRadius: 10,
    },
});
//# sourceMappingURL=BackgroundCamera.js.map