Merge pull request #23879 from Parshvi16/issue16200-migrate-ScrollVie…

…wWithContext.js

migrated ScrollViewWithContext to a functional component

src/components/ScrollViewWithContext.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useState, useRef} from 'react';
 import {ScrollView} from 'react-native';
 
 const MIN_SMOOTH_SCROLL_EVENT_THROTTLE = 16;
@@ -15,47 +15,40 @@ const propTypes = ScrollView.propTypes;
  * Using this wrapper will automatically handle scrolling to the picker's <TextInput />
  * when the picker modal is opened
  */
-class ScrollViewWithContext extends React.Component {
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            contentOffsetY: 0,
-        };
-        this.scrollViewRef = this.props.innerRef || React.createRef(null);
-
-        this.setContextScrollPosition = this.setContextScrollPosition.bind(this);
-    }
-
-    setContextScrollPosition(event) {
-        if (this.props.onScroll) {
-            this.props.onScroll(event);
+function ScrollViewWithContext({onScroll, scrollEventThrottle, children, innerRef, ...restProps}) {
+    const [contentOffsetY, setContentOffsetY] = useState(0);
+    const defaultScrollViewRef = useRef();
+    const scrollViewRef = innerRef || defaultScrollViewRef;
+
+    const setContextScrollPosition = (event) => {
+        if (onScroll) {
+            onScroll(event);
         }
-        this.setState({contentOffsetY: event.nativeEvent.contentOffset.y});
-    }
-
-    render() {
-        return (
-            <ScrollView
-                // eslint-disable-next-line react/jsx-props-no-spreading
-                {...this.props}
-                ref={this.scrollViewRef}
-                onScroll={this.setContextScrollPosition}
-                scrollEventThrottle={this.props.scrollEventThrottle || MIN_SMOOTH_SCROLL_EVENT_THROTTLE}
+        setContentOffsetY(event.nativeEvent.contentOffset.y);
+    };
+
+    return (
+        <ScrollView
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...restProps}
+            ref={scrollViewRef}
+            onScroll={setContextScrollPosition}
+            scrollEventThrottle={scrollEventThrottle || MIN_SMOOTH_SCROLL_EVENT_THROTTLE}
+        >
+            <ScrollContext.Provider
+                value={{
+                    scrollViewRef,
+                    contentOffsetY,
+                }}
             >
-                <ScrollContext.Provider
-                    value={{
-                        scrollViewRef: this.scrollViewRef,
-                        contentOffsetY: this.state.contentOffsetY,
-                    }}
-                >
-                    {this.props.children}
-                </ScrollContext.Provider>
-            </ScrollView>
-        );
-    }
+                {children}
+            </ScrollContext.Provider>
+        </ScrollView>
+    );
 }
+
 ScrollViewWithContext.propTypes = propTypes;
+ScrollViewWithContext.displayName = 'ScrollViewWithContext';
 
 export default React.forwardRef((props, ref) => (
     <ScrollViewWithContext
@@ -64,5 +57,4 @@ export default React.forwardRef((props, ref) => (
         innerRef={ref}
     />
 ));
-
 export {ScrollContext};