RefreshControl component updated

Libraries/Components/RefreshControl/RefreshControl.js

@@ -36,41 +36,42 @@ if (Platform.OS === 'android') {
 
 type IOSProps = $ReadOnly<{|
   /**
-   * The color of the refresh indicator.
+    The color of the refresh indicator.
    */
   tintColor?: ?ColorValue,
   /**
-   * Title color.
+    Title color.
    */
   titleColor?: ?ColorValue,
   /**
-   * The title displayed under the refresh indicator.
+    The title displayed under the refresh indicator.
    */
   title?: ?string,
 |}>;
 
 type AndroidProps = $ReadOnly<{|
   /**
-   * Whether the pull to refresh functionality is enabled.
+    Whether the pull to refresh functionality is enabled.
    */
   enabled?: ?boolean,
   /**
-   * The colors (at least one) that will be used to draw the refresh indicator.
+    The colors (at least one) that will be used to draw the refresh indicator.
+    [color](https://reactnative.dev/docs/colors)
    */
   colors?: ?$ReadOnlyArray<ColorValue>,
   /**
-   * The background color of the refresh indicator.
+    The background color of the refresh indicator.
    */
   progressBackgroundColor?: ?ColorValue,
   /**
-   * Size of the refresh indicator, see RefreshControl.SIZE.
+    Size of the refresh indicator, see RefreshControl.SIZE.
    */
   size?: ?(
     | typeof RefreshLayoutConsts.SIZE.DEFAULT
     | typeof RefreshLayoutConsts.SIZE.LARGE
   ),
   /**
-   * Progress view top offset
+    Progress view top offset
    */
   progressViewOffset?: ?number,
 |}>;
@@ -81,60 +82,81 @@ export type RefreshControlProps = $ReadOnly<{|
   ...AndroidProps,
 
   /**
-   * Called when the view starts refreshing.
+    Called when the view starts refreshing.
    */
   onRefresh?: ?() => void | Promise<void>,
 
   /**
-   * Whether the view should be indicating an active refresh.
+    Whether the view should be indicating an active refresh.
    */
   refreshing: boolean,
 |}>;
 
 /**
- * This component is used inside a ScrollView or ListView to add pull to refresh
- * functionality. When the ScrollView is at `scrollY: 0`, swiping down
- * triggers an `onRefresh` event.
- *
- * ### Usage example
- *
- * ``` js
- * class RefreshableList extends Component {
- *   constructor(props) {
- *     super(props);
- *     this.state = {
- *       refreshing: false,
- *     };
- *   }
- *
- *   _onRefresh() {
- *     this.setState({refreshing: true});
- *     fetchData().then(() => {
- *       this.setState({refreshing: false});
- *     });
- *   }
- *
- *   render() {
- *     return (
- *       <ListView
- *         refreshControl={
- *           <RefreshControl
- *             refreshing={this.state.refreshing}
- *             onRefresh={this._onRefresh.bind(this)}
- *           />
- *         }
- *         ...
- *       >
- *       ...
- *       </ListView>
- *     );
- *   }
- *   ...
- * }
- * ```
- *
- * __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.
+  https://reactnative.dev/docs/refreshcontrol.html
+
+  This component is used inside a ScrollView or ListView to add pull to refresh
+  functionality. When the ScrollView is at `scrollY: 0`, swiping down
+  triggers an `onRefresh` event.
+
+  @example ```SnackPlayer name=RefreshControl&supportedPlatforms=ios,android
+  import React from 'react';
+  import {
+    ScrollView,
+    RefreshControl,
+    StyleSheet,
+    Text,
+    SafeAreaView,
+  } from 'react-native';
+  import Constants from 'expo-constants';
+
+  const wait = (timeout) => {
+    return new Promise(resolve => {
+      setTimeout(resolve, timeout);
+    });
+  }
+
+  const App = () => {
+    const [refreshing, setRefreshing] = React.useState(false);
+
+    const onRefresh = React.useCallback(() => {
+      setRefreshing(true);
+
+      wait(2000).then(() => setRefreshing(false));
+    }, []);
+
+    return (
+      <SafeAreaView style={styles.container}>
+        <ScrollView
+          contentContainerStyle={styles.scrollView}
+          refreshControl={
+            <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
+          }
+        >
+          <Text>Pull down to see RefreshControl indicator</Text>
+        </ScrollView>
+      </SafeAreaView>
+    );
+  }
+
+  const styles = StyleSheet.create({
+    container: {
+      flex: 1,
+      marginTop: Constants.statusBarHeight,
+    },
+    scrollView: {
+      flex: 1,
+      backgroundColor: 'pink',
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+  });
+
+  export default App;
+  ```
+
+  **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> {
   static SIZE: any = RefreshLayoutConsts.SIZE;