Skip to content

Commit 3f13c2a

Browse files
authored
Add null to GestureRef type (#3821)
## Description Since React 19, `useRef` requires initial value. In that case `null` is common value, but unfortunately our types do not handle that case. This PR fixes this problem. ## Test plan `yarn ts-check` <details> <summary>Also tested on the following code:</summary> ```tsx import React, { useRef } from 'react'; import { View, Text, StyleSheet, // ScrollView as RNScrollView, } from 'react-native'; import { Gesture, GestureDetector, GestureHandlerRootView, ScrollView as GHScrollView, } from 'react-native-gesture-handler'; const App = () => { const scrollRef = useRef<GHScrollView>(null); const swipe = Gesture.Pan() .simultaneousWithExternalGesture(scrollRef) .onUpdate((e) => { console.log(e); }) .onFinalize((e, s) => { console.log(e, s); }) .onEnd(() => {}); return ( <GestureHandlerRootView style={{ flex: 1 }}> <GestureDetector gesture={swipe}> <View style={styles.container}> <GHScrollView horizontal ref={scrollRef} style={{ marginTop: 24, maxHeight: 60 }} contentContainerStyle={{ alignItems: 'center', paddingHorizontal: 16, }} showsHorizontalScrollIndicator={false}> {Array.from({ length: 10 }).map((_, idx) => ( <View key={idx} style={{ width: 80, height: 40, backgroundColor: '#e0e0e0', borderRadius: 8, justifyContent: 'center', alignItems: 'center', marginRight: 12, }}> <Text>Item {idx + 1}</Text> </View> ))} </GHScrollView> </View> </GestureDetector> </GestureHandlerRootView> ); }; const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#fff', }, text: { fontSize: 18, color: '#333', }, }); export default App; ``` </details>
1 parent 6c7481b commit 3f13c2a

File tree

1 file changed

+10
-4
lines changed
  • packages/react-native-gesture-handler/src/handlers/gestures

1 file changed

+10
-4
lines changed

packages/react-native-gesture-handler/src/handlers/gestures/gesture.ts

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ export type GestureRef =
3939
| number
4040
| GestureType
4141
| React.RefObject<GestureType | undefined>
42-
| React.RefObject<React.ComponentType | undefined>; // Allow adding a ref to a gesture handler
42+
| React.RefObject<React.ComponentType | undefined | null>; // Allow adding a ref to a gesture handler
4343
export interface BaseGestureConfig
4444
extends CommonGestureConfig,
4545
Record<string, unknown> {
@@ -353,7 +353,9 @@ export abstract class BaseGesture<
353353
*/
354354
simultaneousWithExternalGesture(...gestures: Exclude<GestureRef, number>[]) {
355355
for (const gesture of gestures) {
356-
this.addDependency('simultaneousWith', gesture);
356+
if (gesture) {
357+
this.addDependency('simultaneousWith', gesture);
358+
}
357359
}
358360
return this;
359361
}
@@ -365,7 +367,9 @@ export abstract class BaseGesture<
365367
*/
366368
requireExternalGestureToFail(...gestures: Exclude<GestureRef, number>[]) {
367369
for (const gesture of gestures) {
368-
this.addDependency('requireToFail', gesture);
370+
if (gesture) {
371+
this.addDependency('requireToFail', gesture);
372+
}
369373
}
370374
return this;
371375
}
@@ -377,7 +381,9 @@ export abstract class BaseGesture<
377381
*/
378382
blocksExternalGesture(...gestures: Exclude<GestureRef, number>[]) {
379383
for (const gesture of gestures) {
380-
this.addDependency('blocksHandlers', gesture);
384+
if (gesture) {
385+
this.addDependency('blocksHandlers', gesture);
386+
}
381387
}
382388
return this;
383389
}

0 commit comments

Comments
 (0)