带有弯曲边框的拉伸相机视图

Question

如下图所示，相机放置在框架中央，如何用弯曲的角（全粉红色背景）完全覆盖框架

这是下面的代码；

const { width, height } = Dimensions.get('window');



   <View style={
                        {
                            flex: 1,
                            paddingVertical: 30,
                            borderColor: colors.accent,
                            borderRadius: 10,
                            borderWidth: 1,
                            backgroundColor: 'pink',
                            marginTop: 0,
                            alignItems: 'center'
                        }
                    }>
                        <BarCodeScanner
                            onBarCodeScanned={scanned ? undefined : handleBarCodeScanned}
                            style={StyleSheet.absoluteFillObject, { width: width, height: (height / 2) }}
                        />
                        {scanned && <Button title={'Tap to Scan Again'} onPress={() => setScanned(false)} />}
 <Block>
                    <Text style={{
                        color: '#9999FF',
                        fontFamily: 'AsapCondensed-Bold',
                        fontSize: 18,
                        marginBottom: 10
                    }}>Text</Text>
                </Block>
                    </View>