Fix the pointerEvents
prop on SafeAreaProvider (fixes #432 #130)
#464
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
This PR fixes #432 / #130, where the
pointerEvents
prop has no effect when applied to theSafeAreaProvider
. I share the same use-case as the creator of the issue: I wish to use aSafeAreaProvider
as 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#setProperty
method. This method will invoke the appropriate@ReactProp
setter method defined in its corresponding ViewManager.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 mostView
props with the BaseViewManagerInterface. However,pointerEvents
is not included.pointerEvents
prop to theNativeProps
specs definition. Unfortunately, because the definition requires a specific format to pass codegen, it also clashes with the inheritedViewProps
. I add a@ts-ignore
comment as a workaround.SafeAreaProviderManager
to inherit fromReactViewManager
to handle the newly defined prop.Test Plan
As a test, I modified the example app by styling a
SafeAreaProvider
withStyleSheet.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.