Deploy website

Deploy website version based on 62b1ae249480528e983d2595bcd006e688a6ce65

docs/next/height-and-width.html

@@ -71,10 +71,10 @@
         </script></nav></div><div class="container mainContainer docsContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/height-and-width.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 id="__docusaurus" class="postHeaderTitle">Height and Width</h1></header><article><div><span><p>A component's height and width determine its size on the screen.</p>
 <h2><a class="anchor" aria-hidden="true" id="fixed-dimensions"></a><a href="#fixed-dimensions" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Fixed Dimensions</h2>
 <p>The general way to set the dimensions of a component is by adding a fixed <code>width</code> and <code>height</code> to style. All dimensions in React Native are unitless, and represent density-independent pixels.</p>
-<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React, { Component } <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
+<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
 <span class="hljs-keyword">import</span> { View } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
 
-<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">FixedDimensionsBasics</span>(<span class="hljs-params"></span>) </span>{
+<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> FixedDimensionsBasics = <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
     <span class="hljs-keyword">return</span> (
       &lt;View&gt;
         &lt;View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} /&gt;
@@ -86,7 +86,7 @@
 </code></pre></div><div class="desktop-friendly-snack" style="margin-top: 15px; margin-bottom: 15px"><div
         data-snack-name="Height and Width"
         data-snack-description="Example usage"
-        data-snack-code="import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20View%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20function%20FixedDimensionsBasics()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7B%7Bwidth%3A%2050%2C%20height%3A%2050%2C%20backgroundColor%3A%20'powderblue'%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7B%7Bwidth%3A%20100%2C%20height%3A%20100%2C%20backgroundColor%3A%20'skyblue'%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7B%7Bwidth%3A%20150%2C%20height%3A%20150%2C%20backgroundColor%3A%20'steelblue'%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%7D%0A"
+        data-snack-code="import%20React%20from%20'react'%3B%0Aimport%20%7B%20View%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20FixedDimensionsBasics%20%3D%20()%20%3D%3E%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7B%7Bwidth%3A%2050%2C%20height%3A%2050%2C%20backgroundColor%3A%20'powderblue'%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7B%7Bwidth%3A%20100%2C%20height%3A%20100%2C%20backgroundColor%3A%20'skyblue'%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7B%7Bwidth%3A%20150%2C%20height%3A%20150%2C%20backgroundColor%3A%20'steelblue'%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%7D%0A"
         data-snack-platform="web"
         data-snack-supported-platforms=ios,android,web
         data-snack-preview="true"
@@ -104,10 +104,10 @@
 <blockquote>
 <p>A component can only expand to fill available space if its parent has dimensions greater than 0. If a parent does not have either a fixed <code>width</code> and <code>height</code> or <code>flex</code>, the parent will have dimensions of 0 and the <code>flex</code> children will not be visible.</p>
 </blockquote>
-<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React, { Component } <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
+<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
 <span class="hljs-keyword">import</span> { View } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
 
