Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix the pointerEvents prop on SafeAreaProvider (fixes #432 #130) #464

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

cboar
Copy link

@cboar cboar commented Jan 4, 2024

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.

@cboar cboar changed the title Fix the pointerEvents prop on SafeAreaProvider (fixes #432) Fix the pointerEvents prop on SafeAreaProvider (fixes #432 #130) Jan 4, 2024
Copy link
Collaborator

@jacobp100 jacobp100 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Makes sense. Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

SafeAreaProvider cannot set pointerEvents prop
2 participants