From 38f373dcd29c2ca6fa386d4b5566e6d018c3e136 Mon Sep 17 00:00:00 2001
From: Pablo Espinosa <espipj@gmail.com>
Date: Sat, 8 Feb 2020 23:07:57 +0000
Subject: [PATCH 1/4] Ported the examples into Snack, using hooks in the
 advanced usage

---
 docs/toastandroid.md | 132 ++++++++++++++++++++++++++-----------------
 1 file changed, 79 insertions(+), 53 deletions(-)

diff --git a/docs/toastandroid.md b/docs/toastandroid.md
index 0db8e967855..8a93f7c0e67 100644
--- a/docs/toastandroid.md
+++ b/docs/toastandroid.md
@@ -14,37 +14,69 @@ The 'showWithGravityAndOffset' function adds on the ability to specify offset Th
 
 Basic usage:
 
-```jsx
-import {ToastAndroid} from 'react-native';
-
-ToastAndroid.show('A pikachu appeared nearby !', ToastAndroid.SHORT);
-ToastAndroid.showWithGravity(
-  'All Your Base Are Belong To Us',
-  ToastAndroid.SHORT,
-  ToastAndroid.CENTER,
-);
-ToastAndroid.showWithGravityAndOffset(
-  'A wild toast appeared!',
-  ToastAndroid.LONG,
-  ToastAndroid.BOTTOM,
-  25,
-  50,
-);
+```SnackPlayer name=basic-android-toast
+import React from 'react';
+import { View, StyleSheet, ToastAndroid, Button } from 'react-native';
+import Constants from 'expo-constants';
+const App = () => {
+
+  const showToast = () => {
+    ToastAndroid.show('A pikachu appeared nearby !', ToastAndroid.SHORT);
+  }
+
+  const showToastWithGravity = () => {
+    ToastAndroid.showWithGravity(
+      'All Your Base Are Belong To Us',
+      ToastAndroid.SHORT,
+      ToastAndroid.CENTER,
+    );
+  }
+
+  const showToastWithGravityAndOffset = () => {
+    ToastAndroid.showWithGravityAndOffset(
+      'A wild toast appeared!',
+      ToastAndroid.LONG,
+      ToastAndroid.BOTTOM,
+      25,
+      50,
+    );
+  }
+
+  return (
+    <View style={styles.container}>
+      <Button title="Toggle Toast" onPress={() => showToast()} />
+      <Button title="Toggle Toast With Gravity" onPress={() => showToastWithGravity()} />
+      <Button title="Toggle Toast With Gravity & Offset" onPress={() => showToastWithGravityAndOffset()} />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex:1,
+    justifyContent: 'center',
+    paddingTop: Constants.statusBarHeight,
+    backgroundColor: '#ecf0f1',
+    padding: 8,
+  }
+});
+
+export default App;
 ```
 
 ### Advanced usage:
 
 The ToastAndroid API is imperative and this might present itself as an issue, but there is actually a way(hack) to expose a declarative component from it. See an example below:
 
-```jsx
-import React, {Component} from 'react';
-import {View, Button, ToastAndroid} from 'react-native';
+```SnackPlayer name=advanced-android-toast
+import React, { useState, useEffect } from 'react';
+import { View, StyleSheet, ToastAndroid, Button } from 'react-native';
+import Constants from 'expo-constants';
 
-// a component that calls the imperative ToastAndroid API
-const Toast = (props) => {
-  if (props.visible) {
+const Toast = ({visible, message}) => {
+  if (visible) {
     ToastAndroid.showWithGravityAndOffset(
-      props.message,
+      message,
       ToastAndroid.LONG,
       ToastAndroid.BOTTOM,
       25,
@@ -55,40 +87,34 @@ const Toast = (props) => {
   return null;
 };
 
-class App extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      visible: false,
-    };
-  }
+const App = () => {
+  const [visibleToast, setvisibleToast] = useState(false);
+  
+  useEffect(() => setvisibleToast(false), [visibleToast]);
 
-  handleButtonPress = () => {
-    this.setState(
-      {
-        visible: true,
-      },
-      () => {
-        this.hideToast();
-      },
-    );
-  };
-
-  hideToast = () => {
-    this.setState({
-      visible: false,
-    });
+  const handleButtonPress = () => {
+    setvisibleToast(true);
   };
 
-  render() {
-    return (
-      <View style={styles.container}>
-        <Toast visible={this.state.visible} message="Example" />
-        <Button title="Toggle Modal" onPress={this.handleButtonPress} />
-      </View>
-    );
-  }
+  return (
+    <View style={styles.container}>
+      <Toast visible={visibleToast} message="Example" />
+      <Button title="Toggle Toast" onPress={() => handleButtonPress()} />
+    </View>
+  );
 }
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    paddingTop: Constants.statusBarHeight,
+    backgroundColor: '#ecf0f1',
+    padding: 8,
+  },
+});
+
+export default App;
 ```
 
 ---

