From 168a80235ea60599c6be16f85303f7f3a35df3bc Mon Sep 17 00:00:00 2001
From: Ronny Freites <ronnyangelo.freites@gmail.com>
Date: Wed, 5 Feb 2020 11:10:30 -0600
Subject: [PATCH 1/5] added snackplayer/functional component with hooks

---
 website/i18n/en.json                          |   6 +-
 .../version-0.61/activityindicator.md         | 122 ++++++++++++++++++
 2 files changed, 125 insertions(+), 3 deletions(-)
 create mode 100644 website/versioned_docs/version-0.61/activityindicator.md

diff --git a/website/i18n/en.json b/website/i18n/en.json
index d785737c32a..365c6c70c2d 100644
--- a/website/i18n/en.json
+++ b/website/i18n/en.json
@@ -341,9 +341,6 @@
       "toastandroid": {
         "title": "ToastAndroid"
       },
-      "toolbarandroid": {
-        "title": "ToolbarAndroid"
-      },
       "touchablehighlight": {
         "title": "TouchableHighlight"
       },
@@ -3401,6 +3398,9 @@
       "version-0.60/version-0.60-virtualizedlist": {
         "title": "VirtualizedList"
       },
+      "version-0.61/version-0.61-activityindicator": {
+        "title": "ActivityIndicator"
+      },
       "version-0.61/version-0.61-debugging": {
         "title": "Debugging"
       },
