react-native-web-refresh-control
react-native-web-refresh-control copied to clipboard
Support React 19 (Remove `findNodeHandle`)
Hi ! π Firstly, thanks for your work on this project! π
π Description
When using React 19, RefreshControl.web.js currently attempts to access the element via React Nativeβs findNodeHandle, which no longer works. This patch replaces findNodeHandle with direct traversal (ref.current.firstChild), restoring compatibility with React 19+.
π Steps to Reproduce
- Install React 19 in your project.
- Add
[email protected]. - Try pulling to refresh a scrollable container on the web.
- Observe that an error is thrown.
π€ Expected Behavior
Pull-to-refresh should work as before: dragging down when the container is scrolled to the top should trigger the refresh indicator and the onRefresh callback.
π§ Patch Diff
diff --git a/node_modules/react-native-web-refresh-control/src/RefreshControl.web.js b/node_modules/react-native-web-refresh-control/src/RefreshControl.web.js
index b2351e6..c638d23 100644
--- a/node_modules/react-native-web-refresh-control/src/RefreshControl.web.js
+++ b/node_modules/react-native-web-refresh-control/src/RefreshControl.web.js
@@ -1,5 +1,5 @@
import React, { useRef, useEffect, useCallback, useMemo } from 'react'
-import { View, Text, PanResponder, Animated, ActivityIndicator, findNodeHandle } from 'react-native'
+import { View, Text, PanResponder, Animated, ActivityIndicator } from 'react-native'
import PropTypes from 'prop-types'
const arrowIcon =
@@ -77,9 +77,9 @@ export default function RefreshControl({
onStartShouldSetPanResponderCapture: () => false,
onMoveShouldSetPanResponder: (_, gestureState) => {
if (!containerRef.current) return false
- const containerDOM = findNodeHandle(containerRef.current)
- if (!containerDOM) return false
- return containerDOM.children[0].scrollTop === 0
+ const scrollContainer = containerRef.current?.firstChild
+ if (!scrollContainer) return false
+ return scrollContainer.scrollTop === 0
&& (Math.abs(gestureState.dy) > Math.abs(gestureState.dx) * 2
&& Math.abs(gestureState.vy) > Math.abs(gestureState.vx) * 2.5)
},
π‘ Additional Context
- Tested with React 19.
- Applied via [patch-package](https://github.com/ds300/patch-package).
- Fixes unresponsiveness of pull-to-refresh on web when using the latest React.
This issue body was partially generated by patch-package.