From ad63e9fa2ac615f85036243bd1deb3abe076e2bb Mon Sep 17 00:00:00 2001 From: Website Deployment Script Date: Tue, 25 Sep 2018 19:48:08 +0000 Subject: [PATCH] Deploy website Deploy website version based on 12da1247fdedc6e7dbfc6d7d668f3ccdbf35d1ae --- docs/next/toastandroid.html | 64 ++++++++++++++++++++++++++++++- docs/next/toastandroid/index.html | 64 ++++++++++++++++++++++++++++++- 2 files changed, 126 insertions(+), 2 deletions(-) diff --git a/docs/next/toastandroid.html b/docs/next/toastandroid.html index 6b4cad3d224..fe5a076de77 100644 --- a/docs/next/toastandroid.html +++ b/docs/next/toastandroid.html @@ -41,7 +41,9 @@

There is also a function showWithGravity to specify the layout gravity. May be ToastAndroid.TOP, ToastAndroid.BOTTOM, ToastAndroid.CENTER.

The 'showWithGravityAndOffset' function adds on the ability to specify offset These offset values will translate to pixels.

Basic usage:

-
ToastAndroid.show('A pikachu appeared nearby !', ToastAndroid.SHORT);
+
import { ToastAndroid } from 'react-native'; 
+
+ToastAndroid.show('A pikachu appeared nearby !', ToastAndroid.SHORT);
 ToastAndroid.showWithGravity(
   'All Your Base Are Belong To Us',
   ToastAndroid.SHORT,
@@ -55,6 +57,66 @@ ToastAndroid.showWithGravityAndOffset(
   50
 );
 

+
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:

+
import React, { Component } from 'react';
+import {
+  View,
+  Button,
+  ToastAndroid,
+} from 'react-native';
+
+// a component that calls the imperative ToastAndroid API
+const Toast = (props) => {
+  if (props.visible) {
+    ToastAndroid.showWithGravityAndOffset(
+      props.message,
+      ToastAndroid.LONG,
+      ToastAndroid.BOTTOM,
+      25,
+      50
+    );
+    return null;
+  }
+  return null;
+};
+
+class App extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      visible: false,
+    };
+  }
+
+  handleButtonPress = () => {
+    this.setState({
+        visible: true,
+    }, () => {
+      this.hideToast();
+    });
+  };
+
+  hideToast = () => {
+    this.setState({
+      visible: false
+    })
+  }
+
+  render() {
+    return (
+      <View style={styles.container}>
+        <Toast
+          visible={this.state.visible}
+          message="Example"
+        />
+        <Button title="Toggle Modal" onPress={this.handleButtonPress} />
+      </View>
+    );
+  }
+}
+

 
Methods

 
    
 
  • show
    • 
diff --git a/docs/next/toastandroid/index.html b/docs/next/toastandroid/index.html
index 6b4cad3d224..fe5a076de77 100644
--- a/docs/next/toastandroid/index.html
+++ b/docs/next/toastandroid/index.html
@@ -41,7 +41,9 @@
 
    There is also a function showWithGravity to specify the layout gravity. May be ToastAndroid.TOP, ToastAndroid.BOTTOM, ToastAndroid.CENTER.
    
 
    The 'showWithGravityAndOffset' function adds on the ability to specify offset These offset values will translate to pixels.
    
 
    Basic usage:
    
-
    ToastAndroid.show('A pikachu appeared nearby !', ToastAndroid.SHORT);
+
    import { ToastAndroid } from 'react-native'; 
+
+ToastAndroid.show('A pikachu appeared nearby !', ToastAndroid.SHORT);
 ToastAndroid.showWithGravity(
   'All Your Base Are Belong To Us',
   ToastAndroid.SHORT,
@@ -55,6 +57,66 @@ ToastAndroid.showWithGravityAndOffset(
   50
 );
 
    
+
    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:
    
+
    import React, { Component } from 'react';
+import {
+  View,
+  Button,
+  ToastAndroid,
+} from 'react-native';
+
+// a component that calls the imperative ToastAndroid API
+const Toast = (props) => {
+  if (props.visible) {
+    ToastAndroid.showWithGravityAndOffset(
+      props.message,
+      ToastAndroid.LONG,
+      ToastAndroid.BOTTOM,
+      25,
+      50
+    );
+    return null;
+  }
+  return null;
+};
+
+class App extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      visible: false,
+    };
+  }
+
+  handleButtonPress = () => {
+    this.setState({
+        visible: true,
+    }, () => {
+      this.hideToast();
+    });
+  };
+
+  hideToast = () => {
+    this.setState({
+      visible: false
+    })
+  }
+
+  render() {
+    return (
+      <View style={styles.container}>
+        <Toast
+          visible={this.state.visible}
+          message="Example"
+        />
+        <Button title="Toggle Modal" onPress={this.handleButtonPress} />
+      </View>
+    );
+  }
+}
+
    
 
    Methods