react-native-web-refresh-control icon indicating copy to clipboard operation
react-native-web-refresh-control copied to clipboard

Support React 19 (Remove `findNodeHandle`)

Open NovaBG03 opened this issue 10 months ago β€’ 0 comments

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

  1. Install React 19 in your project.
  2. Add [email protected].
  3. Try pulling to refresh a scrollable container on the web.
  4. 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.

NovaBG03 avatar May 29 '25 09:05 NovaBG03