From 702e0beeed17f8ce0558993f60f39136a6570d03 Mon Sep 17 00:00:00 2001
From: Rachel Nabors <rachelnabors@users.noreply.github.com>
Date: Mon, 10 Feb 2020 15:29:19 +0000
Subject: [PATCH 2/4] Update toastandroid.md

Prettifying code example
---
 docs/toastandroid.md | 65 ++++++++++++++++++++++++--------------------
 1 file changed, 35 insertions(+), 30 deletions(-)

diff --git a/docs/toastandroid.md b/docs/toastandroid.md
index 8a93f7c0e67..b2fc82c2e72 100644
--- a/docs/toastandroid.md
+++ b/docs/toastandroid.md
@@ -15,49 +15,54 @@ The 'showWithGravityAndOffset' function adds on the ability to specify offset Th
 Basic usage:
 
 ```SnackPlayer name=basic-android-toast
-import React from 'react';
-import { View, StyleSheet, ToastAndroid, Button } from 'react-native';
-import Constants from 'expo-constants';
+import React from "react";
+import { View, StyleSheet, ToastAndroid, Button } from "react-native";
+import Constants from "expo-constants";
 const App = () => {
-
   const showToast = () => {
-    ToastAndroid.show('A pikachu appeared nearby !', ToastAndroid.SHORT);
-  }
+    ToastAndroid.show("A pikachu appeared nearby !", ToastAndroid.SHORT);
+  };
 
   const showToastWithGravity = () => {
     ToastAndroid.showWithGravity(
-      'All Your Base Are Belong To Us',
+      "All Your Base Are Belong To Us",
       ToastAndroid.SHORT,
-      ToastAndroid.CENTER,
+      ToastAndroid.CENTER
     );
-  }
+  };
 
   const showToastWithGravityAndOffset = () => {
     ToastAndroid.showWithGravityAndOffset(
-      'A wild toast appeared!',
+      "A wild toast appeared!",
       ToastAndroid.LONG,
       ToastAndroid.BOTTOM,
       25,
-      50,
+      50
     );
-  }
+  };
 
   return (
     <View style={styles.container}>
       <Button title="Toggle Toast" onPress={() => showToast()} />
-      <Button title="Toggle Toast With Gravity" onPress={() => showToastWithGravity()} />
-      <Button title="Toggle Toast With Gravity & Offset" onPress={() => showToastWithGravityAndOffset()} />
+      <Button
+        title="Toggle Toast With Gravity"
+        onPress={() => showToastWithGravity()}
+      />
+      <Button
+        title="Toggle Toast With Gravity & Offset"
+        onPress={() => showToastWithGravityAndOffset()}
+      />
     </View>
   );
-}
+};
 
 const styles = StyleSheet.create({
   container: {
-    flex:1,
-    justifyContent: 'center',
+    flex: 1,
+    justifyContent: "center",
     paddingTop: Constants.statusBarHeight,
-    backgroundColor: '#ecf0f1',
-    padding: 8,
+    backgroundColor: "#ecf0f1",
+    padding: 8
   }
 });
 
@@ -69,18 +74,18 @@ export default App;
 The ToastAndroid API is imperative and this might present itself as an issue, but there is actually a way(hack) to expose a declarative component from it. See an example below:
 
 ```SnackPlayer name=advanced-android-toast
-import React, { useState, useEffect } from 'react';
-import { View, StyleSheet, ToastAndroid, Button } from 'react-native';
-import Constants from 'expo-constants';
+import React, { useState, useEffect } from "react";
+import { View, StyleSheet, ToastAndroid, Button } from "react-native";
+import Constants from "expo-constants";
 
-const Toast = ({visible, message}) => {
+const Toast = ({ visible, message }) => {
   if (visible) {
     ToastAndroid.showWithGravityAndOffset(
       message,
       ToastAndroid.LONG,
       ToastAndroid.BOTTOM,
       25,
-      50,
+      50
     );
     return null;
   }
@@ -89,7 +94,7 @@ const Toast = ({visible, message}) => {
 
 const App = () => {
   const [visibleToast, setvisibleToast] = useState(false);
-  
+
   useEffect(() => setvisibleToast(false), [visibleToast]);
 
   const handleButtonPress = () => {
@@ -102,16 +107,16 @@ const App = () => {
       <Button title="Toggle Toast" onPress={() => handleButtonPress()} />
     </View>
   );
-}
+};
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    justifyContent: 'center',
+    justifyContent: "center",
     paddingTop: Constants.statusBarHeight,
-    backgroundColor: '#ecf0f1',
-    padding: 8,
-  },
+    backgroundColor: "#ecf0f1",
+    padding: 8
+  }
 });
 
 export default App;

