From bb7aef2dd73836d2597b41d430df26d364b4f261 Mon Sep 17 00:00:00 2001
From: Aniket Kumar <aniketkumar049@gmail.com>
Date: Tue, 4 Aug 2020 08:39:10 -0700
Subject: [PATCH] Update ActivityIndicator component (#29523)

Summary:
Fixes https://github.com/MLH-Fellowship/react-native/issues/34

The PR is part of an effort to update the code comments to match the current documentation on the React Native website. The project is a part of the MLH Fellowship program and involves the automatic generation of the website docs from code comments and flow types as the end result.

To learn more about the project you can visit the project wiki:
- [Project Details](https://github.com/MLH-Fellowship/0.4.x-projects/wiki/React-Native-Flowtype-API-Docs-Generator)
- [RN Docs Standards](https://github.com/MLH-Fellowship/react-native/wiki/RN-Docs-standards)

Link to the documentation(the source of truth):
- [activityindicator.md](https://github.com/MLH-Fellowship/react-native-website/blob/master/docs/activityindicator.md)

## Changes
* Update the title and prop description from docs.
* Remove unnecessary `*` from the code comments.
* Add Snack player example specified in the docs to the code comments as JSDoc.
* Add `type` annotation to parse supported datatype by the prop.
* Add `platform` annotation to specify platforms supported by a prop.
* Add `default` annotation to parse default value of prop.

## Changelog
[Internal]

Pull Request resolved: https://github.com/facebook/react-native/pull/29523

Test Plan:
All changes are made to the code comments and thus there is no need for testing.

Reviewed by jevakallio

Reviewed By: cpojer

Differential Revision: D22921419

Pulled By: motiz88

fbshipit-source-id: 3701bf3e3f4e0762529c8a5597263354d5243f07
---
 .../ActivityIndicator/ActivityIndicator.js    | 99 +++++++++++++++----
 1 file changed, 78 insertions(+), 21 deletions(-)

diff --git a/Libraries/Components/ActivityIndicator/ActivityIndicator.js b/Libraries/Components/ActivityIndicator/ActivityIndicator.js
index 0b57a52c0b8..52cbda4a731 100644
--- a/Libraries/Components/ActivityIndicator/ActivityIndicator.js
+++ b/Libraries/Components/ActivityIndicator/ActivityIndicator.js
@@ -6,6 +6,7 @@
  *
  * @format
  * @flow
+ * @generate-docs
  */
 
 'use strict';
@@ -29,10 +30,10 @@ type IndicatorSize = number | 'small' | 'large';
 
 type IOSProps = $ReadOnly<{|
   /**
-   * Whether the indicator should hide when not animating (true by default).
-   *
-   * See https://reactnative.dev/docs/activityindicator.html#hideswhenstopped
-   */
+    Whether the indicator should hide when not animating.
+
+    @platform ios
+  */
   hidesWhenStopped?: ?boolean,
 |}>;
 type Props = $ReadOnly<{|
@@ -40,33 +41,27 @@ type Props = $ReadOnly<{|
   ...IOSProps,
 
   /**
-   * Whether to show the indicator (true, the default) or hide it (false).
-   *
-   * See https://reactnative.dev/docs/activityindicator.html#animating
+   	Whether to show the indicator (`true`) or hide it (`false`).
    */
   animating?: ?boolean,
 
   /**
-   * The foreground color of the spinner (default is gray).
-   *
-   * See https://reactnative.dev/docs/activityindicator.html#color
-   */
+    The foreground color of the spinner.
+
+    @default {@platform android} `null` (system accent default color)
+    @default {@platform ios} '#999999'
+  */
   color?: ?ColorValue,
 
   /**
-   * Size of the indicator (default is 'small').
-   * Passing a number to the size prop is only supported on Android.
-   *
-   * See https://reactnative.dev/docs/activityindicator.html#size
-   */
+    Size of the indicator.
+
+    @type enum(`'small'`, `'large'`)
+    @type {@platform android} number
+  */
   size?: ?IndicatorSize,
 |}>;
 
-/**
- * Displays a circular loading indicator.
- *
- * See https://reactnative.dev/docs/activityindicator.html
- */
 const ActivityIndicator = (props: Props, forwardedRef?: any) => {
   const {onLayout, style, size, ...restProps} = props;
   let sizeStyle;
@@ -115,6 +110,68 @@ const ActivityIndicator = (props: Props, forwardedRef?: any) => {
   );
 };
 
+/**
+  Displays a circular loading indicator.
+
+  ```SnackPlayer name=ActivityIndicator%20Function%20Component%20Example
+  import React from "react";
+  import { ActivityIndicator, StyleSheet, Text, View } from "react-native";
+
+  const App = () => (
+    <View style={[styles.container, styles.horizontal]}>
+      <ActivityIndicator />
+      <ActivityIndicator size="large" />
+      <ActivityIndicator size="small" color="#0000ff" />
+      <ActivityIndicator size="large" color="#00ff00" />
+    </View>
+  );
+
+  const styles = StyleSheet.create({
+    container: {
+      flex: 1,
+      justifyContent: "center"
+    },
+    horizontal: {
+      flexDirection: "row",
+      justifyContent: "space-around",
+      padding: 10
+    }
+  });
+  export default App;
+  ```
+
+  ```SnackPlayer name=ActivityIndicator%20Class%20Component%20Example
+  import React, { Component } from "react";
+  import { ActivityIndicator, StyleSheet, Text, View } from "react-native";
+
+  class App extends Component {
+    render() {
+      return (
+        <View style={[styles.container, styles.horizontal]}>
+          <ActivityIndicator />
+          <ActivityIndicator size="large" />
+          <ActivityIndicator size="small" color="#0000ff" />
+          <ActivityIndicator size="large" color="#00ff00" />
+        </View>
+      );
+    }
+  }
+
+  const styles = StyleSheet.create({
+    container: {
+      flex: 1,
+      justifyContent: "center"
+    },
+    horizontal: {
+      flexDirection: "row",
+      justifyContent: "space-around",
+      padding: 10
+    }
+  });
+  export default App;
+  ```
+*/
+
 const ActivityIndicatorWithRef: React.AbstractComponent<
   Props,
   HostComponent<mixed>,