react-native-safe-area-context

react-native-safe-area-context copied to clipboard

Summary

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.