Make RNGH workable inside modals on Android #937
Conversation
osdnk
changed the title
| */ | ||
|
|
||
| public class RNGHModalUtils { | ||
| static public void dialogRootViewGroupOnChildStartedNativeGesture(ViewGroup modal, MotionEvent androidEvent) { |
There was a problem hiding this comment.
Could you please change static public to public static? It's more common to see the latter in Java.
| ((ReactModalHostView.DialogRootViewGroup) modal).onChildStartedNativeGesture(androidEvent); | ||
| } | ||
|
|
||
| static public boolean isDialogRootViewGroup(ViewParent modal) { |
| ### Usage with modals on Android | ||
| On Android RNGH does not work by default because modals are not located under React Native Root view in native hierarchy. | ||
| In order to make it workable, components need to be wrapped with `gestureHandlerRootHOC` (it's no-op on iOS and web). | ||
|
|
||
| E.g. | ||
| ```js | ||
| const ExampleWithHoc = gestureHandlerRootHOC( | ||
| function GestureExample() { | ||
| return ( | ||
| <View> | ||
| <DraggableBox /> | ||
| </View> | ||
| ); | ||
| } | ||
| ); | ||
|
|
||
| export default function Example() { | ||
| return ( | ||
| <Modal animationType="slide" transparent={false}> | ||
| <ExampleWithHoc /> | ||
| </Modal> | ||
| ); | ||
| } | ||
| ``` | ||
|
|
There was a problem hiding this comment.
Just a question, would it be possible to export a modal from RNGH that already handles gestures as it should on Android?
There was a problem hiding this comment.
... but let's do it in follow-up
There was a problem hiding this comment.
I try to use example, but it does not work :(
Motivation Modals are currently not working with RNGH, because handlers need to be located under RootView in the native hierarchy. Changes It's fixed it by wrapping content of modals with gestureHandlerHOC. However, it called for a few native changes. In all places we were using RootView ref, I made it more generic to accept any ViewGroup. In places where methods of RootView were accessed I added checks and castings. Also, modal wrapper (ReactModalHostView.DialogRootViewGroup) is not accessible from another package so I added the file to the package (com.facebook.react.views.modal) exporting important functionalities. Added docs. Test I verified it iterating through example app and checking if every example (including these with RN's PanResponer) are working correctly.
|
@osdnk You don't need to use the inaccessible |
|
not work if Modal inside react-native-stack |
Same here with |
Motivation
Modals are currently not working with RNGH, because handlers need to be located under RootView in the native hierarchy.
Changes
It's fixed it by wrapping content of modals with
gestureHandlerHOC. However, it called for a few native changes.In all places we were using RootView ref, I made it more generic to accept any
ViewGroup. In places where methods ofRootViewwere accessed I added checks and castings.Also, modal wrapper (
ReactModalHostView.DialogRootViewGroup) is not accessible from another package so I added the file to the package (com.facebook.react.views.modal) exporting important functionalities.Added docs.
Test
I verified it iterating through example app and checking if every example (including these with RN's
PanResponer) are working correctly.