Update withIO.js

lib/withIO.js

@@ -1,20 +1,25 @@
-import React, { PureComponent, createRef, } from 'react';
+import React, { createRef, forwardRef, PureComponent } from 'react';
+import { findNodeHandle, View } from 'react-native';
 import IOContext from './IOContext';
 import IOManager from './IOManager';
+
 function withIO(Comp, methods) {
-    const IOScrollableComponent = class extends PureComponent {
-        node;
+    class IOScrollableComponent extends PureComponent {
+        nativeRef;
         scroller;
         root;
         manager;
         contextValue;
+
         constructor(props) {
             super(props);
+
             const self = this;
             this.scroller = createRef();
+            this.nativeRef = createRef();
             this.root = {
                 get node() {
-                    return self.node;
+                    return self.nativeRef.current;
                 },
                 get horizontal() {
                     return !!self.props.horizontal;
@@ -41,69 +46,114 @@ function withIO(Comp, methods) {
                     zoomScale: 1,
                 },
             };
+
             const manager = new IOManager({
                 root: this.root,
                 get rootMargin() {
                     return self.props.rootMargin;
                 },
-                get threshold() {
-                    return self.props.threshold;
-                },
             });
+
             this.manager = manager;
             this.contextValue = {
                 manager,
             };
-        }
-        componentDidMount() {
-            this.node =
-                this.scroller.current?.getNativeScrollRef?.() || this.scroller.current;
+
             methods.forEach((method) => {
                 this[method] = (...args) => {
                     this.scroller.current?.[method]?.(...args);
                 };
             });
+
+            // Forward the outer ref (including Animated.createAnimatedComponent's
+            // merged ref) to the real FlatList/ScrollView so native scroll events
+            // attach to the scroll view, not the IO wrapper instance.
+            this.captureScrollerRef = (node) => {
+                this.scroller.current = node;
+                const outerRef = this.props.forwardedRef;
+                if (typeof outerRef === 'function') {
+                    outerRef(node);
+                } else if (outerRef != null) {
+                    outerRef.current = node;
+                }
+            };
+        }
+
+        componentDidMount() {
+            this.nativeNode = findNodeHandle(this.nativeRef.current);
         }
+
         handleContentSizeChange = (width, height) => {
             const { contentSize } = this.root.current;
+
             if (width !== contentSize.width || height !== contentSize.height) {
                 this.root.current.contentSize = { width, height };
                 if (width > 0 && height > 0 && this.root.onLayout) {
                     this.root.onLayout();
                 }
             }
+
             const { onContentSizeChange } = this.props;
             if (onContentSizeChange) {
                 onContentSizeChange(width, height);
             }
         };
+
         handleLayout = (event) => {
-            const { nativeEvent: { layout }, } = event;
+            const {
+                nativeEvent: { layout },
+            } = event;
             const { layoutMeasurement } = this.root.current;
-            if (layoutMeasurement.width !== layout.width ||
-                layoutMeasurement.height !== layout.height) {
+
+            if (layoutMeasurement.width !== layout.width || layoutMeasurement.height !== layout.height) {
                 this.root.current.layoutMeasurement = layout;
             }
+
             const { onLayout } = this.props;
             if (onLayout) {
                 onLayout(event);
             }
         };
+
         handleScroll = (event) => {
             this.root.current = event.nativeEvent;
+
             if (this.root.onScroll) {
                 this.root.onScroll(this.root.current);
             }
+
             const { onScroll } = this.props;
             if (onScroll) {
                 onScroll(event);
             }
         };
+
         render() {
-            return (React.createElement(IOContext.Provider, { value: this.contextValue },
-                React.createElement(Comp, { scrollEventThrottle: 16, ...this.props, ref: this.scroller, onContentSizeChange: this.handleContentSizeChange, onLayout: this.handleLayout, onScroll: this.handleScroll })));
+            const { forwardedRef, ...restProps } = this.props;
+
+            return (
+                <IOContext.Provider value={this.contextValue}>
+                    <View ref={this.nativeRef} collapsable={false}>
+                        <Comp
+                            scrollEventThrottle={16}
+                            {...restProps}
+                            ref={this.captureScrollerRef}
+                            onContentSizeChange={this.handleContentSizeChange}
+                            onLayout={this.handleLayout}
+                            onScroll={this.handleScroll}
+                        />
+                    </View>
+                </IOContext.Provider>
+            );
         }
-    };
-    return IOScrollableComponent;
+    }
+
+    const ForwardedIO = forwardRef((props, ref) => <IOScrollableComponent {...props} forwardedRef={ref} />);
+
+    const name = Comp.displayName || Comp.name || 'Scrollable';
+    ForwardedIO.displayName = `IO(${name})`;
+
+    return ForwardedIO;
 }
+
 export default withIO;