Skip to content

Commit fe66fe1

Browse files
authored
Add error about functional components being used with old API (#3240)
## Description Old API does not support functional components as it requires assigning `ref` to handler's child. If someone tries to pass functional component into handler, behavior differs based on platform: - Android - app will crash with the following error message: <img width="341" alt="image" src="https://github.com/user-attachments/assets/a274b6e3-a36f-4f7d-8d23-c9606ae32974"> - Web - app will crash in `GestureHandlerDelegate`: - `Cannot read properties of undefined (reading 'isButtonInConfig')` - iOS - app won't crash, but the handler doesn't work anyway This PR adds `error` that will be thrown when handler cannot obtain target view. This will unify behavior across platforms, as well as provide explanation of what went wrong. ## Test plan <details> <summary>Tested on the following code:</summary> ```jsx import React from 'react'; import { View } from 'react-native'; import { TapGestureHandler } from 'react-native-gesture-handler'; const MyView = () => { return <View />; }; export default function RectButtonBorders() { return ( <TapGestureHandler onHandlerStateChange={() => console.log('click')}> <MyView /> </TapGestureHandler> ); } ``` </details>
1 parent 967212e commit fe66fe1

File tree

1 file changed

+6
-0
lines changed

1 file changed

+6
-0
lines changed

src/handlers/createHandler.tsx

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -234,6 +234,12 @@ export default function createHandler<
234234
)
235235
);
236236

237+
if (!this.viewNode) {
238+
throw new Error(
239+
`[Gesture Handler] Failed to obtain view for ${Handler.displayName}. Note that old API doesn't support functional components.`
240+
);
241+
}
242+
237243
this.attachGestureHandler(findNodeHandle(this.viewNode) as number); // TODO(TS) - check if this can be null
238244
}
239245

0 commit comments

Comments
 (0)