Skip to content

Commit 0b0fabc

Browse files
ShaMan123jgonet
andauthored
Fix interactions with NativeViewGestureHandler (#1034)
### Context [`transformIntoHandlerTags`](https://github.com/software-mansion/react-native-gesture-handler/blob/master/createHandler.js#L91) creates an array of valid refs based on the value of the property `_handlerTag` of each ref passed to `waitFor` or `simultaneousHandlers` prop. The filtered array is then sent to native for configuration. ### `NativeViewGestureHandler` In the case of `NativeViewGestureHandler` the `_handlerTag` is set on the `NativeViewGestureHandler` ref properly. **HOWEVER**, this value isn't passed to the ref of it's child. The child's ref is the one being passed back as the ref handler of the component. This makes sense. **However**, in order to configure interactions on a different handler one would need to pass the `NativeViewGestureHandler` ref as part of `waitFor` or `simultaneousHandlers` prop. This is **IMPOSSIBLE** because the `NativeViewGestureHandler` ref isn't exposed. The child's ref is passed instead and is filtered out by `transformIntoHandlerTags` due to the lack of `_handlerTag` property, making it completely useless. ### The End This PR fixes the mentioned problem by setting the `_handlerTag` property on the `NativeViewGestureHandler` **child's ref** so when it is passed to `waitFor` or `simultaneousHandlers` it is treated as if it were a genuine gesture handler. Co-authored-by: Jakub <[email protected]>
1 parent 677d900 commit 0b0fabc

File tree

1 file changed

+14
-3
lines changed

1 file changed

+14
-3
lines changed

createNativeWrapper.js

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from 'react';
1+
import React, { useImperativeHandle, useRef } from 'react';
22

33
import NativeViewGestureHandler from './NativeViewGestureHandler';
44

@@ -42,9 +42,20 @@ export default function createNativeWrapper(Component, config = {}) {
4242
},
4343
{ ...config } // watch out not to modify config
4444
);
45+
const _ref = useRef();
46+
const _gestureHandlerRef = useRef();
47+
useImperativeHandle(ref, () => {
48+
const node = _gestureHandlerRef.current;
49+
// add handlerTag for relations config
50+
if (_ref.current && node) {
51+
_ref.current._handlerTag = node._handlerTag;
52+
return _ref.current;
53+
}
54+
return null;
55+
}, [_ref, _gestureHandlerRef]);
4556
return (
46-
<NativeViewGestureHandler {...gestureHandlerProps}>
47-
<Component {...props} ref={ref} />
57+
<NativeViewGestureHandler {...gestureHandlerProps} ref={_gestureHandlerRef}>
58+
<Component {...props} ref={_ref} />
4859
</NativeViewGestureHandler>
4960
);
5061
});

0 commit comments

Comments
 (0)