Custom transparent top content view

[AxayDixit]

The library is awesome functionality wise. It would be even more cooler if we can make the topcontent of the view transparent just like the bottom one. For example, a cross on top left corner to close the window or some text on the topcontent.

What's happening?

I've already tried achieving this but it's very difficult to style it. Also, i've heard it's not possible to do this using this library. An update on this would be really appreciated.

Also, the QR view doesn't take up the entire space as that of the flex. It leaves a strip at the bottom of the QR view on some phones. Making it bit difficult to manage the component below it, if they have to be designed in a specific way.

How can it be reproduced?

Build details?

[Subiyel]

I was able to achieve this with following:

          <QRCodeScanner
                onRead={onSuccess}
                showMarker={true}
                cameraStyle={{ flex: 1, height: '100%' }}
                topViewStyle={{ flex: 0, height: 0 }}
                bottomViewStyle={{ flex: 0, height: 0 }}
                cameraContainerStyle={{ flex: 1, height: '100%', marginTop: 0, marginBottom: 0 }}
            />



           <View style={styles.topView}>
                <View style={styles.row1}>
                     <Icon name="close" size={26} color="#FFF" />
                     <MyText style={styles.centerText}> Scan QR Code </MyText>
                     <View />
                 </View>
            </View>

topView: {
        width: '100%',
        position: 'absolute',
        top: 5,
        paddingHorizontal: 20,
        paddingTop: 10
    },

    row1: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
      },
      
    centerText: {
        fontSize: 18,
        color: '#FFF',
        fontWeight: 'bold',
        marginRight: 20
    }