You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/0.10/scrollview.html
+1-1Lines changed: 1 addition & 1 deletion
Original file line number
Diff line number
Diff line change
@@ -69,7 +69,7 @@
69
69
}
70
70
});
71
71
</script></nav></div><divclass="container mainContainer"><divclass="wrapper"><divclass="post"><headerclass="postHeader"><aclass="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/scrollview.md" target="_blank" rel="noreferrer noopener">Edit</a><h1class="postHeaderTitle">ScrollView</h1></header><article><div><span><p>Component that wraps platform ScrollView while providing integration with touch locking "responder" system.</p>
72
-
<p>Keep in mind that ScrollViews must have a bounded height in order to work, since they contain unbounded-height children into a bounded container (via a scroll interaction). In order to bound the height of a ScrollView, either set the height of the view directly (discouraged) or make sure all parent views have bounded height. Forgetting to transfer <code>{flex: 1}</code> down the view stack can lead to errors here, which the element inspector makes easy to debug.</p>
72
+
<p>Keep in mind that ScrollViews must have a bounded height in order to work, since they contain unbounded-height children into a bounded container (via a scroll interaction). In order to bound the height of a ScrollView, either set the height of the view directly (discouraged) or make sure all parent views have bounded height. Forgetting to transfer <code>{flex: 1}</code> down the view stack can lead to errors here, which the element inspector makes quick to debug.</p>
73
73
<p>Doesn't yet support other contained responders from blocking this scroll view from becoming the responder.</p>
Copy file name to clipboardExpand all lines: docs/0.10/scrollview/index.html
+1-1Lines changed: 1 addition & 1 deletion
Original file line number
Diff line number
Diff line change
@@ -69,7 +69,7 @@
69
69
}
70
70
});
71
71
</script></nav></div><divclass="container mainContainer"><divclass="wrapper"><divclass="post"><headerclass="postHeader"><aclass="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/scrollview.md" target="_blank" rel="noreferrer noopener">Edit</a><h1class="postHeaderTitle">ScrollView</h1></header><article><div><span><p>Component that wraps platform ScrollView while providing integration with touch locking "responder" system.</p>
72
-
<p>Keep in mind that ScrollViews must have a bounded height in order to work, since they contain unbounded-height children into a bounded container (via a scroll interaction). In order to bound the height of a ScrollView, either set the height of the view directly (discouraged) or make sure all parent views have bounded height. Forgetting to transfer <code>{flex: 1}</code> down the view stack can lead to errors here, which the element inspector makes easy to debug.</p>
72
+
<p>Keep in mind that ScrollViews must have a bounded height in order to work, since they contain unbounded-height children into a bounded container (via a scroll interaction). In order to bound the height of a ScrollView, either set the height of the view directly (discouraged) or make sure all parent views have bounded height. Forgetting to transfer <code>{flex: 1}</code> down the view stack can lead to errors here, which the element inspector makes quick to debug.</p>
73
73
<p>Doesn't yet support other contained responders from blocking this scroll view from becoming the responder.</p>
Copy file name to clipboardExpand all lines: docs/0.44/animated.html
+5-5Lines changed: 5 additions & 5 deletions
Original file line number
Diff line number
Diff line change
@@ -1,4 +1,4 @@
1
-
<!DOCTYPE html><htmllang="en"><head><metacharSet="utf-8"/><metahttp-equiv="X-UA-Compatible" content="IE=edge"/><title>Animated · React Native</title><metaname="viewport" content="width=device-width"/><metaname="generator" content="Docusaurus"/><metaname="description" content="The `Animated` library is designed to make animations fluid, powerful, and easy to build and maintain. `Animated` focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and simple `start`/`stop` methods to control time-based animation execution."/><metaname="docsearch:version" content="0.44"/><metaname="docsearch:language" content="en"/><metaproperty="og:title" content="Animated · React Native"/><metaproperty="og:type" content="website"/><metaproperty="og:url" content="https://facebook.github.io/react-native/"/><metaproperty="og:description" content="The `Animated` library is designed to make animations fluid, powerful, and easy to build and maintain. `Animated` focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and simple `start`/`stop` methods to control time-based animation execution."/><metaname="twitter:card" content="summary"/><linkrel="shortcut icon" href="/react-native/img/favicon.ico"/><linkrel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><linkrel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><linkrel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><linkrel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
1
+
<!DOCTYPE html><htmllang="en"><head><metacharSet="utf-8"/><metahttp-equiv="X-UA-Compatible" content="IE=edge"/><title>Animated · React Native</title><metaname="viewport" content="width=device-width"/><metaname="generator" content="Docusaurus"/><metaname="description" content="The `Animated` library is designed to make animations fluid, powerful, and painless to build and maintain. `Animated` focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and `start`/`stop` methods to control time-based animation execution."/><metaname="docsearch:version" content="0.44"/><metaname="docsearch:language" content="en"/><metaproperty="og:title" content="Animated · React Native"/><metaproperty="og:type" content="website"/><metaproperty="og:url" content="https://facebook.github.io/react-native/"/><metaproperty="og:description" content="The `Animated` library is designed to make animations fluid, powerful, and painless to build and maintain. `Animated` focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and `start`/`stop` methods to control time-based animation execution."/><metaname="twitter:card" content="summary"/><linkrel="shortcut icon" href="/react-native/img/favicon.ico"/><linkrel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><linkrel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><linkrel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><linkrel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
</script></nav></div><divclass="container mainContainer"><divclass="wrapper"><divclass="post"><headerclass="postHeader"><aclass="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/animated.md" target="_blank" rel="noreferrer noopener">Edit</a><h1class="postHeaderTitle">Animated</h1></header><article><div><span><p>The <code>Animated</code> library is designed to make animations fluid, powerful, and easy to build and maintain. <code>Animated</code> focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and simple<code>start</code>/<code>stop</code> methods to control time-based animation execution.</p>
71
+
</script></nav></div><divclass="container mainContainer"><divclass="wrapper"><divclass="post"><headerclass="postHeader"><aclass="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/animated.md" target="_blank" rel="noreferrer noopener">Edit</a><h1class="postHeaderTitle">Animated</h1></header><article><div><span><p>The <code>Animated</code> library is designed to make animations fluid, powerful, and painless to build and maintain. <code>Animated</code> focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and <code>start</code>/<code>stop</code> methods to control time-based animation execution.</p>
72
72
<p>The simplest workflow for creating an animation is to to create an <code>Animated.Value</code>, hook it up to one or more style attributes of an animated component, and then drive updates via animations using <code>Animated.timing()</code>:</p>
<p><code>Animated</code> provides three types of animation types. Each animation type provides a particular animation curve that controls how your values animate from their initial value to the final value:</p>
91
91
<ul>
92
92
<li><ahref="/react-native/docs/0.44/animated#decay"><code>Animated.decay()</code></a> starts with an initial velocity and gradually slows to a stop.</li>
93
-
<li><ahref="/react-native/docs/0.44/animated#spring"><code>Animated.spring()</code></a> provides a simple spring physics model.</li>
93
+
<li><ahref="/react-native/docs/0.44/animated#spring"><code>Animated.spring()</code></a> provides a basic spring physics model.</li>
94
94
<li><ahref="/react-native/docs/0.44/animated#timing"><code>Animated.timing()</code></a> animates a value over time using <ahref="/react-native/docs/0.44/easing">easing functions</a>.</li>
95
95
</ul>
96
96
<p>In most cases, you will be using <code>timing()</code>. By default, it uses a symmetric easeInOut curve that conveys the gradual acceleration of an object to full speed and concludes by gradually decelerating to a stop.</p>
@@ -100,7 +100,7 @@ <h3><a class="anchor" aria-hidden="true" id="using-the-native-driver"></a><a hre
100
100
<p>By using the native driver, we send everything about the animation to native before starting the animation, allowing native code to perform the animation on the UI thread without having to go through the bridge on every frame. Once the animation has started, the JS thread can be blocked without affecting the animation.</p>
101
101
<p>You can use the native driver by specifying <code>useNativeDriver: true</code> in your animation configuration. See the <ahref="/react-native/docs/0.44/animations#using-the-native-driver">Animations</a> guide to learn more.</p>
<p>Only animatable components can be animated. These special components do the magic of binding the animated values to the properties, and do targeted native updates to avoid the cost of the react render and reconciliation process on every frame. They also handle cleanup on unmount so they are safe by default.</p>
103
+
<p>Only animatable components can be animated. These unique components do the magic of binding the animated values to the properties, and do targeted native updates to avoid the cost of the react render and reconciliation process on every frame. They also handle cleanup on unmount so they are safe by default.</p>
104
104
<ul>
105
105
<li><ahref="/react-native/docs/0.44/animated#createanimatedcomponent"><code>createAnimatedComponent()</code></a> can be used to make a component animatable.</li>
<li><ahref="/react-native/docs/0.44/animated#sequence"><code>Animated.sequence()</code></a> starts the animations in order, waiting for each to complete before starting the next.</li>
120
120
<li><ahref="/react-native/docs/0.44/animated#stagger"><code>Animated.stagger()</code></a> starts animations in order and in parallel, but with successive delays.</li>
121
121
</ul>
122
-
<p>Animations can also be chained together simply by setting the <code>toValue</code> of one animation to be another <code>Animated.Value</code>. See <ahref="/react-native/docs/0.44/animations#tracking-dynamic-values">Tracking dynamic values</a> in the Animations guide.</p>
122
+
<p>Animations can also be chained together by setting the <code>toValue</code> of one animation to be another <code>Animated.Value</code>. See <ahref="/react-native/docs/0.44/animations#tracking-dynamic-values">Tracking dynamic values</a> in the Animations guide.</p>
123
123
<p>By default, if one animation is stopped or interrupted, then all other animations in the group are also stopped.</p>
0 commit comments