chore: Convert RefreshControl to function component

Author: retyui

packages/react-native/Libraries/Components/RefreshControl/RefreshControl.js

@@ -18,6 +18,7 @@ import PullToRefreshViewNativeComponent, {
   Commands as PullToRefreshCommands,
 } from './PullToRefreshViewNativeComponent';
 import * as React from 'react';
+import {useCallback, useEffect, useRef, useState} from 'react';
 
 const Platform = require('../../Utilities/Platform').default;
 
@@ -72,7 +73,6 @@ type RefreshControlBaseProps = Readonly<{
   progressViewOffset?: ?number,
 }>;
 
-/** @build-types emit-as-interface Uniwind compatibility */
 export type RefreshControlProps = Readonly<{
   ...ViewProps,
   ...RefreshControlPropsIOS,
@@ -125,86 +125,98 @@ export type RefreshControlProps = Readonly<{
  * __Note:__ `refreshing` is a controlled prop, this is why it needs to be set to true
  * in the `onRefresh` function otherwise the refresh indicator will stop immediately.
  */
-class RefreshControl extends React.Component<RefreshControlProps> {
-  _nativeRef: ?React.ElementRef<
-    | typeof PullToRefreshViewNativeComponent
-    | typeof AndroidSwipeRefreshLayoutNativeComponent,
-  >;
-  _lastNativeRefreshing: boolean = false;
-
-  componentDidMount() {
-    this._lastNativeRefreshing = this.props.refreshing;
-  }
+const RefreshControl: component(...RefreshControlProps) = ({
+  // Android only props
+  enabled,
+  colors,
+  progressBackgroundColor,
+  size,
+  // iOS only props
+  tintColor,
+  titleColor,
+  title,
+  // Common props
+  onRefresh,
+  refreshing,
+  ...viewProps
+}: RefreshControlProps): React.Node => {
+  const ref =
+    useRef<
+      React.ElementRef<
+        | typeof PullToRefreshViewNativeComponent
+        | typeof AndroidSwipeRefreshLayoutNativeComponent,
+      >,
+    >(null);
+
+  const [rerender, forceRerender] = useState(0);
+  const nativeRefreshingState = useRef(refreshing);
+
+  const handleRefresh = useCallback(() => {
+    nativeRefreshingState.current = true; // Native state has changed to `true` on `onRefresh` callback.
+
+    // $FlowFixMe[unused-promise]
+    onRefresh?.();
+
+    // The native component will start refreshing so force an update to
+    // make sure it stays in sync with the js component.
+    forceRerender(val => val + 1);
+  }, [onRefresh]);
+
+  // RefreshControl is a controlled component so if the native refreshing
+  // value doesn't match the current js refreshing prop update it to
+  // the js value.
+  useEffect(() => {
+    const viewRef = ref.current;
+    if (!viewRef) {
+      return;
+    }
 
-  componentDidUpdate(prevProps: RefreshControlProps) {
-    // RefreshControl is a controlled component so if the native refreshing
-    // value doesn't match the current js refreshing prop update it to
-    // the js value.
-    if (this.props.refreshing !== prevProps.refreshing) {
-      this._lastNativeRefreshing = this.props.refreshing;
-    } else if (
-      this.props.refreshing !== this._lastNativeRefreshing &&
-      this._nativeRef
-    ) {
-      if (Platform.OS === 'android') {
-        AndroidSwipeRefreshLayoutCommands.setNativeRefreshing(
-          this._nativeRef,
-          this.props.refreshing,
-        );
-      } else {
-        PullToRefreshCommands.setNativeRefreshing(
-          this._nativeRef,
-          this.props.refreshing,
-        );
-      }
-      this._lastNativeRefreshing = this.props.refreshing;
+    //  Do nothing when a native state is the same as a `refreshing` prop
+    if (nativeRefreshingState.current === refreshing) {
+      return;
     }
-  }
 
-  render(): React.Node {
-    if (Platform.OS === 'ios') {
-      const {enabled, colors, progressBackgroundColor, size, ...props} =
-        this.props;
-      return (
-        <PullToRefreshViewNativeComponent
-          {...props}
-          ref={this._setNativeRef}
-          onRefresh={this._onRefresh}
-        />
+    // Otherwise a JS component has to sync a native state with an actual `refreshing` value
+    if (Platform.OS === 'android') {
+      AndroidSwipeRefreshLayoutCommands.setNativeRefreshing(
+        viewRef,
+        refreshing,
       );
     } else {
-      const {tintColor, titleColor, title, ...props} = this.props;
-      return (
-        <AndroidSwipeRefreshLayoutNativeComponent
-          {...props}
-          ref={this._setNativeRef}
-          onRefresh={this._onRefresh}
-        />
-      );
+      PullToRefreshCommands.setNativeRefreshing(viewRef, refreshing);
     }
-  }
 
-  _onRefresh = () => {
-    this._lastNativeRefreshing = true;
-
-    // $FlowFixMe[unused-promise]
-    this.props.onRefresh && this.props.onRefresh();
+    nativeRefreshingState.current = refreshing;
+  }, [refreshing, rerender]);
+
+  if (Platform.OS === 'ios') {
+    return (
+      <PullToRefreshViewNativeComponent
+        {...viewProps}
+        refreshing={refreshing}
+        tintColor={tintColor}
+        titleColor={titleColor}
+        title={title}
+        ref={ref}
+        onRefresh={handleRefresh}
+      />
+    );
+  }
 
-    // The native component will start refreshing so force an update to
-    // make sure it stays in sync with the js component.
-    this.forceUpdate();
-  };
-
-  _setNativeRef = (
-    ref: ?React.ElementRef<
-      | typeof PullToRefreshViewNativeComponent
-      | typeof AndroidSwipeRefreshLayoutNativeComponent,
-    >,
-  ) => {
-    this._nativeRef = ref;
-  };
-}
-
-export type RefreshControlInstance = RefreshControl;
+  return (
+    <AndroidSwipeRefreshLayoutNativeComponent
+      {...viewProps}
+      refreshing={refreshing}
+      enabled={enabled}
+      colors={colors}
+      progressBackgroundColor={progressBackgroundColor}
+      size={size}
+      ref={ref}
+      onRefresh={handleRefresh}
+    />
+  );
+};
+
+RefreshControl.displayName = 'RefreshControl';
 
 export default RefreshControl;