From fbad5a42045f0ee21f8ef324b591c61d3df20bd4 Mon Sep 17 00:00:00 2001
From: Rachel Nabors <rachelnabors@users.noreply.github.com>
Date: Mon, 10 Feb 2020 15:33:16 +0000
Subject: [PATCH 3/4] Update toastandroid.md

Specifying Android-only in Snacks
---
 docs/toastandroid.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/toastandroid.md b/docs/toastandroid.md
index b2fc82c2e72..a78b2e80ce2 100644
--- a/docs/toastandroid.md
+++ b/docs/toastandroid.md
@@ -14,7 +14,7 @@ The 'showWithGravityAndOffset' function adds on the ability to specify offset Th
 
 Basic usage:
 
-```SnackPlayer name=basic-android-toast
+```SnackPlayer name=Toast%20Android%20API%20Example&supportedPlatforms=android
 import React from "react";
 import { View, StyleSheet, ToastAndroid, Button } from "react-native";
 import Constants from "expo-constants";
@@ -73,7 +73,7 @@ export default App;
 
 The ToastAndroid API is imperative and this might present itself as an issue, but there is actually a way(hack) to expose a declarative component from it. See an example below:
 
-```SnackPlayer name=advanced-android-toast
+```SnackPlayer name=Advanced%20Toast%20Android%20API%20Example&supportedPlatforms=android
 import React, { useState, useEffect } from "react";
 import { View, StyleSheet, ToastAndroid, Button } from "react-native";
 import Constants from "expo-constants";

From 43497c1b962c36fc0eaf7503b6a12d343df75225 Mon Sep 17 00:00:00 2001
From: Rachel Nabors <rachelnabors@users.noreply.github.com>
Date: Mon, 17 Feb 2020 14:01:48 +0000
Subject: [PATCH 4/4] Update toastandroid.md

Clarifying text a bit. Think this would work better with the method explanations inline with the methods, but we are still working on a standardized formate for these reference docs
---
 docs/toastandroid.md | 20 +++++++++-----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/docs/toastandroid.md b/docs/toastandroid.md
index a78b2e80ce2..799586e74a6 100644
--- a/docs/toastandroid.md
+++ b/docs/toastandroid.md
@@ -3,16 +3,14 @@ id: toastandroid
 title: ToastAndroid
 ---
 
-This exposes the native ToastAndroid module as a JS module. This has a function 'show' which takes the following parameters:
+React Native's ToastAndroid API exposes the Android platform's ToastAndroid module as a JS module. It provides the method `show(message, duration)` which takes the following parameters:
 
-1. String message: A string with the text to toast
-2. int duration: The duration of the toast. May be ToastAndroid.SHORT or ToastAndroid.LONG
+* _message_ A string with the text to toast
+* _duration_ The duration of the toast—either `ToastAndroid.SHORT` or `ToastAndroid.LONG`
 
-There is also a function `showWithGravity` to specify the layout gravity. May be ToastAndroid.TOP, ToastAndroid.BOTTOM, ToastAndroid.CENTER.
+You can alternatively use `showWithGravity(message, duration, gravity)` to specify where the toast appears in the screen's layout. May be `ToastAndroid.TOP`, `ToastAndroid.BOTTOM` or `ToastAndroid.CENTER`.
 
-The 'showWithGravityAndOffset' function adds on the ability to specify offset These offset values will translate to pixels.
-
-Basic usage:
+The 'showWithGravityAndOffset(message, duration, gravity, xOffset, yOffset)' method adds the ability to specify an offset with in pixels.
 
 ```SnackPlayer name=Toast%20Android%20API%20Example&supportedPlatforms=android
 import React from "react";
@@ -61,7 +59,7 @@ const styles = StyleSheet.create({
     flex: 1,
     justifyContent: "center",
     paddingTop: Constants.statusBarHeight,
-    backgroundColor: "#ecf0f1",
+    backgroundColor: "#888888",
     padding: 8
   }
 });
@@ -69,9 +67,9 @@ const styles = StyleSheet.create({
 export default App;
 ```
 
-### Advanced usage:
+### Imperative hack
 
-The ToastAndroid API is imperative and this might present itself as an issue, but there is actually a way(hack) to expose a declarative component from it. See an example below:
+The ToastAndroid API is imperative, but there is a way to expose a declarative component from it as in this example:
 
 ```SnackPlayer name=Advanced%20Toast%20Android%20API%20Example&supportedPlatforms=android
 import React, { useState, useEffect } from "react";
@@ -114,7 +112,7 @@ const styles = StyleSheet.create({
     flex: 1,
     justifyContent: "center",
     paddingTop: Constants.statusBarHeight,
-    backgroundColor: "#ecf0f1",
+    backgroundColor: "#888888",
     padding: 8
   }
 });