How To Create A Custom UI On The Transparent View Of React Native?

How to Create similar User Interface like http://uupload.ir/files/3oar_capture.png in react-native? my problem is that I cant build it on top of screen and it gets rendered under the screen. http://uupload.ir/files/05rm_photo_2019-11-16_15-02-06.jpg

how shall I tackle this? if I put my custom component inside the react camera like the barcode mask it is not rendered or show.

  render() {
    return (
      <React.Fragment>
        <RNCamera
          ref={ref => {
            this.camera = ref;
          }}
          style={{
            flex: 1,
            width: '100%',
          }}
          onGoogleVisionBarcodesDetected={this.barcodeRecognized}>
          <BarcodeMask
            width={250}
            height={250}
            edgeBorderWidth={2}
            edgeColor={'#840F53'}
          />
        </RNCamera>
        <Text>Test component</Text>

      </React.Fragment>
    );
  }
}

QRCodeBuyScreen.navigationOptions = () => ({
  title: 'بارکد',
  header: null,
  tabBarIcon: ({tintColor}) => (
    <Icon name="qrcode-scan" size={30} color={tintColor} />
  ),
});
const styles = StyleSheet.create({

})

export default QRCodeBuyScreen;

I would suggest you to use Modals provided by react-native, it comes with transparent prop. After that you can customise it however you want.