react-native-barcode-mask onLayoutMeasured (Provides event so we could get mask position on screen and filter coordinates from camera component)

App.tsx

import React from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import { RNCamera } from 'react-native-camera';
import BarcodeMask, { LayoutChangeEvent } from 'react-native-barcode-mask';

export default function App() {
  const [isCameraOpen, setIsCameraOpen] = React.useState(false);

  const onLayoutMeasuredHandler = (e: LayoutChangeEvent) => {
    alert(JSON.stringify(e));
  }

  return (
    <View style={styles.container}>

      {
        !isCameraOpen && (
          <Button title="Open Camera" onPress={() => setIsCameraOpen(!isCameraOpen)} />
        )
      }

      {
        isCameraOpen && (
          <>
            <View style={styles.upperSection}>
            <RNCamera
                type={RNCamera.Constants.Type.back}
                flashMode={RNCamera.Constants.FlashMode.auto}
                captureAudio={false}
                playSoundOnCapture={true}
                style={styles.camera}
            >
                <BarcodeMask onLayoutMeasured={onLayoutMeasuredHandler}/>
            </RNCamera>
          </View>
          <View style={styles.lowerSection}>
            <Button title="Close Camera" onPress={() => setIsCameraOpen(!isCameraOpen)} />
          </View>
        </>
        )
      }

    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  upperSection: {
      flex: 1
  },
  lowerSection: {
      paddingVertical: 30,
      paddingHorizontal: 20,
      backgroundColor: 'white',
  },
  camera: {
      height: '100%',
  },
});

// Example 1 (usage in functional component)
<BarcodeMask width={300} height={100} onLayoutMeasured={onLayoutMeasuredHandler} />
// Example 2 (as an IIFE)
<BarcodeMask width={300} height={100} onLayoutMeasured={event => onLayoutMeasuredHandler(event)} />
// Example 3 (usage in class component)
<BarcodeMask width={300} height={100} onLayoutMeasured={this.onLayoutMeasuredHandler} />

onLayoutMeasuredHandler(e: LayoutChangeEvent) {
	// use e.nativeEvent to extract coordinates
}

interface LayoutChangeEvent {
    nativeEvent: {
	target: number;
        layout: LayoutRectangle;
    };
}