import * as React from 'react' ; import { useImperativeHandle , useRef } from 'react' ; import { NativeViewGestureHandler , NativeViewGestureHandlerProps , nativeViewProps , } from './NativeViewGestureHandler' ; const NATIVE_WRAPPER_PROPS_FILTER = [ ... nativeViewProps , 'onGestureHandlerEvent' , 'onGestureHandlerStateChange' , ] as const ; export default function createNativeWrapper < P > ( Component , config = { } ) { const ComponentWrapper = React . forwardRef < React . ComponentType < any > , P & NativeViewGestureHandlerProps > ( ( props , ref ) => { const gestureHandlerProps = Object . keys ( props ) . reduce ( ( res , key ) => { const allowedKeys = NATIVE_WRAPPER_PROPS_FILTER ; if ( allowedKeys . includes ( key ) ) { res [ key ] = props [ key ] ; } return res ; } , { ... config } ) ; const _ref = useRef < React . ComponentType < P > > ( ) ; const _gestureHandlerRef = useRef < React . ComponentType < P > > ( ) ; useImperativeHandle ( ref , ( ) => { const node = _gestureHandlerRef . current ; if ( _ref . current && node ) { _ref . current . handlerTag = node . handlerTag ; return _ref . current ; } return null ; } , [ _ref , _gestureHandlerRef ] ) ; return ( < NativeViewGestureHandler { ... gestureHandlerProps } ref = { _gestureHandlerRef } > < Component { ... props } ref = { _ref } / > < /NativeViewGestureHandler>); } ) ; ComponentWrapper . displayName = Component . displayName || 'ComponentWrapper' ; return ComponentWrapper ; }