Unable to press child button when using 2 absolutely positioned RadialGradients

[RoderickJDunn]

I have 2 RadialGradients (both absolutely positioned), with .absoluteFill set, so they both fill the entire screen and overlap one another. Each one has a child TouchableOpacity, but the problem is that only the second one is pressable. The first is obstructed by the 2nd, thereby preventing touches from registering. If I use Views instead of RadialGradients, I can pass the prop 'pointerEvents="box-none"', to indicate that the parent view should allow touches to pass through to any element under them. However, this does not work when using RadialGradient. Here's a simple example of the scenario.

export default class RadialGradientIssue extends React.Component {
    render() {
        return (
            <View style={{flex: 1}}>
                <RadialGradient
                    colors={['#FF000055', '#00000000']}
                    stops={[0, 1]}
                    center={[100, 100]}
                    radius={130}
                    style={StyleSheet.absoluteFill}
                    pointerEvents={'box-none'}>
                    <TouchableOpacity
                        style={{
                            width: 50,
                            height: 50,
                            marginTop: 40,
                            backgroundColor: 'blue',
                        }}
                        onPress={() => alert('Pressed blue!')}
                    />
                </RadialGradient>
                <RadialGradient
                    colors={['#00FF0055', '#00000000']}
                    stops={[0, 1]}
                    center={[300, 300]}
                    radius={180}
                    style={StyleSheet.absoluteFill}
                    pointerEvents={'box-none'}>
                    <TouchableOpacity
                        style={{
                            marginTop: 40,
                            width: 50,
                            height: 50,
                            backgroundColor: 'green',
                            alignSelf: 'flex-end',
                        }}
                        onPress={() => alert('Pressed green!')}
                    />
                </RadialGradient>
            </View>
        );
    }
}

Looking at the index.js source for RadialGradient, I found that the NativeRadialGradient element does not accept any props from the parent component. When I add 'pointerEvents="box-none"' directly to NativeRadialGradient (see below), everything works as expected.

<View ref={(component) => { this.gradientRef = component; }} {...otherProps} style={style}>
                <NativeRadialGradient
                    pointerEvents={"box-none"} // adding this line fixes the issue
                    style={{position: 'absolute', top: 0, left: 0, bottom: 0, right: 0}}
                    colors={(colors)?colors.map(processColor):null}
                    center={center}
                    radius={radius}
                    stops={stops}
                />
                { children }
</View>

Would it be possible to expose a 'nativeProps' prop to the application, so that we can handle scenarios like this? The library might look like this afterward.

<View ref={(component) => { this.gradientRef = component; }} {...otherProps} style={style}>
                <NativeRadialGradient
                    {...this.props.nativeProps} // a possible solution
                    style={{position: 'absolute', top: 0, left: 0, bottom: 0, right: 0}}
                    colors={(colors)?colors.map(processColor):null}
                    center={center}
                    radius={radius}
                    stops={stops}
                />
                { children }
</View>

Thank you!