This PR fixes #432 / #130, where the pointerEvents prop has no effect when applied to the SafeAreaProvider. I share the same use-case as the creator of the issue: I wish to use a SafeAreaProvider as part of an overlay, where touch events should be passed to views underneath it, as is expected when setting pointerEvents="box-none".
It seems the behavior described was working until the library was migrated to the new architecture. Here are my findings:
When running with paper, all props are set via the codegen-created RNCSafeAreaProviderManagerDelegate#setProperty method. This method will invoke the appropriate @ReactProp setter method defined in its corresponding ViewManager.
If the setProperty method does not include a case to handle a prop, it will not be passed to the ViewManager. Note that react-native does provide cases for most View props with the BaseViewManagerInterface. However, pointerEvents is not included.
In order to add the case during codegen, I simply add the pointerEvents prop to the NativeProps specs definition. Unfortunately, because the definition requires a specific format to pass codegen, it also clashes with the inherited ViewProps. I add a @ts-ignore comment as a workaround.
Lastly, I update the SafeAreaProviderManager to inherit from ReactViewManager to handle the newly defined prop.
Test Plan
As a test, I modified the example app by styling a SafeAreaProvider with StyleSheet.absoluteFill, and placing a Touchable button underneath/behind the view. When adding pointerEvents="none" to the SafeAreaProvider, the button can be pressed with this fix. Without this fix, the button cannot be pressed.
Summary
This PR fixes #432 / #130, where the
pointerEventsprop has no effect when applied to theSafeAreaProvider. I share the same use-case as the creator of the issue: I wish to use aSafeAreaProvideras part of an overlay, where touch events should be passed to views underneath it, as is expected when settingpointerEvents="box-none".It seems the behavior described was working until the library was migrated to the new architecture. Here are my findings:
RNCSafeAreaProviderManagerDelegate#setPropertymethod. This method will invoke the appropriate@ReactPropsetter method defined in its corresponding ViewManager.setPropertymethod does not include a case to handle a prop, it will not be passed to the ViewManager. Note that react-native does provide cases for mostViewprops with the BaseViewManagerInterface. However,pointerEventsis not included.pointerEventsprop to theNativePropsspecs definition. Unfortunately, because the definition requires a specific format to pass codegen, it also clashes with the inheritedViewProps. I add a@ts-ignorecomment as a workaround.SafeAreaProviderManagerto inherit fromReactViewManagerto handle the newly defined prop.Test Plan
As a test, I modified the example app by styling a
SafeAreaProviderwithStyleSheet.absoluteFill, and placing a Touchable button underneath/behind the view. When addingpointerEvents="none"to theSafeAreaProvider, the button can be pressed with this fix. Without this fix, the button cannot be pressed.