From 726e2f9c8b22fb3263b748930039bcecbfa485e2 Mon Sep 17 00:00:00 2001
From: chirag-singhal <csinghal208@gmail.com>
Date: Thu, 13 Aug 2020 18:14:33 +0530
Subject: [PATCH] use cases for toast android

---
 .../ToastAndroidExample.android.js            | 239 ++++++++++--------
 1 file changed, 138 insertions(+), 101 deletions(-)

diff --git a/packages/rn-tester/js/examples/ToastAndroid/ToastAndroidExample.android.js b/packages/rn-tester/js/examples/ToastAndroid/ToastAndroidExample.android.js
index 27ac0e49cffe7e..329da7b9cb40ed 100644
--- a/packages/rn-tester/js/examples/ToastAndroid/ToastAndroidExample.android.js
+++ b/packages/rn-tester/js/examples/ToastAndroid/ToastAndroidExample.android.js
@@ -10,8 +10,6 @@
 
 'use strict';
 
-const RNTesterBlock = require('../../components/RNTesterBlock');
-const RNTesterPage = require('../../components/RNTesterPage');
 const React = require('react');
 
 const {
@@ -21,106 +19,109 @@ const {
   TouchableWithoutFeedback,
 } = require('react-native');
 
-type Props = $ReadOnly<{||}>;
-class ToastExample extends React.Component<Props> {
-  render(): React.Node {
-    return (
-      <RNTesterPage title="ToastAndroid">
-        <RNTesterBlock title="Simple toast">
-          <TouchableWithoutFeedback
-            onPress={() =>
-              ToastAndroid.show(
-                'This is a toast with short duration',
-                ToastAndroid.SHORT,
-              )
-            }>
-            <Text style={styles.text}>Click me.</Text>
-          </TouchableWithoutFeedback>
-        </RNTesterBlock>
-        <RNTesterBlock title="Toast with long duration">
-          <TouchableWithoutFeedback
-            onPress={() =>
-              ToastAndroid.show(
-                'This is a toast with long duration',
-                ToastAndroid.LONG,
-              )
-            }>
-            <Text style={styles.text}>Click me.</Text>
-          </TouchableWithoutFeedback>
-        </RNTesterBlock>
-        <RNTesterBlock title="Toast with top gravity">
-          <TouchableWithoutFeedback
-            onPress={() =>
-              ToastAndroid.showWithGravity(
-                'This is a toast with top gravity',
-                ToastAndroid.SHORT,
-                ToastAndroid.TOP,
-              )
-            }>
-            <Text style={styles.text}>Click me.</Text>
-          </TouchableWithoutFeedback>
-        </RNTesterBlock>
-        <RNTesterBlock title="Toast with center gravity">
-          <TouchableWithoutFeedback
-            onPress={() =>
-              ToastAndroid.showWithGravity(
-                'This is a toast with center gravity',
-                ToastAndroid.SHORT,
-                ToastAndroid.CENTER,
-              )
-            }>
-            <Text style={styles.text}>Click me.</Text>
-          </TouchableWithoutFeedback>
-        </RNTesterBlock>
-        <RNTesterBlock title="Toast with bottom gravity">
-          <TouchableWithoutFeedback
-            onPress={() =>
-              ToastAndroid.showWithGravity(
-                'This is a toast with bottom gravity',
-                ToastAndroid.SHORT,
-                ToastAndroid.BOTTOM,
-              )
-            }>
-            <Text style={styles.text}>Click me.</Text>
-          </TouchableWithoutFeedback>
-        </RNTesterBlock>
-        <RNTesterBlock title="Toast with x offset">
-          <TouchableWithoutFeedback
-            onPress={() =>
-              ToastAndroid.showWithGravityAndOffset(
-                'This is a toast with x offset',
-                ToastAndroid.SHORT,
-                ToastAndroid.CENTER,
-                50,
-                0,
-              )
-            }>
-            <Text style={styles.text}>Click me.</Text>
-          </TouchableWithoutFeedback>
-        </RNTesterBlock>
-        <RNTesterBlock title="Toast with y offset">
-          <TouchableWithoutFeedback
-            onPress={() =>
-              ToastAndroid.showWithGravityAndOffset(
-                'This is a toast with y offset',
-                ToastAndroid.SHORT,
-                ToastAndroid.BOTTOM,
-                0,
-                50,
-              )
-            }>
-            <Text style={styles.text}>Click me.</Text>
-          </TouchableWithoutFeedback>
-        </RNTesterBlock>
-      </RNTesterPage>
-    );
-  }
-}
+const ToastWithShortDuration = () => {
+  return (
+    <TouchableWithoutFeedback
+      onPress={() =>
+        ToastAndroid.show('Copied to clipboard!', ToastAndroid.SHORT)
+      }>
+      <Text style={styles.text}>Tap to view toast</Text>
+    </TouchableWithoutFeedback>
+  );
+};
+
+const ToastWithLongDuration = () => {
+  return (
+    <TouchableWithoutFeedback
+      onPress={() => ToastAndroid.show('Sending message..', ToastAndroid.LONG)}>
+      <Text style={styles.text}>Tap to view toast</Text>
+    </TouchableWithoutFeedback>
+  );
+};
+
+const ToastWithTopGravity = () => {
+  return (
+    <TouchableWithoutFeedback
+      onPress={() =>
+        ToastAndroid.showWithGravity(
+          'Download Started..',
+          ToastAndroid.SHORT,
+          ToastAndroid.TOP,
+        )
+      }>
+      <Text style={styles.text}>Tap to view toast</Text>
+    </TouchableWithoutFeedback>
+  );
+};
+
+const ToastWithCenterGravity = () => {
+  return (
+    <TouchableWithoutFeedback
+      onPress={() =>
+        ToastAndroid.showWithGravity(
+          'A problem has been occured while submitting your data.',
+          ToastAndroid.SHORT,
+          ToastAndroid.CENTER,
+        )
+      }>
+      <Text style={styles.text}>Tap to view toast</Text>
+    </TouchableWithoutFeedback>
+  );
+};
+
+const ToastWithBottomGravity = () => {
+  return (
+    <TouchableWithoutFeedback
+      onPress={() =>
+        ToastAndroid.showWithGravity(
+          'Please read the contents carefully.',
+          ToastAndroid.SHORT,
+          ToastAndroid.BOTTOM,
+        )
+      }>
+      <Text style={styles.text}>Tap to view toast</Text>
+    </TouchableWithoutFeedback>
+  );
+};
+
+const ToastWithXOffset = () => {
+  return (
+    <TouchableWithoutFeedback
+      onPress={() =>
+        ToastAndroid.showWithGravityAndOffset(
+          'Alex sent you a friend request',
+          ToastAndroid.SHORT,
+          ToastAndroid.TOP,
+          250,
+          0,
+        )
+      }>
+      <Text style={styles.text}>Tap to view toast</Text>
+    </TouchableWithoutFeedback>
+  );
+};
+
+const ToastWithYOffset = () => {
+  return (
+    <TouchableWithoutFeedback
+      onPress={() =>
+        ToastAndroid.showWithGravityAndOffset(
+          'There was a problem with your internet connection',
+          ToastAndroid.SHORT,
+          ToastAndroid.BOTTOM,
+          0,
+          100,
+        )
+      }>
+      <Text style={styles.text}>Tap to view toast</Text>
+    </TouchableWithoutFeedback>
+  );
+};
 
 const styles = StyleSheet.create({
   text: {
     color: 'black',
-  },
+  }
 });
 
 exports.title = 'Toast Example';
@@ -128,9 +129,45 @@ exports.description =
   'Example that demonstrates the use of an Android Toast to provide feedback.';
 exports.examples = [
   {
-    title: 'Basic toast',
-    render: function(): React.Element<typeof ToastExample> {
-      return <ToastExample />;
+    title: 'Toast with Short Duration',
+    render(): React.Node {
+      return <ToastWithShortDuration />;
+    },
+  },
+  {
+    title: 'Toast with Long Duration',
+    render(): React.Node {
+      return <ToastWithLongDuration />;
+    },
+  },
+  {
+    title: 'Toast with Top Gravity',
+    render(): React.Node {
+      return <ToastWithTopGravity />;
+    },
+  },
+  {
+    title: 'Toast with Center Gravity',
+    render(): React.Node {
+      return <ToastWithCenterGravity />;
+    },
+  },
+  {
+    title: 'Toast with Bottom Gravity',
+    render(): React.Node {
+      return <ToastWithBottomGravity />;
+    },
+  },
+  {
+    title: 'Toast with X Offset',
+    render(): React.Node {
+      return <ToastWithXOffset />;
+    },
+  },
+  {
+    title: 'Toast with Y Offset',
+    render(): React.Node {
+      return <ToastWithYOffset />;
     },
   },
 ];