diff --git a/website/versioned_docs/version-0.61/activityindicator.md b/website/versioned_docs/version-0.61/activityindicator.md
new file mode 100644
index 00000000000..30c7ea71ade
--- /dev/null
+++ b/website/versioned_docs/version-0.61/activityindicator.md
@@ -0,0 +1,122 @@
+---
+id: version-0.61-activityindicator
+title: ActivityIndicator
+original_id: activityindicator
+---
+
+Displays a circular loading indicator.
+
+### Example
+
+```SnackPlayer name=activityindicator%20Function%20Component%20Example
+import React from 'react'
+import {
+  ActivityIndicator,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native'
+
+export default function App() {
+  return (
+    <View style={[styles.container, styles.horizontal]}>
+      <ActivityIndicator size="large" color="#0000ff" />
+      <ActivityIndicator size="small" color="#00ff00" />
+      <ActivityIndicator size="large" color="#0000ff" />
+      <ActivityIndicator size="small" color="#00ff00" />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center'
+  },
+  horizontal: {
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    padding: 10
+  }
+})
+```
+
+```SnackPlayer name=activityindicator%20Class%20Component%20Example
+
+import React, { Component } from 'react'
+import {
+  ActivityIndicator,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native'
+
+export default class App extends Component {
+  render() {
+    return (
+      <View style={[styles.container, styles.horizontal]}>
+        <ActivityIndicator size="large" color="#0000ff" />
+        <ActivityIndicator size="small" color="#00ff00" />
+        <ActivityIndicator size="large" color="#0000ff" />
+        <ActivityIndicator size="small" color="#00ff00" />
+      </View>
+    )
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center'
+  },
+  horizontal: {
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    padding: 10
+  }
+})
+```
+
+# Reference
+
+## Props
+
+Inherits [View Props](view.md#props).
+
+### `animating`
+
+Whether to show the indicator (true, the default) or hide it (false).
+
+| Type | Required |
+| ---- | -------- |
+| bool | No       |
+
+---
+
+### `color`
+
+The foreground color of the spinner (default is gray on iOS and dark cyan on Android).
+
+| Type               | Required |
+| ------------------ | -------- |
+| [color](colors.md) | No       |
+
+---
+
+### `hidesWhenStopped`
+
+Whether the indicator should hide when not animating (true by default).
+
+| Type | Required | Platform |
+| ---- | -------- | -------- |
+| bool | No       | iOS      |
+
+---
+
+### `size`
+
+Size of the indicator (default is 'small'). Passing a number to the size prop is only supported on Android.
+
+| Type                           | Required |
+| ------------------------------ | -------- |
+| enum('small', 'large'), number | No       |

From 6917d97b69fcc6d681aea20dc1fc9cd56a0c9cf3 Mon Sep 17 00:00:00 2001
From: Ronny Freites <ronnyangelo.freites@gmail.com>
Date: Wed, 5 Feb 2020 11:31:30 -0600
Subject: [PATCH 2/5] update docs

---
 .../version-0.61/activityindicator.md          | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/website/versioned_docs/version-0.61/activityindicator.md b/website/versioned_docs/version-0.61/activityindicator.md
index 30c7ea71ade..062e085668a 100644
--- a/website/versioned_docs/version-0.61/activityindicator.md
+++ b/website/versioned_docs/version-0.61/activityindicator.md
@@ -8,6 +8,19 @@ Displays a circular loading indicator.
 
 ### Example
 
+<div class="toggler">
+  <ul role="tablist" class="toggle-syntax">
+    <li id="functional" class="button-functional" aria-selected="false" role="tab" tabindex="0" aria-controls="functionaltab" onclick="displayTabs('syntax', 'functional')">
+      Function Component Example
+    </li>
+    <li id="classical" class="button-classical" aria-selected="false" role="tab" tabindex="0" aria-controls="classicaltab" onclick="displayTabs('syntax', 'classical')">
+      Class Component Example
+    </li>
+  </ul>
+</div>
+
+<block class="functional syntax" />
+
 ```SnackPlayer name=activityindicator%20Function%20Component%20Example
 import React from 'react'
 import {
@@ -41,8 +54,9 @@ const styles = StyleSheet.create({
 })
 ```
 
-```SnackPlayer name=activityindicator%20Class%20Component%20Example
+<block class="classical syntax" />
 
+```SnackPlayer name=activityindicator%20Class%20Component%20Example
 import React, { Component } from 'react'
 import {
   ActivityIndicator,
@@ -77,6 +91,8 @@ const styles = StyleSheet.create({
 })
 ```
 
+<block class="endBlock syntax" />
+
 # Reference
 
 ## Props

From 12166a4f8a16a7bd82ec553fb7675fd0886fe5d2 Mon Sep 17 00:00:00 2001
From: Ronny Freites <ronnyangelo.freites@gmail.com>
Date: Fri, 7 Feb 2020 13:30:46 -0600
Subject: [PATCH 3/5] restore changes

---
 website/i18n/en.json | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/website/i18n/en.json b/website/i18n/en.json
index 365c6c70c2d..daecff52955 100644
--- a/website/i18n/en.json
+++ b/website/i18n/en.json
@@ -341,6 +341,9 @@
       "toastandroid": {
         "title": "ToastAndroid"
       },
+      "toolbarandroid": {
+        "title": "ToolbarAndroid"
+      },
       "touchablehighlight": {
         "title": "TouchableHighlight"
       },

From 51913e47619c9295d44ffe4543601b6335e2d541 Mon Sep 17 00:00:00 2001
From: Ronny <ronnyangelo.freites@gmail.com>
Date: Fri, 7 Feb 2020 14:01:45 -0600
Subject: [PATCH 4/5] PR updates

---
 docs/activityindicator.md                     |  87 +++++++++--
 website/i18n/en.json                          |   3 -
 .../version-0.61/activityindicator.md         | 138 ------------------
 3 files changed, 75 insertions(+), 153 deletions(-)
 delete mode 100644 website/versioned_docs/version-0.61/activityindicator.md

diff --git a/docs/activityindicator.md b/docs/activityindicator.md
index 816c95fcad8..e042e7ab218 100644
--- a/docs/activityindicator.md
+++ b/docs/activityindicator.md
@@ -7,27 +7,90 @@ Displays a circular loading indicator.
 
 ### Example
 
-```SnackPlayer name=ActivityIndicator
-import React from 'react';
-import { ActivityIndicator, StyleSheet, View } from 'react-native';
+<div class="toggler">
+  <ul role="tablist" class="toggle-syntax">
+    <li id="functional" class="button-functional" aria-selected="false" role="tab" tabindex="0" aria-controls="functionaltab" onclick="displayTabs('syntax', 'functional')">
+      Function Component Example
+    </li>
+    <li id="classical" class="button-classical" aria-selected="false" role="tab" tabindex="0" aria-controls="classicaltab" onclick="displayTabs('syntax', 'classical')">
+      Class Component Example
+    </li>
+  </ul>
+</div>
+
+<block class="functional syntax" />
+
+```SnackPlayer name=activityindicator%20Function%20Component%20Example
+import React from 'react'
+import {
+  ActivityIndicator,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native'
+
+export default function App() {
+  return (
+    <View style={[styles.container, styles.horizontal]}>
+      <ActivityIndicator size="large" color="#0000ff" />
+      <ActivityIndicator size="small" color="#00ff00" />
+      <ActivityIndicator size="large" color="#0000ff" />
+      <ActivityIndicator size="small" color="#00ff00" />
+    </View>
+  );
+}
 
-export default App = () => (
-  <View style={styles.container}>
-    <ActivityIndicator size="large" color="#0000ff" />
-    <ActivityIndicator size="small" color="#00ff00" />
-  </View>
-);
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center'
+  },
+  horizontal: {
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    padding: 10
+  }
+})
+```
+
+<block class="classical syntax" />
+
+```SnackPlayer name=activityindicator%20Class%20Component%20Example
+import React, { Component } from 'react'
+import {
+  ActivityIndicator,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native'
+
+export default class App extends Component {
+  render() {
+    return (
+      <View style={[styles.container, styles.horizontal]}>
+        <ActivityIndicator size="large" color="#0000ff" />
+        <ActivityIndicator size="small" color="#00ff00" />
+        <ActivityIndicator size="large" color="#0000ff" />
+        <ActivityIndicator size="small" color="#00ff00" />
+      </View>
+    )
+  }
+}
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
+    justifyContent: 'center'
+  },
+  horizontal: {
     flexDirection: 'row',
-    justifyContent: 'space-around'
+    justifyContent: 'space-around',
+    padding: 10
   }
-});
+})
 ```
 
----
+<block class="endBlock syntax" />
 
 # Reference
 
diff --git a/website/i18n/en.json b/website/i18n/en.json
index daecff52955..d785737c32a 100644
--- a/website/i18n/en.json
+++ b/website/i18n/en.json
@@ -3401,9 +3401,6 @@
       "version-0.60/version-0.60-virtualizedlist": {
         "title": "VirtualizedList"
       },
-      "version-0.61/version-0.61-activityindicator": {
-        "title": "ActivityIndicator"
-      },
       "version-0.61/version-0.61-debugging": {
         "title": "Debugging"
       },
diff --git a/website/versioned_docs/version-0.61/activityindicator.md b/website/versioned_docs/version-0.61/activityindicator.md
deleted file mode 100644
index 062e085668a..00000000000
--- a/website/versioned_docs/version-0.61/activityindicator.md
+++ /dev/null
@@ -1,138 +0,0 @@
----
-id: version-0.61-activityindicator
-title: ActivityIndicator
-original_id: activityindicator
----
-
-Displays a circular loading indicator.
-
-### Example
-
-<div class="toggler">
-  <ul role="tablist" class="toggle-syntax">
-    <li id="functional" class="button-functional" aria-selected="false" role="tab" tabindex="0" aria-controls="functionaltab" onclick="displayTabs('syntax', 'functional')">
-      Function Component Example
-    </li>
-    <li id="classical" class="button-classical" aria-selected="false" role="tab" tabindex="0" aria-controls="classicaltab" onclick="displayTabs('syntax', 'classical')">
-      Class Component Example
-    </li>
-  </ul>
-</div>
-
-<block class="functional syntax" />
-
-```SnackPlayer name=activityindicator%20Function%20Component%20Example
-import React from 'react'
-import {
-  ActivityIndicator,
-  StyleSheet,
-  Text,
-  View,
-} from 'react-native'
-
-export default function App() {
-  return (
-    <View style={[styles.container, styles.horizontal]}>
-      <ActivityIndicator size="large" color="#0000ff" />
-      <ActivityIndicator size="small" color="#00ff00" />
-      <ActivityIndicator size="large" color="#0000ff" />
-      <ActivityIndicator size="small" color="#00ff00" />
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center'
-  },
-  horizontal: {
-    flexDirection: 'row',
-    justifyContent: 'space-around',
-    padding: 10
-  }
-})
-```
-
-<block class="classical syntax" />
-
-```SnackPlayer name=activityindicator%20Class%20Component%20Example
-import React, { Component } from 'react'
-import {
-  ActivityIndicator,
-  StyleSheet,
-  Text,
-  View,
-} from 'react-native'
-
-export default class App extends Component {
-  render() {
-    return (
-      <View style={[styles.container, styles.horizontal]}>
-        <ActivityIndicator size="large" color="#0000ff" />
-        <ActivityIndicator size="small" color="#00ff00" />
-        <ActivityIndicator size="large" color="#0000ff" />
-        <ActivityIndicator size="small" color="#00ff00" />
-      </View>
-    )
-  }
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center'
-  },
-  horizontal: {
-    flexDirection: 'row',
-    justifyContent: 'space-around',
-    padding: 10
-  }
-})
-```
-
-<block class="endBlock syntax" />
-
-# Reference
-
-## Props
-
-Inherits [View Props](view.md#props).
-
-### `animating`
-
-Whether to show the indicator (true, the default) or hide it (false).
-
-| Type | Required |
-| ---- | -------- |
-| bool | No       |
-
----
-
-### `color`
-
-The foreground color of the spinner (default is gray on iOS and dark cyan on Android).
-
-| Type               | Required |
-| ------------------ | -------- |
-| [color](colors.md) | No       |
-
----
-
-### `hidesWhenStopped`
-
-Whether the indicator should hide when not animating (true by default).
-
-| Type | Required | Platform |
-| ---- | -------- | -------- |
-| bool | No       | iOS      |
-
----
-
-### `size`
-
-Size of the indicator (default is 'small'). Passing a number to the size prop is only supported on Android.
-
-| Type                           | Required |
-| ------------------------------ | -------- |
-| enum('small', 'large'), number | No       |

From caedf1bee7dc469df8f69b184d6f51370e1b1c5a Mon Sep 17 00:00:00 2001
From: Rachel Nabors <rachelnabors@users.noreply.github.com>
Date: Sat, 15 Feb 2020 22:45:31 +0000
Subject: [PATCH 5/5] Update activityindicator.md

Prettifying the code
---
 docs/activityindicator.md | 41 +++++++++++++++------------------------
 1 file changed, 16 insertions(+), 25 deletions(-)

diff --git a/docs/activityindicator.md b/docs/activityindicator.md
index e042e7ab218..e579b7ef662 100644
--- a/docs/activityindicator.md
+++ b/docs/activityindicator.md
@@ -20,14 +20,9 @@ Displays a circular loading indicator.
 
 <block class="functional syntax" />
 
-```SnackPlayer name=activityindicator%20Function%20Component%20Example
-import React from 'react'
-import {
-  ActivityIndicator,
-  StyleSheet,
-  Text,
-  View,
-} from 'react-native'
+```SnackPlayer name=ActivityIndicator%20Function%20Component%20Example
+import React from "react";
+import { ActivityIndicator, StyleSheet, Text, View } from "react-native";
 
 export default function App() {
   return (
@@ -43,26 +38,21 @@ export default function App() {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    justifyContent: 'center'
+    justifyContent: "center"
   },
   horizontal: {
-    flexDirection: 'row',
-    justifyContent: 'space-around',
+    flexDirection: "row",
+    justifyContent: "space-around",
     padding: 10
   }
-})
+});
 ```
 
 <block class="classical syntax" />
 
-```SnackPlayer name=activityindicator%20Class%20Component%20Example
-import React, { Component } from 'react'
-import {
-  ActivityIndicator,
-  StyleSheet,
-  Text,
-  View,
-} from 'react-native'
+```SnackPlayer name=ActivityIndicator%20Class%20Component%20Example
+import React, { Component } from "react";
+import { ActivityIndicator, StyleSheet, Text, View } from "react-native";
 
 export default class App extends Component {
   render() {
@@ -73,21 +63,22 @@ export default class App extends Component {
         <ActivityIndicator size="large" color="#0000ff" />
         <ActivityIndicator size="small" color="#00ff00" />
       </View>
-    )
+    );
   }
 }
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    justifyContent: 'center'
+    justifyContent: "center"
   },
   horizontal: {
-    flexDirection: 'row',
-    justifyContent: 'space-around',
+    flexDirection: "row",
+    justifyContent: "space-around",
     padding: 10
   }
-})
+});
+
 ```
 
 <block class="endBlock syntax" />