-<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">FlexDimensionsBasics</span>(<span class="hljs-params"></span>) </span>{
+<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> FlexDimensionsBasics = <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
     <span class="hljs-keyword">return</span> (
       <span class="hljs-comment">// Try removing the `flex: 1` on the parent View.</span>
       <span class="hljs-comment">// The parent will not have dimensions, so the children can't expand.</span>
@@ -122,7 +122,7 @@
 </code></pre></div><div class="desktop-friendly-snack" style="margin-top: 15px; margin-bottom: 15px"><div
         data-snack-name="Flex Dimensions"
         data-snack-description="Example usage"
-        data-snack-code="import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20View%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20function%20FlexDimensionsBasics()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%2F%2F%20Try%20removing%20the%20%60flex%3A%201%60%20on%20the%20parent%20View.%0A%20%20%20%20%20%20%2F%2F%20The%20parent%20will%20not%20have%20dimensions%2C%20so%20the%20children%20can't%20expand.%0A%20%20%20%20%20%20%2F%2F%20What%20if%20you%20add%20%60height%3A%20300%60%20instead%20of%20%60flex%3A%201%60%3F%0A%20%20%20%20%20%20%3CView%20style%3D%7B%7Bflex%3A%201%7D%7D%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7B%7Bflex%3A%201%2C%20backgroundColor%3A%20'powderblue'%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7B%7Bflex%3A%202%2C%20backgroundColor%3A%20'skyblue'%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7B%7Bflex%3A%203%2C%20backgroundColor%3A%20'steelblue'%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%7D%0A"
+        data-snack-code="import%20React%20from%20'react'%3B%0Aimport%20%7B%20View%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20FlexDimensionsBasics%20%3D%20()%20%3D%3E%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%2F%2F%20Try%20removing%20the%20%60flex%3A%201%60%20on%20the%20parent%20View.%0A%20%20%20%20%20%20%2F%2F%20The%20parent%20will%20not%20have%20dimensions%2C%20so%20the%20children%20can't%20expand.%0A%20%20%20%20%20%20%2F%2F%20What%20if%20you%20add%20%60height%3A%20300%60%20instead%20of%20%60flex%3A%201%60%3F%0A%20%20%20%20%20%20%3CView%20style%3D%7B%7Bflex%3A%201%7D%7D%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7B%7Bflex%3A%201%2C%20backgroundColor%3A%20'powderblue'%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7B%7Bflex%3A%202%2C%20backgroundColor%3A%20'skyblue'%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7B%7Bflex%3A%203%2C%20backgroundColor%3A%20'steelblue'%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%7D%0A"
         data-snack-platform="web"
         data-snack-supported-platforms=ios,android,web
         data-snack-preview="true"

docs/next/height-and-width/index.html

@@ -71,10 +71,10 @@
         </script></nav></div><div class="container mainContainer docsContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/height-and-width.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 id="__docusaurus" class="postHeaderTitle">Height and Width</h1></header><article><div><span><p>A component's height and width determine its size on the screen.</p>
 <h2><a class="anchor" aria-hidden="true" id="fixed-dimensions"></a><a href="#fixed-dimensions" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Fixed Dimensions</h2>
 <p>The general way to set the dimensions of a component is by adding a fixed <code>width</code> and <code>height</code> to style. All dimensions in React Native are unitless, and represent density-independent pixels.</p>
-<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React, { Component } <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
+<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
 <span class="hljs-keyword">import</span> { View } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
 
-<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">FixedDimensionsBasics</span>(<span class="hljs-params"></span>) </span>{
+<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> FixedDimensionsBasics = <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
     <span class="hljs-keyword">return</span> (
       &lt;View&gt;
         &lt;View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} /&gt;
@@ -86,7 +86,7 @@
 </code></pre></div><div class="desktop-friendly-snack" style="margin-top: 15px; margin-bottom: 15px"><div
         data-snack-name="Height and Width"
         data-snack-description="Example usage"
-        data-snack-code="import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20View%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20function%20FixedDimensionsBasics()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7B%7Bwidth%3A%2050%2C%20height%3A%2050%2C%20backgroundColor%3A%20'powderblue'%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7B%7Bwidth%3A%20100%2C%20height%3A%20100%2C%20backgroundColor%3A%20'skyblue'%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7B%7Bwidth%3A%20150%2C%20height%3A%20150%2C%20backgroundColor%3A%20'steelblue'%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%7D%0A"
+        data-snack-code="import%20React%20from%20'react'%3B%0Aimport%20%7B%20View%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20FixedDimensionsBasics%20%3D%20()%20%3D%3E%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7B%7Bwidth%3A%2050%2C%20height%3A%2050%2C%20backgroundColor%3A%20'powderblue'%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7B%7Bwidth%3A%20100%2C%20height%3A%20100%2C%20backgroundColor%3A%20'skyblue'%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7B%7Bwidth%3A%20150%2C%20height%3A%20150%2C%20backgroundColor%3A%20'steelblue'%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%7D%0A"
         data-snack-platform="web"
         data-snack-supported-platforms=ios,android,web
         data-snack-preview="true"
@@ -104,10 +104,10 @@
 <blockquote>
 <p>A component can only expand to fill available space if its parent has dimensions greater than 0. If a parent does not have either a fixed <code>width</code> and <code>height</code> or <code>flex</code>, the parent will have dimensions of 0 and the <code>flex</code> children will not be visible.</p>
 </blockquote>
-<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React, { Component } <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
+<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
 <span class="hljs-keyword">import</span> { View } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
 
-<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">FlexDimensionsBasics</span>(<span class="hljs-params"></span>) </span>{
+<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> FlexDimensionsBasics = <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
     <span class="hljs-keyword">return</span> (
       <span class="hljs-comment">// Try removing the `flex: 1` on the parent View.</span>
       <span class="hljs-comment">// The parent will not have dimensions, so the children can't expand.</span>
@@ -122,7 +122,7 @@
 </code></pre></div><div class="desktop-friendly-snack" style="margin-top: 15px; margin-bottom: 15px"><div
         data-snack-name="Flex Dimensions"
         data-snack-description="Example usage"
-        data-snack-code="import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20View%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20function%20FlexDimensionsBasics()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%2F%2F%20Try%20removing%20the%20%60flex%3A%201%60%20on%20the%20parent%20View.%0A%20%20%20%20%20%20%2F%2F%20The%20parent%20will%20not%20have%20dimensions%2C%20so%20the%20children%20can't%20expand.%0A%20%20%20%20%20%20%2F%2F%20What%20if%20you%20add%20%60height%3A%20300%60%20instead%20of%20%60flex%3A%201%60%3F%0A%20%20%20%20%20%20%3CView%20style%3D%7B%7Bflex%3A%201%7D%7D%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7B%7Bflex%3A%201%2C%20backgroundColor%3A%20'powderblue'%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7B%7Bflex%3A%202%2C%20backgroundColor%3A%20'skyblue'%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7B%7Bflex%3A%203%2C%20backgroundColor%3A%20'steelblue'%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%7D%0A"
+        data-snack-code="import%20React%20from%20'react'%3B%0Aimport%20%7B%20View%20%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20FlexDimensionsBasics%20%3D%20()%20%3D%3E%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%2F%2F%20Try%20removing%20the%20%60flex%3A%201%60%20on%20the%20parent%20View.%0A%20%20%20%20%20%20%2F%2F%20The%20parent%20will%20not%20have%20dimensions%2C%20so%20the%20children%20can't%20expand.%0A%20%20%20%20%20%20%2F%2F%20What%20if%20you%20add%20%60height%3A%20300%60%20instead%20of%20%60flex%3A%201%60%3F%0A%20%20%20%20%20%20%3CView%20style%3D%7B%7Bflex%3A%201%7D%7D%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7B%7Bflex%3A%201%2C%20backgroundColor%3A%20'powderblue'%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7B%7Bflex%3A%202%2C%20backgroundColor%3A%20'skyblue'%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CView%20style%3D%7B%7Bflex%3A%203%2C%20backgroundColor%3A%20'steelblue'%7D%7D%20%2F%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%7D%0A"
         data-snack-platform="web"
         data-snack-supported-platforms=ios,android,web
         data-snack-preview="true"

docs/next/interactionmanager.html

@@ -134,7 +134,8 @@ InteractionManager<span class="token punctuation">.</span><span class="token fun
 
   <span class="hljs-comment">// Running a method after the animation</span>
   useMount(<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
-    InteractionManager.runAfterInteractions(<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> onShown());
+    <span class="hljs-keyword">const</span> interactionPromise = InteractionManager.runAfterInteractions(<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> onShown());
+    <span class="hljs-keyword">return</span> <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> interactionPromise.cancel();
   });
 
   <span class="hljs-keyword">return</span> &lt;Animated.View style={[styles.ball, { opacity }]} /&gt;;
@@ -164,7 +165,7 @@ const styles = StyleSheet.create({
 </code></pre></div><div class="desktop-friendly-snack" style="margin-top: 15px; margin-bottom: 15px"><div
         data-snack-name="InteractionManager Function Component Basic Example"
         data-snack-description="Example usage"
-        data-snack-code="import%20React%2C%20%7B%20useState%2C%20useEffect%20%7D%20from%20%22react%22%3B%0Aimport%20%7B%0A%20%20Alert%2C%0A%20%20Animated%2C%0A%20%20InteractionManager%2C%0A%20%20Platform%2C%0A%20%20StyleSheet%2C%0A%20%20Text%2C%0A%20%20View%2C%0A%7D%20from%20%22react-native%22%3B%0A%0Aconst%20instructions%20%3D%20Platform.select(%7B%0A%20%20ios%3A%20%22Press%20Cmd%2BR%20to%20reload%2C%5Cn%22%20%2B%20%22Cmd%2BD%20or%20shake%20for%20dev%20menu%22%2C%0A%20%20android%3A%0A%20%20%20%20%22Double%20tap%20R%20on%20your%20keyboard%20to%20reload%2C%5Cn%22%20%2B%0A%20%20%20%20%22Shake%20or%20press%20menu%20button%20for%20dev%20menu%22%2C%0A%7D)%3B%0A%0Aconst%20useMount%20%3D%20func%20%3D%3E%20useEffect(()%20%3D%3E%20func()%2C%20%5B%5D)%3B%0A%0Aconst%20useFadeIn%20%3D%20(duration%20%3D%205000)%20%3D%3E%20%7B%0A%20%20const%20%5Bopacity%5D%20%3D%20useState(new%20Animated.Value(0))%3B%0A%0A%20%20%2F%2F%20Running%20the%20animation%20when%20the%20component%20is%20mounted%0A%20%20useMount(()%20%3D%3E%20%7B%0A%20%20%20%20%2F%2F%20Animated.timing()%20create%20a%20interaction%20handle%20by%20default%2C%20if%20you%20want%20to%20disabled%20that%0A%20%20%20%20%2F%2F%20behaviour%20you%20can%20set%20isInteraction%20to%20false%20to%20disabled%20that.%0A%20%20%20%20Animated.timing(opacity%2C%20%7B%0A%20%20%20%20%20%20toValue%3A%201%2C%0A%20%20%20%20%20%20duration%2C%0A%20%20%20%20%7D).start()%3B%0A%20%20%7D)%3B%0A%0A%20%20return%20opacity%3B%0A%7D%3B%0A%0Aconst%20Ball%20%3D%20(%7B%20onShown%20%7D)%20%3D%3E%20%7B%0A%20%20const%20opacity%20%3D%20useFadeIn()%3B%0A%0A%20%20%2F%2F%20Running%20a%20method%20after%20the%20animation%0A%20%20useMount(()%20%3D%3E%20%7B%0A%20%20%20%20InteractionManager.runAfterInteractions(()%20%3D%3E%20onShown())%3B%0A%20%20%7D)%3B%0A%0A%20%20return%20%3CAnimated.View%20style%3D%7B%5Bstyles.ball%2C%20%7B%20opacity%20%7D%5D%7D%20%2F%3E%3B%0A%7D%3B%0A%0Aconst%20App%20%3D%20()%20%3D%3E%20%7B%0A%20%20return%20(%0A%20%20%20%20%3CView%20style%3D%7Bstyles.container%7D%3E%0A%20%20%20%20%20%20%3CText%3E%7Binstructions%7D%3C%2FText%3E%0A%20%20%20%20%20%20%3CBall%20onShown%3D%7B()%20%3D%3E%20Alert.alert(%22Animation%20is%20done%22)%7D%20%2F%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20)%3B%0A%7D%3B%0A%0Aexport%20default%20App%3B%0A%0Aconst%20styles%20%3D%20StyleSheet.create(%7B%0A%20%20container%3A%20%7B%20flex%3A%201%2C%20justifyContent%3A%20%22center%22%2C%20alignItems%3A%20%22center%22%20%7D%2C%0A%20%20ball%3A%20%7B%0A%20%20%20%20width%3A%20100%2C%0A%20%20%20%20height%3A%20100%2C%0A%20%20%20%20backgroundColor%3A%20%22salmon%22%2C%0A%20%20%20%20borderRadius%3A%20100%2C%0A%20%20%7D%2C%0A%7D)%3B%0A%0A"
+        data-snack-code="import%20React%2C%20%7B%20useState%2C%20useEffect%20%7D%20from%20%22react%22%3B%0Aimport%20%7B%0A%20%20Alert%2C%0A%20%20Animated%2C%0A%20%20InteractionManager%2C%0A%20%20Platform%2C%0A%20%20StyleSheet%2C%0A%20%20Text%2C%0A%20%20View%2C%0A%7D%20from%20%22react-native%22%3B%0A%0Aconst%20instructions%20%3D%20Platform.select(%7B%0A%20%20ios%3A%20%22Press%20Cmd%2BR%20to%20reload%2C%5Cn%22%20%2B%20%22Cmd%2BD%20or%20shake%20for%20dev%20menu%22%2C%0A%20%20android%3A%0A%20%20%20%20%22Double%20tap%20R%20on%20your%20keyboard%20to%20reload%2C%5Cn%22%20%2B%0A%20%20%20%20%22Shake%20or%20press%20menu%20button%20for%20dev%20menu%22%2C%0A%7D)%3B%0A%0Aconst%20useMount%20%3D%20func%20%3D%3E%20useEffect(()%20%3D%3E%20func()%2C%20%5B%5D)%3B%0A%0Aconst%20useFadeIn%20%3D%20(duration%20%3D%205000)%20%3D%3E%20%7B%0A%20%20const%20%5Bopacity%5D%20%3D%20useState(new%20Animated.Value(0))%3B%0A%0A%20%20%2F%2F%20Running%20the%20animation%20when%20the%20component%20is%20mounted%0A%20%20useMount(()%20%3D%3E%20%7B%0A%20%20%20%20%2F%2F%20Animated.timing()%20create%20a%20interaction%20handle%20by%20default%2C%20if%20you%20want%20to%20disabled%20that%0A%20%20%20%20%2F%2F%20behaviour%20you%20can%20set%20isInteraction%20to%20false%20to%20disabled%20that.%0A%20%20%20%20Animated.timing(opacity%2C%20%7B%0A%20%20%20%20%20%20toValue%3A%201%2C%0A%20%20%20%20%20%20duration%2C%0A%20%20%20%20%7D).start()%3B%0A%20%20%7D)%3B%0A%0A%20%20return%20opacity%3B%0A%7D%3B%0A%0Aconst%20Ball%20%3D%20(%7B%20onShown%20%7D)%20%3D%3E%20%7B%0A%20%20const%20opacity%20%3D%20useFadeIn()%3B%0A%0A%20%20%2F%2F%20Running%20a%20method%20after%20the%20animation%0A%20%20useMount(()%20%3D%3E%20%7B%0A%20%20%20%20const%20interactionPromise%20%3D%20InteractionManager.runAfterInteractions(()%20%3D%3E%20onShown())%3B%0A%20%20%20%20return%20()%20%3D%3E%20interactionPromise.cancel()%3B%0A%20%20%7D)%3B%0A%0A%20%20return%20%3CAnimated.View%20style%3D%7B%5Bstyles.ball%2C%20%7B%20opacity%20%7D%5D%7D%20%2F%3E%3B%0A%7D%3B%0A%0Aconst%20App%20%3D%20()%20%3D%3E%20%7B%0A%20%20return%20(%0A%20%20%20%20%3CView%20style%3D%7Bstyles.container%7D%3E%0A%20%20%20%20%20%20%3CText%3E%7Binstructions%7D%3C%2FText%3E%0A%20%20%20%20%20%20%3CBall%20onShown%3D%7B()%20%3D%3E%20Alert.alert(%22Animation%20is%20done%22)%7D%20%2F%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20)%3B%0A%7D%3B%0A%0Aexport%20default%20App%3B%0A%0Aconst%20styles%20%3D%20StyleSheet.create(%7B%0A%20%20container%3A%20%7B%20flex%3A%201%2C%20justifyContent%3A%20%22center%22%2C%20alignItems%3A%20%22center%22%20%7D%2C%0A%20%20ball%3A%20%7B%0A%20%20%20%20width%3A%20100%2C%0A%20%20%20%20height%3A%20100%2C%0A%20%20%20%20backgroundColor%3A%20%22salmon%22%2C%0A%20%20%20%20borderRadius%3A%20100%2C%0A%20%20%7D%2C%0A%7D)%3B%0A%0A"
         data-snack-platform="web"
         data-snack-supported-platforms=ios,android
         data-snack-preview="true"

docs/next/interactionmanager/index.html

@@ -134,7 +134,8 @@ InteractionManager<span class="token punctuation">.</span><span class="token fun
 
   <span class="hljs-comment">// Running a method after the animation</span>
   useMount(<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
-    InteractionManager.runAfterInteractions(<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> onShown());
+    <span class="hljs-keyword">const</span> interactionPromise = InteractionManager.runAfterInteractions(<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> onShown());
+    <span class="hljs-keyword">return</span> <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> interactionPromise.cancel();
   });
 
   <span class="hljs-keyword">return</span> &lt;Animated.View style={[styles.ball, { opacity }]} /&gt;;
@@ -164,7 +165,7 @@ const styles = StyleSheet.create({
 </code></pre></div><div class="desktop-friendly-snack" style="margin-top: 15px; margin-bottom: 15px"><div
         data-snack-name="InteractionManager Function Component Basic Example"
         data-snack-description="Example usage"
-        data-snack-code="import%20React%2C%20%7B%20useState%2C%20useEffect%20%7D%20from%20%22react%22%3B%0Aimport%20%7B%0A%20%20Alert%2C%0A%20%20Animated%2C%0A%20%20InteractionManager%2C%0A%20%20Platform%2C%0A%20%20StyleSheet%2C%0A%20%20Text%2C%0A%20%20View%2C%0A%7D%20from%20%22react-native%22%3B%0A%0Aconst%20instructions%20%3D%20Platform.select(%7B%0A%20%20ios%3A%20%22Press%20Cmd%2BR%20to%20reload%2C%5Cn%22%20%2B%20%22Cmd%2BD%20or%20shake%20for%20dev%20menu%22%2C%0A%20%20android%3A%0A%20%20%20%20%22Double%20tap%20R%20on%20your%20keyboard%20to%20reload%2C%5Cn%22%20%2B%0A%20%20%20%20%22Shake%20or%20press%20menu%20button%20for%20dev%20menu%22%2C%0A%7D)%3B%0A%0Aconst%20useMount%20%3D%20func%20%3D%3E%20useEffect(()%20%3D%3E%20func()%2C%20%5B%5D)%3B%0A%0Aconst%20useFadeIn%20%3D%20(duration%20%3D%205000)%20%3D%3E%20%7B%0A%20%20const%20%5Bopacity%5D%20%3D%20useState(new%20Animated.Value(0))%3B%0A%0A%20%20%2F%2F%20Running%20the%20animation%20when%20the%20component%20is%20mounted%0A%20%20useMount(()%20%3D%3E%20%7B%0A%20%20%20%20%2F%2F%20Animated.timing()%20create%20a%20interaction%20handle%20by%20default%2C%20if%20you%20want%20to%20disabled%20that%0A%20%20%20%20%2F%2F%20behaviour%20you%20can%20set%20isInteraction%20to%20false%20to%20disabled%20that.%0A%20%20%20%20Animated.timing(opacity%2C%20%7B%0A%20%20%20%20%20%20toValue%3A%201%2C%0A%20%20%20%20%20%20duration%2C%0A%20%20%20%20%7D).start()%3B%0A%20%20%7D)%3B%0A%0A%20%20return%20opacity%3B%0A%7D%3B%0A%0Aconst%20Ball%20%3D%20(%7B%20onShown%20%7D)%20%3D%3E%20%7B%0A%20%20const%20opacity%20%3D%20useFadeIn()%3B%0A%0A%20%20%2F%2F%20Running%20a%20method%20after%20the%20animation%0A%20%20useMount(()%20%3D%3E%20%7B%0A%20%20%20%20InteractionManager.runAfterInteractions(()%20%3D%3E%20onShown())%3B%0A%20%20%7D)%3B%0A%0A%20%20return%20%3CAnimated.View%20style%3D%7B%5Bstyles.ball%2C%20%7B%20opacity%20%7D%5D%7D%20%2F%3E%3B%0A%7D%3B%0A%0Aconst%20App%20%3D%20()%20%3D%3E%20%7B%0A%20%20return%20(%0A%20%20%20%20%3CView%20style%3D%7Bstyles.container%7D%3E%0A%20%20%20%20%20%20%3CText%3E%7Binstructions%7D%3C%2FText%3E%0A%20%20%20%20%20%20%3CBall%20onShown%3D%7B()%20%3D%3E%20Alert.alert(%22Animation%20is%20done%22)%7D%20%2F%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20)%3B%0A%7D%3B%0A%0Aexport%20default%20App%3B%0A%0Aconst%20styles%20%3D%20StyleSheet.create(%7B%0A%20%20container%3A%20%7B%20flex%3A%201%2C%20justifyContent%3A%20%22center%22%2C%20alignItems%3A%20%22center%22%20%7D%2C%0A%20%20ball%3A%20%7B%0A%20%20%20%20width%3A%20100%2C%0A%20%20%20%20height%3A%20100%2C%0A%20%20%20%20backgroundColor%3A%20%22salmon%22%2C%0A%20%20%20%20borderRadius%3A%20100%2C%0A%20%20%7D%2C%0A%7D)%3B%0A%0A"
+        data-snack-code="import%20React%2C%20%7B%20useState%2C%20useEffect%20%7D%20from%20%22react%22%3B%0Aimport%20%7B%0A%20%20Alert%2C%0A%20%20Animated%2C%0A%20%20InteractionManager%2C%0A%20%20Platform%2C%0A%20%20StyleSheet%2C%0A%20%20Text%2C%0A%20%20View%2C%0A%7D%20from%20%22react-native%22%3B%0A%0Aconst%20instructions%20%3D%20Platform.select(%7B%0A%20%20ios%3A%20%22Press%20Cmd%2BR%20to%20reload%2C%5Cn%22%20%2B%20%22Cmd%2BD%20or%20shake%20for%20dev%20menu%22%2C%0A%20%20android%3A%0A%20%20%20%20%22Double%20tap%20R%20on%20your%20keyboard%20to%20reload%2C%5Cn%22%20%2B%0A%20%20%20%20%22Shake%20or%20press%20menu%20button%20for%20dev%20menu%22%2C%0A%7D)%3B%0A%0Aconst%20useMount%20%3D%20func%20%3D%3E%20useEffect(()%20%3D%3E%20func()%2C%20%5B%5D)%3B%0A%0Aconst%20useFadeIn%20%3D%20(duration%20%3D%205000)%20%3D%3E%20%7B%0A%20%20const%20%5Bopacity%5D%20%3D%20useState(new%20Animated.Value(0))%3B%0A%0A%20%20%2F%2F%20Running%20the%20animation%20when%20the%20component%20is%20mounted%0A%20%20useMount(()%20%3D%3E%20%7B%0A%20%20%20%20%2F%2F%20Animated.timing()%20create%20a%20interaction%20handle%20by%20default%2C%20if%20you%20want%20to%20disabled%20that%0A%20%20%20%20%2F%2F%20behaviour%20you%20can%20set%20isInteraction%20to%20false%20to%20disabled%20that.%0A%20%20%20%20Animated.timing(opacity%2C%20%7B%0A%20%20%20%20%20%20toValue%3A%201%2C%0A%20%20%20%20%20%20duration%2C%0A%20%20%20%20%7D).start()%3B%0A%20%20%7D)%3B%0A%0A%20%20return%20opacity%3B%0A%7D%3B%0A%0Aconst%20Ball%20%3D%20(%7B%20onShown%20%7D)%20%3D%3E%20%7B%0A%20%20const%20opacity%20%3D%20useFadeIn()%3B%0A%0A%20%20%2F%2F%20Running%20a%20method%20after%20the%20animation%0A%20%20useMount(()%20%3D%3E%20%7B%0A%20%20%20%20const%20interactionPromise%20%3D%20InteractionManager.runAfterInteractions(()%20%3D%3E%20onShown())%3B%0A%20%20%20%20return%20()%20%3D%3E%20interactionPromise.cancel()%3B%0A%20%20%7D)%3B%0A%0A%20%20return%20%3CAnimated.View%20style%3D%7B%5Bstyles.ball%2C%20%7B%20opacity%20%7D%5D%7D%20%2F%3E%3B%0A%7D%3B%0A%0Aconst%20App%20%3D%20()%20%3D%3E%20%7B%0A%20%20return%20(%0A%20%20%20%20%3CView%20style%3D%7Bstyles.container%7D%3E%0A%20%20%20%20%20%20%3CText%3E%7Binstructions%7D%3C%2FText%3E%0A%20%20%20%20%20%20%3CBall%20onShown%3D%7B()%20%3D%3E%20Alert.alert(%22Animation%20is%20done%22)%7D%20%2F%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20)%3B%0A%7D%3B%0A%0Aexport%20default%20App%3B%0A%0Aconst%20styles%20%3D%20StyleSheet.create(%7B%0A%20%20container%3A%20%7B%20flex%3A%201%2C%20justifyContent%3A%20%22center%22%2C%20alignItems%3A%20%22center%22%20%7D%2C%0A%20%20ball%3A%20%7B%0A%20%20%20%20width%3A%20100%2C%0A%20%20%20%20height%3A%20100%2C%0A%20%20%20%20backgroundColor%3A%20%22salmon%22%2C%0A%20%20%20%20borderRadius%3A%20100%2C%0A%20%20%7D%2C%0A%7D)%3B%0A%0A"
         data-snack-platform="web"
         data-snack-supported-platforms=ios,android
         data-snack-preview="true"

docs/next/security.html

@@ -81,7 +81,7 @@
 <p><a href="https://github.com/react-native-community/async-storage">Async Storage</a> is a community-maintained module for React Native that provides an asynchronous, unencrypted, key-value store. Async Storage is not shared between apps: every app has its own sandbox environment and has no access to data from other apps.</p>
 <table>
 <thead>
-<tr><th><strong>Do</strong> use asynch storage when...</th><th><strong>Don't</strong> use asynch storage for...</th></tr>
+<tr><th><strong>Do</strong> use async storage when...</th><th><strong>Don't</strong> use async storage for...</th></tr>
 </thead>
 <tbody>
 <tr><td>Persisting non-sensitive data across app runs</td><td>Token storage</td></tr>

docs/next/security/index.html

@@ -81,7 +81,7 @@
 <p><a href="https://github.com/react-native-community/async-storage">Async Storage</a> is a community-maintained module for React Native that provides an asynchronous, unencrypted, key-value store. Async Storage is not shared between apps: every app has its own sandbox environment and has no access to data from other apps.</p>
 <table>
 <thead>
-<tr><th><strong>Do</strong> use asynch storage when...</th><th><strong>Don't</strong> use asynch storage for...</th></tr>
+<tr><th><strong>Do</strong> use async storage when...</th><th><strong>Don't</strong> use async storage for...</th></tr>
 </thead>
 <tbody>
 <tr><td>Persisting non-sensitive data across app runs</td><td>Token storage</td></tr>