mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Deploy website
Deploy website version based on ad32eb0b01184777b20802b9131a4003bd5d9a73
This commit is contained in:
Website Deployment Script
@@ -225,7 +225,7 @@
|
||||
<p>Currently, there is still some programming effort required to make gestures and animations RTL compatible. In the future, it would be ideal to find a way to make gestures and animations RTL support more developer friendly.</p></li>
|
||||
</ul>
|
||||
<h2><a class="anchor" aria-hidden="true" id="try-it-out"></a><a href="#try-it-out" 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>Try it Out!</h2>
|
||||
<p>Check out the <a href="https://github.com/facebook/react-native/blob/master/RNTester/js/examples/RTL/RTLExample.js"><code>RTLExample</code></a> in the <code>RNTester</code> to understand more about RTL support, and let us know how it works for you!</p>
|
||||
<p>Check out the <a href="https://github.com/facebook/react-native/blob/master/packages/rn-tester/js/examples/RTL/RTLExample.js"><code>RTLExample</code></a> in the <code>RNTester</code> to understand more about RTL support, and let us know how it works for you!</p>
|
||||
<p>Finally, thank you for reading! We hope that the RTL support for React Native helps you grow your apps for international audience!</p>
|
||||
</span></div></div><div class="blogSocialSection"><div class="blogSocialSectionItem"><a href="https://twitter.com/share" class="twitter-share-button" data-text="Right-to-Left Layout Support For React Native Apps" data-url="https://reactnative.dev/blog/2016/08/19/right-to-left-support-for-react-native-apps" data-related="reactnative" data-show-count="false">Tweet</a></div><div class="blogSocialSectionItem"><div class="fb-like" data-href="https://reactnative.dev/blog/2016/08/19/right-to-left-support-for-react-native-apps" data-layout="standard" data-share="true" data-width="225" data-show-faces="false"></div></div></div></div><div class="blog-recent"><a class="button" href="/blog/">Recent Posts</a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#overview-changes-in-rn-for-rtl-support">Overview Changes in RN for RTL support</a></li><li><a href="#making-an-app-rtl-ready">Making an App RTL-ready</a></li><li><a href="#writing-rtl-ready-components">Writing RTL-ready Components</a></li><li><a href="#maintaining-your-rtl-ready-app">Maintaining Your RTL-ready App</a></li><li><a href="#limitations-and-future-plan">Limitations and Future Plan</a></li><li><a href="#try-it-out">Try it Out!</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/docs/getting-started">Getting Started</a><a href="/docs/tutorial">Tutorial</a><a href="/docs/components-and-apis">Components and APIs</a><a href="/docs/more-resources">More Resources</a></div><div><h5>Community</h5><a href="/help">The React Native Community</a><a href="/showcase">Who's using React Native?</a><a href="https://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/blog">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="https://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2020 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
</script><script>window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));</script><script>
|
||||
|
||||
@@ -225,7 +225,7 @@
|
||||
<p>Currently, there is still some programming effort required to make gestures and animations RTL compatible. In the future, it would be ideal to find a way to make gestures and animations RTL support more developer friendly.</p></li>
|
||||
</ul>
|
||||
<h2><a class="anchor" aria-hidden="true" id="try-it-out"></a><a href="#try-it-out" 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>Try it Out!</h2>
|
||||
<p>Check out the <a href="https://github.com/facebook/react-native/blob/master/RNTester/js/examples/RTL/RTLExample.js"><code>RTLExample</code></a> in the <code>RNTester</code> to understand more about RTL support, and let us know how it works for you!</p>
|
||||
<p>Check out the <a href="https://github.com/facebook/react-native/blob/master/packages/rn-tester/js/examples/RTL/RTLExample.js"><code>RTLExample</code></a> in the <code>RNTester</code> to understand more about RTL support, and let us know how it works for you!</p>
|
||||
<p>Finally, thank you for reading! We hope that the RTL support for React Native helps you grow your apps for international audience!</p>
|
||||
</span></div></div><div class="blogSocialSection"><div class="blogSocialSectionItem"><a href="https://twitter.com/share" class="twitter-share-button" data-text="Right-to-Left Layout Support For React Native Apps" data-url="https://reactnative.dev/blog/2016/08/19/right-to-left-support-for-react-native-apps" data-related="reactnative" data-show-count="false">Tweet</a></div><div class="blogSocialSectionItem"><div class="fb-like" data-href="https://reactnative.dev/blog/2016/08/19/right-to-left-support-for-react-native-apps" data-layout="standard" data-share="true" data-width="225" data-show-faces="false"></div></div></div></div><div class="blog-recent"><a class="button" href="/blog/">Recent Posts</a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#overview-changes-in-rn-for-rtl-support">Overview Changes in RN for RTL support</a></li><li><a href="#making-an-app-rtl-ready">Making an App RTL-ready</a></li><li><a href="#writing-rtl-ready-components">Writing RTL-ready Components</a></li><li><a href="#maintaining-your-rtl-ready-app">Maintaining Your RTL-ready App</a></li><li><a href="#limitations-and-future-plan">Limitations and Future Plan</a></li><li><a href="#try-it-out">Try it Out!</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/docs/getting-started">Getting Started</a><a href="/docs/tutorial">Tutorial</a><a href="/docs/components-and-apis">Components and APIs</a><a href="/docs/more-resources">More Resources</a></div><div><h5>Community</h5><a href="/help">The React Native Community</a><a href="/showcase">Who's using React Native?</a><a href="https://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/blog">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="https://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2020 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
</script><script>window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));</script><script>
|
||||
|
||||
@@ -142,7 +142,7 @@ Sets the color of the Text component to labelColor as defined by iOS.
|
||||
<p class="snippet-caption">
|
||||
Sets the background color of the View component to colorButtonNormal as defined by Android.
|
||||
</p>
|
||||
<p>You can learn more about <code>PlatformColor</code> from <a href="https://reactnative.dev/docs/platformcolor">the documentation</a>. You can also check the actual <a href="https://github.com/facebook/react-native/blob/master/RNTester/js/examples/PlatformColor/PlatformColorExample.js">code examples present in the RNTester</a>.</p>
|
||||
<p>You can learn more about <code>PlatformColor</code> from <a href="https://reactnative.dev/docs/platformcolor">the documentation</a>. You can also check the actual <a href="https://github.com/facebook/react-native/blob/master/packages/rn-tester/js/examples/PlatformColor/PlatformColorExample.js">code examples present in the RNTester</a>.</p>
|
||||
<p><code>DynamicColorIOS</code> is an iOS only API that lets you define which color to use in light and dark mode. Similar to <code>PlatformColor</code>, this can be used anywhere you can use colors. <code>DynamicColorIOS</code> uses iOS’s <code>colorWithDynamicProvider</code> under the hood.</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> <span class="token punctuation">{</span> Text<span class="token punctuation">,</span> DynamicColorIOS <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span>
|
||||
|
||||
|
||||
@@ -142,7 +142,7 @@ Sets the color of the Text component to labelColor as defined by iOS.
|
||||
<p class="snippet-caption">
|
||||
Sets the background color of the View component to colorButtonNormal as defined by Android.
|
||||
</p>
|
||||
<p>You can learn more about <code>PlatformColor</code> from <a href="https://reactnative.dev/docs/platformcolor">the documentation</a>. You can also check the actual <a href="https://github.com/facebook/react-native/blob/master/RNTester/js/examples/PlatformColor/PlatformColorExample.js">code examples present in the RNTester</a>.</p>
|
||||
<p>You can learn more about <code>PlatformColor</code> from <a href="https://reactnative.dev/docs/platformcolor">the documentation</a>. You can also check the actual <a href="https://github.com/facebook/react-native/blob/master/packages/rn-tester/js/examples/PlatformColor/PlatformColorExample.js">code examples present in the RNTester</a>.</p>
|
||||
<p><code>DynamicColorIOS</code> is an iOS only API that lets you define which color to use in light and dark mode. Similar to <code>PlatformColor</code>, this can be used anywhere you can use colors. <code>DynamicColorIOS</code> uses iOS’s <code>colorWithDynamicProvider</code> under the hood.</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> <span class="token punctuation">{</span> Text<span class="token punctuation">,</span> DynamicColorIOS <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span>
|
||||
|
||||
|
||||
+1
-1
@@ -190,7 +190,7 @@ Sets the color of the Text component to labelColor as defined by iOS.
|
||||
<p class="snippet-caption">
|
||||
Sets the background color of the View component to colorButtonNormal as defined by Android.
|
||||
</p>
|
||||
<p>You can learn more about <code>PlatformColor</code> from <a href="https://reactnative.dev/docs/platformcolor">the documentation</a>. You can also check the actual <a href="https://github.com/facebook/react-native/blob/master/RNTester/js/examples/PlatformColor/PlatformColorExample.js">code examples present in the RNTester</a>.</p>
|
||||
<p>You can learn more about <code>PlatformColor</code> from <a href="https://reactnative.dev/docs/platformcolor">the documentation</a>. You can also check the actual <a href="https://github.com/facebook/react-native/blob/master/packages/rn-tester/js/examples/PlatformColor/PlatformColorExample.js">code examples present in the RNTester</a>.</p>
|
||||
<p><code>DynamicColorIOS</code> is an iOS only API that lets you define which color to use in light and dark mode. Similar to <code>PlatformColor</code>, this can be used anywhere you can use colors. <code>DynamicColorIOS</code> uses iOS’s <code>colorWithDynamicProvider</code> under the hood.</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">import</span> <span class="token punctuation">{</span> Text<span class="token punctuation">,</span> DynamicColorIOS <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span>
|
||||
|
||||
|
||||
@@ -638,7 +638,7 @@ $ react-native upgrade
|
||||
<p>Currently, there is still some programming effort required to make gestures and animations RTL compatible. In the future, it would be ideal to find a way to make gestures and animations RTL support more developer friendly.</p></li>
|
||||
</ul>
|
||||
<h2><a class="anchor" aria-hidden="true" id="try-it-out"></a><a href="#try-it-out" 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>Try it Out!</h2>
|
||||
<p>Check out the <a href="https://github.com/facebook/react-native/blob/master/RNTester/js/examples/RTL/RTLExample.js"><code>RTLExample</code></a> in the <code>RNTester</code> to understand more about RTL support, and let us know how it works for you!</p>
|
||||
<p>Check out the <a href="https://github.com/facebook/react-native/blob/master/packages/rn-tester/js/examples/RTL/RTLExample.js"><code>RTLExample</code></a> in the <code>RNTester</code> to understand more about RTL support, and let us know how it works for you!</p>
|
||||
<p>Finally, thank you for reading! We hope that the RTL support for React Native helps you grow your apps for international audience!</p>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev" href="/blog/page3/">← Prev</a><a class="docs-next" href="/blog/page5/">Next →</a></div></div></div></div></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/docs/getting-started">Getting Started</a><a href="/docs/tutorial">Tutorial</a><a href="/docs/components-and-apis">Components and APIs</a><a href="/docs/more-resources">More Resources</a></div><div><h5>Community</h5><a href="/help">The React Native Community</a><a href="/showcase">Who's using React Native?</a><a href="https://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/blog">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="https://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2020 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
</script><script>window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));</script><script>
|
||||
|
||||
@@ -753,7 +753,7 @@ Animated<span class="token punctuation">.</span><span class="token function">tim
|
||||
<span class="token punctuation">{</span>content<span class="token punctuation">}</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Animated.ScrollView</span></span><span class="token punctuation">></span></span>
|
||||
</code></pre>
|
||||
<p>You can see the native driver in action by running the <a href="https://github.com/facebook/react-native/blob/master/RNTester/">RNTester app</a>, then loading the Native Animated Example. You can also take a look at the <a href="https://github.com/facebook/react-native/blob/master/RNTester/js/examples/NativeAnimation/NativeAnimationsExample.js">source code</a> to learn how these examples were produced.</p>
|
||||
<p>You can see the native driver in action by running the <a href="https://github.com/facebook/react-native/blob/master/packages/rn-tester/">RNTester app</a>, then loading the Native Animated Example. You can also take a look at the <a href="https://github.com/facebook/react-native/blob/master/packages/rn-tester/js/examples/NativeAnimation/NativeAnimationsExample.js">source code</a> to learn how these examples were produced.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" id="caveats"></a><a href="#caveats" 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>Caveats</h4>
|
||||
<p>Not everything you can do with <code>Animated</code> is currently supported by the native driver. The main limitation is that you can only animate non-layout properties: things like <code>transform</code> and <code>opacity</code> will work, but Flexbox and position properties will not. When using <code>Animated.event</code>, it will only work with direct events and not bubbling events. This means it does not work with <code>PanResponder</code> but does work with things like <code>ScrollView#onScroll</code>.</p>
|
||||
<p>When an animation is running, it can prevent <code>VirtualizedList</code> components from rendering more rows. If you need to run a long or looping animation while the user is scrolling through a list, you can use <code>isInteraction: false</code> in your animation's config to prevent this issue.</p>
|
||||
@@ -772,8 +772,8 @@ Animated<span class="token punctuation">.</span><span class="token function">tim
|
||||
<h3><a class="anchor" aria-hidden="true" id="additional-examples"></a><a href="#additional-examples" 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>Additional examples</h3>
|
||||
<p>The RNTester app has various examples of <code>Animated</code> in use:</p>
|
||||
<ul>
|
||||
<li><a href="https://github.com/facebook/react-native/tree/master/RNTester/js/examples/Animated/AnimatedGratuitousApp">AnimatedGratuitousApp</a></li>
|
||||
<li><a href="https://github.com/facebook/react-native/blob/master/RNTester/js/examples/NativeAnimation/NativeAnimationsExample.js">NativeAnimationsExample</a></li>
|
||||
<li><a href="https://github.com/facebook/react-native/tree/master/packages/rn-tester/js/examples/Animated/AnimatedGratuitousApp">AnimatedGratuitousApp</a></li>
|
||||
<li><a href="https://github.com/facebook/react-native/blob/master/packages/rn-tester/js/examples/NativeAnimation/NativeAnimationsExample.js">NativeAnimationsExample</a></li>
|
||||
</ul>
|
||||
<h2><a class="anchor" aria-hidden="true" id="layoutanimation-api"></a><a href="#layoutanimation-api" 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><code>LayoutAnimation</code> API</h2>
|
||||
<p><code>LayoutAnimation</code> allows you to globally configure <code>create</code> and <code>update</code> animations that will be used for all views in the next render/layout cycle. This is useful for doing Flexbox layout updates without bothering to measure or calculate specific properties in order to animate them directly, and is especially useful when layout changes may affect ancestors, for example a "see more" expansion that also increases the size of the parent and pushes down the row below which would otherwise require explicit coordination between the components in order to animate them all in sync.</p>
|
||||
|
||||
@@ -753,7 +753,7 @@ Animated<span class="token punctuation">.</span><span class="token function">tim
|
||||
<span class="token punctuation">{</span>content<span class="token punctuation">}</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Animated.ScrollView</span></span><span class="token punctuation">></span></span>
|
||||
</code></pre>
|
||||
<p>You can see the native driver in action by running the <a href="https://github.com/facebook/react-native/blob/master/RNTester/">RNTester app</a>, then loading the Native Animated Example. You can also take a look at the <a href="https://github.com/facebook/react-native/blob/master/RNTester/js/examples/NativeAnimation/NativeAnimationsExample.js">source code</a> to learn how these examples were produced.</p>
|
||||
<p>You can see the native driver in action by running the <a href="https://github.com/facebook/react-native/blob/master/packages/rn-tester/">RNTester app</a>, then loading the Native Animated Example. You can also take a look at the <a href="https://github.com/facebook/react-native/blob/master/packages/rn-tester/js/examples/NativeAnimation/NativeAnimationsExample.js">source code</a> to learn how these examples were produced.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" id="caveats"></a><a href="#caveats" 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>Caveats</h4>
|
||||
<p>Not everything you can do with <code>Animated</code> is currently supported by the native driver. The main limitation is that you can only animate non-layout properties: things like <code>transform</code> and <code>opacity</code> will work, but Flexbox and position properties will not. When using <code>Animated.event</code>, it will only work with direct events and not bubbling events. This means it does not work with <code>PanResponder</code> but does work with things like <code>ScrollView#onScroll</code>.</p>
|
||||
<p>When an animation is running, it can prevent <code>VirtualizedList</code> components from rendering more rows. If you need to run a long or looping animation while the user is scrolling through a list, you can use <code>isInteraction: false</code> in your animation's config to prevent this issue.</p>
|
||||
@@ -772,8 +772,8 @@ Animated<span class="token punctuation">.</span><span class="token function">tim
|
||||
<h3><a class="anchor" aria-hidden="true" id="additional-examples"></a><a href="#additional-examples" 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>Additional examples</h3>
|
||||
<p>The RNTester app has various examples of <code>Animated</code> in use:</p>
|
||||
<ul>
|
||||
<li><a href="https://github.com/facebook/react-native/tree/master/RNTester/js/examples/Animated/AnimatedGratuitousApp">AnimatedGratuitousApp</a></li>
|
||||
<li><a href="https://github.com/facebook/react-native/blob/master/RNTester/js/examples/NativeAnimation/NativeAnimationsExample.js">NativeAnimationsExample</a></li>
|
||||
<li><a href="https://github.com/facebook/react-native/tree/master/packages/rn-tester/js/examples/Animated/AnimatedGratuitousApp">AnimatedGratuitousApp</a></li>
|
||||
<li><a href="https://github.com/facebook/react-native/blob/master/packages/rn-tester/js/examples/NativeAnimation/NativeAnimationsExample.js">NativeAnimationsExample</a></li>
|
||||
</ul>
|
||||
<h2><a class="anchor" aria-hidden="true" id="layoutanimation-api"></a><a href="#layoutanimation-api" 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><code>LayoutAnimation</code> API</h2>
|
||||
<p><code>LayoutAnimation</code> allows you to globally configure <code>create</code> and <code>update</code> animations that will be used for all views in the next render/layout cycle. This is useful for doing Flexbox layout updates without bothering to measure or calculate specific properties in order to animate them directly, and is especially useful when layout changes may affect ancestors, for example a "see more" expansion that also increases the size of the parent and pushes down the row below which would otherwise require explicit coordination between the components in order to animate them all in sync.</p>
|
||||
|
||||
@@ -115,7 +115,7 @@
|
||||
height: 514px;
|
||||
width: 100%;
|
||||
"
|
||||
></div></div></div><p>This component can also be used to create sticky text inputs (text inputs which are anchored to the top of the keyboard). To do this, wrap a <code>TextInput</code> with the <code>InputAccessoryView</code> component, and don't set a <code>nativeID</code>. For an example, look at <a href="https://github.com/facebook/react-native/blob/master/RNTester/js/examples/InputAccessoryView/InputAccessoryViewExample.js">InputAccessoryViewExample.js</a>.</p>
|
||||
></div></div></div><p>This component can also be used to create sticky text inputs (text inputs which are anchored to the top of the keyboard). To do this, wrap a <code>TextInput</code> with the <code>InputAccessoryView</code> component, and don't set a <code>nativeID</code>. For an example, look at <a href="https://github.com/facebook/react-native/blob/master/packages/rn-tester/js/examples/InputAccessoryView/InputAccessoryViewExample.js">InputAccessoryViewExample.js</a>.</p>
|
||||
<hr>
|
||||
<h1><a class="anchor" aria-hidden="true" id="reference"></a><a href="#reference" 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>Reference</h1>
|
||||
<h2><a class="anchor" aria-hidden="true" id="props"></a><a href="#props" 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>Props</h2>
|
||||
|
||||
@@ -115,7 +115,7 @@
|
||||
height: 514px;
|
||||
width: 100%;
|
||||
"
|
||||
></div></div></div><p>This component can also be used to create sticky text inputs (text inputs which are anchored to the top of the keyboard). To do this, wrap a <code>TextInput</code> with the <code>InputAccessoryView</code> component, and don't set a <code>nativeID</code>. For an example, look at <a href="https://github.com/facebook/react-native/blob/master/RNTester/js/examples/InputAccessoryView/InputAccessoryViewExample.js">InputAccessoryViewExample.js</a>.</p>
|
||||
></div></div></div><p>This component can also be used to create sticky text inputs (text inputs which are anchored to the top of the keyboard). To do this, wrap a <code>TextInput</code> with the <code>InputAccessoryView</code> component, and don't set a <code>nativeID</code>. For an example, look at <a href="https://github.com/facebook/react-native/blob/master/packages/rn-tester/js/examples/InputAccessoryView/InputAccessoryViewExample.js">InputAccessoryViewExample.js</a>.</p>
|
||||
<hr>
|
||||
<h1><a class="anchor" aria-hidden="true" id="reference"></a><a href="#reference" 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>Reference</h1>
|
||||
<h2><a class="anchor" aria-hidden="true" id="props"></a><a href="#props" 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>Props</h2>
|
||||
|
||||
@@ -753,7 +753,7 @@ Animated<span class="token punctuation">.</span><span class="token function">tim
|
||||
<span class="token punctuation">{</span>content<span class="token punctuation">}</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Animated.ScrollView</span></span><span class="token punctuation">></span></span>
|
||||
</code></pre>
|
||||
<p>You can see the native driver in action by running the <a href="https://github.com/facebook/react-native/blob/master/RNTester/">RNTester app</a>, then loading the Native Animated Example. You can also take a look at the <a href="https://github.com/facebook/react-native/blob/master/RNTester/js/examples/NativeAnimation/NativeAnimationsExample.js">source code</a> to learn how these examples were produced.</p>
|
||||
<p>You can see the native driver in action by running the <a href="https://github.com/facebook/react-native/blob/master/packages/rn-tester/">RNTester app</a>, then loading the Native Animated Example. You can also take a look at the <a href="https://github.com/facebook/react-native/blob/master/packages/rn-tester/js/examples/NativeAnimation/NativeAnimationsExample.js">source code</a> to learn how these examples were produced.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" id="caveats"></a><a href="#caveats" 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>Caveats</h4>
|
||||
<p>Not everything you can do with <code>Animated</code> is currently supported by the native driver. The main limitation is that you can only animate non-layout properties: things like <code>transform</code> and <code>opacity</code> will work, but Flexbox and position properties will not. When using <code>Animated.event</code>, it will only work with direct events and not bubbling events. This means it does not work with <code>PanResponder</code> but does work with things like <code>ScrollView#onScroll</code>.</p>
|
||||
<p>When an animation is running, it can prevent <code>VirtualizedList</code> components from rendering more rows. If you need to run a long or looping animation while the user is scrolling through a list, you can use <code>isInteraction: false</code> in your animation's config to prevent this issue.</p>
|
||||
@@ -772,8 +772,8 @@ Animated<span class="token punctuation">.</span><span class="token function">tim
|
||||
<h3><a class="anchor" aria-hidden="true" id="additional-examples"></a><a href="#additional-examples" 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>Additional examples</h3>
|
||||
<p>The RNTester app has various examples of <code>Animated</code> in use:</p>
|
||||
<ul>
|
||||
<li><a href="https://github.com/facebook/react-native/tree/master/RNTester/js/examples/Animated/AnimatedGratuitousApp">AnimatedGratuitousApp</a></li>
|
||||
<li><a href="https://github.com/facebook/react-native/blob/master/RNTester/js/examples/NativeAnimation/NativeAnimationsExample.js">NativeAnimationsExample</a></li>
|
||||
<li><a href="https://github.com/facebook/react-native/tree/master/packages/rn-tester/js/examples/Animated/AnimatedGratuitousApp">AnimatedGratuitousApp</a></li>
|
||||
<li><a href="https://github.com/facebook/react-native/blob/master/packages/rn-tester/js/examples/NativeAnimation/NativeAnimationsExample.js">NativeAnimationsExample</a></li>
|
||||
</ul>
|
||||
<h2><a class="anchor" aria-hidden="true" id="layoutanimation-api"></a><a href="#layoutanimation-api" 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><code>LayoutAnimation</code> API</h2>
|
||||
<p><code>LayoutAnimation</code> allows you to globally configure <code>create</code> and <code>update</code> animations that will be used for all views in the next render/layout cycle. This is useful for doing Flexbox layout updates without bothering to measure or calculate specific properties in order to animate them directly, and is especially useful when layout changes may affect ancestors, for example a "see more" expansion that also increases the size of the parent and pushes down the row below which would otherwise require explicit coordination between the components in order to animate them all in sync.</p>
|
||||
|
||||
@@ -753,7 +753,7 @@ Animated<span class="token punctuation">.</span><span class="token function">tim
|
||||
<span class="token punctuation">{</span>content<span class="token punctuation">}</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Animated.ScrollView</span></span><span class="token punctuation">></span></span>
|
||||
</code></pre>
|
||||
<p>You can see the native driver in action by running the <a href="https://github.com/facebook/react-native/blob/master/RNTester/">RNTester app</a>, then loading the Native Animated Example. You can also take a look at the <a href="https://github.com/facebook/react-native/blob/master/RNTester/js/examples/NativeAnimation/NativeAnimationsExample.js">source code</a> to learn how these examples were produced.</p>
|
||||
<p>You can see the native driver in action by running the <a href="https://github.com/facebook/react-native/blob/master/packages/rn-tester/">RNTester app</a>, then loading the Native Animated Example. You can also take a look at the <a href="https://github.com/facebook/react-native/blob/master/packages/rn-tester/js/examples/NativeAnimation/NativeAnimationsExample.js">source code</a> to learn how these examples were produced.</p>
|
||||
<h4><a class="anchor" aria-hidden="true" id="caveats"></a><a href="#caveats" 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>Caveats</h4>
|
||||
<p>Not everything you can do with <code>Animated</code> is currently supported by the native driver. The main limitation is that you can only animate non-layout properties: things like <code>transform</code> and <code>opacity</code> will work, but Flexbox and position properties will not. When using <code>Animated.event</code>, it will only work with direct events and not bubbling events. This means it does not work with <code>PanResponder</code> but does work with things like <code>ScrollView#onScroll</code>.</p>
|
||||
<p>When an animation is running, it can prevent <code>VirtualizedList</code> components from rendering more rows. If you need to run a long or looping animation while the user is scrolling through a list, you can use <code>isInteraction: false</code> in your animation's config to prevent this issue.</p>
|
||||
@@ -772,8 +772,8 @@ Animated<span class="token punctuation">.</span><span class="token function">tim
|
||||
<h3><a class="anchor" aria-hidden="true" id="additional-examples"></a><a href="#additional-examples" 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>Additional examples</h3>
|
||||
<p>The RNTester app has various examples of <code>Animated</code> in use:</p>
|
||||
<ul>
|
||||
<li><a href="https://github.com/facebook/react-native/tree/master/RNTester/js/examples/Animated/AnimatedGratuitousApp">AnimatedGratuitousApp</a></li>
|
||||
<li><a href="https://github.com/facebook/react-native/blob/master/RNTester/js/examples/NativeAnimation/NativeAnimationsExample.js">NativeAnimationsExample</a></li>
|
||||
<li><a href="https://github.com/facebook/react-native/tree/master/packages/rn-tester/js/examples/Animated/AnimatedGratuitousApp">AnimatedGratuitousApp</a></li>
|
||||
<li><a href="https://github.com/facebook/react-native/blob/master/packages/rn-tester/js/examples/NativeAnimation/NativeAnimationsExample.js">NativeAnimationsExample</a></li>
|
||||
</ul>
|
||||
<h2><a class="anchor" aria-hidden="true" id="layoutanimation-api"></a><a href="#layoutanimation-api" 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><code>LayoutAnimation</code> API</h2>
|
||||
<p><code>LayoutAnimation</code> allows you to globally configure <code>create</code> and <code>update</code> animations that will be used for all views in the next render/layout cycle. This is useful for doing Flexbox layout updates without bothering to measure or calculate specific properties in order to animate them directly, and is especially useful when layout changes may affect ancestors, for example a "see more" expansion that also increases the size of the parent and pushes down the row below which would otherwise require explicit coordination between the components in order to animate them all in sync.</p>
|
||||
|
||||
@@ -205,7 +205,7 @@ rootView.appProperties = @{<span class="hljs-string">@"images"</span> : imageLis
|
||||
}
|
||||
</code></pre>
|
||||
<p>In the example we have a <code>FlexibleSizeExampleView</code> view that holds a root view. We create the root view, initialize it and set the delegate. The delegate will handle size updates. Then, we set the root view's size flexibility to <code>RCTRootViewSizeFlexibilityHeight</code>, which means that <code>rootViewDidChangeIntrinsicSize:</code> method will be called every time the React Native content changes its height. Finally, we set the root view's width and position. Note that we set there height as well, but it has no effect as we made the height RN-dependent.</p>
|
||||
<p>You can checkout full source code of the example <a href="https://github.com/facebook/react-native/blob/master/RNTester/RNTester/NativeExampleViews/FlexibleSizeExampleView.m">here</a>.</p>
|
||||
<p>You can checkout full source code of the example <a href="https://github.com/facebook/react-native/blob/master/packages/rn-tester/RNTester/NativeExampleViews/FlexibleSizeExampleView.m">here</a>.</p>
|
||||
<p>It's fine to change root view's size flexibility mode dynamically. Changing flexibility mode of a root view will schedule a layout recalculation and the delegate <code>rootViewDidChangeIntrinsicSize:</code> method will be called once the content size is known.</p>
|
||||
<blockquote>
|
||||
<p><strong><em>Note:</em></strong> React Native layout calculation is performed on a separate thread, while native UI view updates are done on the main thread. This may cause temporary UI inconsistencies between native and React Native. This is a known problem and our team is working on synchronizing UI updates coming from different sources.</p>
|
||||
|
||||
@@ -205,7 +205,7 @@ rootView.appProperties = @{<span class="hljs-string">@"images"</span> : imageLis
|
||||
}
|
||||
</code></pre>
|
||||
<p>In the example we have a <code>FlexibleSizeExampleView</code> view that holds a root view. We create the root view, initialize it and set the delegate. The delegate will handle size updates. Then, we set the root view's size flexibility to <code>RCTRootViewSizeFlexibilityHeight</code>, which means that <code>rootViewDidChangeIntrinsicSize:</code> method will be called every time the React Native content changes its height. Finally, we set the root view's width and position. Note that we set there height as well, but it has no effect as we made the height RN-dependent.</p>
|
||||
<p>You can checkout full source code of the example <a href="https://github.com/facebook/react-native/blob/master/RNTester/RNTester/NativeExampleViews/FlexibleSizeExampleView.m">here</a>.</p>
|
||||
<p>You can checkout full source code of the example <a href="https://github.com/facebook/react-native/blob/master/packages/rn-tester/RNTester/NativeExampleViews/FlexibleSizeExampleView.m">here</a>.</p>
|
||||
<p>It's fine to change root view's size flexibility mode dynamically. Changing flexibility mode of a root view will schedule a layout recalculation and the delegate <code>rootViewDidChangeIntrinsicSize:</code> method will be called once the content size is known.</p>
|
||||
<blockquote>
|
||||
<p><strong><em>Note:</em></strong> React Native layout calculation is performed on a separate thread, while native UI view updates are done on the main thread. This may cause temporary UI inconsistencies between native and React Native. This is a known problem and our team is working on synchronizing UI updates coming from different sources.</p>
|
||||
|
||||
@@ -115,7 +115,7 @@
|
||||
height: 514px;
|
||||
width: 100%;
|
||||
"
|
||||
></div></div></div><p>This component can also be used to create sticky text inputs (text inputs which are anchored to the top of the keyboard). To do this, wrap a <code>TextInput</code> with the <code>InputAccessoryView</code> component, and don't set a <code>nativeID</code>. For an example, look at <a href="https://github.com/facebook/react-native/blob/master/RNTester/js/examples/InputAccessoryView/InputAccessoryViewExample.js">InputAccessoryViewExample.js</a>.</p>
|
||||
></div></div></div><p>This component can also be used to create sticky text inputs (text inputs which are anchored to the top of the keyboard). To do this, wrap a <code>TextInput</code> with the <code>InputAccessoryView</code> component, and don't set a <code>nativeID</code>. For an example, look at <a href="https://github.com/facebook/react-native/blob/master/packages/rn-tester/js/examples/InputAccessoryView/InputAccessoryViewExample.js">InputAccessoryViewExample.js</a>.</p>
|
||||
<hr>
|
||||
<h1><a class="anchor" aria-hidden="true" id="reference"></a><a href="#reference" 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>Reference</h1>
|
||||
<h2><a class="anchor" aria-hidden="true" id="props"></a><a href="#props" 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>Props</h2>
|
||||
|
||||
@@ -115,7 +115,7 @@
|
||||
height: 514px;
|
||||
width: 100%;
|
||||
"
|
||||
></div></div></div><p>This component can also be used to create sticky text inputs (text inputs which are anchored to the top of the keyboard). To do this, wrap a <code>TextInput</code> with the <code>InputAccessoryView</code> component, and don't set a <code>nativeID</code>. For an example, look at <a href="https://github.com/facebook/react-native/blob/master/RNTester/js/examples/InputAccessoryView/InputAccessoryViewExample.js">InputAccessoryViewExample.js</a>.</p>
|
||||
></div></div></div><p>This component can also be used to create sticky text inputs (text inputs which are anchored to the top of the keyboard). To do this, wrap a <code>TextInput</code> with the <code>InputAccessoryView</code> component, and don't set a <code>nativeID</code>. For an example, look at <a href="https://github.com/facebook/react-native/blob/master/packages/rn-tester/js/examples/InputAccessoryView/InputAccessoryViewExample.js">InputAccessoryViewExample.js</a>.</p>
|
||||
<hr>
|
||||
<h1><a class="anchor" aria-hidden="true" id="reference"></a><a href="#reference" 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>Reference</h1>
|
||||
<h2><a class="anchor" aria-hidden="true" id="props"></a><a href="#props" 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>Props</h2>
|
||||
|
||||
@@ -296,7 +296,7 @@
|
||||
width: 100%;
|
||||
"
|
||||
></div></div></div><p><block class="endBlock syntax" /></p>
|
||||
<p>Try the <a href="https://github.com/facebook/react-native/blob/master/RNTester/js/examples/PanResponder/PanResponderExample.js">PanResponder example in RNTester</a>.</p>
|
||||
<p>Try the <a href="https://github.com/facebook/react-native/blob/master/packages/rn-tester/js/examples/PanResponder/PanResponderExample.js">PanResponder example in RNTester</a>.</p>
|
||||
<hr>
|
||||
<h1><a class="anchor" aria-hidden="true" id="reference"></a><a href="#reference" 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>Reference</h1>
|
||||
<h2><a class="anchor" aria-hidden="true" id="methods"></a><a href="#methods" 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>Methods</h2>
|
||||
|
||||
@@ -296,7 +296,7 @@
|
||||
width: 100%;
|
||||
"
|
||||
></div></div></div><p><block class="endBlock syntax" /></p>
|
||||
<p>Try the <a href="https://github.com/facebook/react-native/blob/master/RNTester/js/examples/PanResponder/PanResponderExample.js">PanResponder example in RNTester</a>.</p>
|
||||
<p>Try the <a href="https://github.com/facebook/react-native/blob/master/packages/rn-tester/js/examples/PanResponder/PanResponderExample.js">PanResponder example in RNTester</a>.</p>
|
||||
<hr>
|
||||
<h1><a class="anchor" aria-hidden="true" id="reference"></a><a href="#reference" 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>Reference</h1>
|
||||
<h2><a class="anchor" aria-hidden="true" id="methods"></a><a href="#methods" 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>Methods</h2>
|
||||
|
||||
@@ -129,7 +129,7 @@
|
||||
</code></pre>
|
||||
<p>The string value provided to the <code>PlatformColor</code> function must match the string as it exists on the native platform where the app is running. In order to avoid runtime errors, the function should be wrapped in a platform check, either through a <code>Platform.OS === 'platform'</code> or a <code>Platform.Select()</code>, as shown on the example above.</p>
|
||||
<blockquote>
|
||||
<p><strong>Note:</strong> You can find a complete example that demonstrates proper, intended use of <code>PlatformColor</code> in <a href="https://github.com/facebook/react-native/blob/master/RNTester/js/examples/PlatformColor/PlatformColorExample.js">PlatformColorExample.js</a>.</p>
|
||||
<p><strong>Note:</strong> You can find a complete example that demonstrates proper, intended use of <code>PlatformColor</code> in <a href="https://github.com/facebook/react-native/blob/master/packages/rn-tester/js/examples/PlatformColor/PlatformColorExample.js">PlatformColorExample.js</a>.</p>
|
||||
</blockquote>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/next/pixelratio"><span class="arrow-prev">← </span><span class="function-name-prevnext">PixelRatio</span></a><a class="docs-next button" href="/docs/next/share"><span>Share</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#example">Example</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/docs/getting-started">Getting Started</a><a href="/docs/tutorial">Tutorial</a><a href="/docs/components-and-apis">Components and APIs</a><a href="/docs/more-resources">More Resources</a></div><div><h5>Community</h5><a href="/help">The React Native Community</a><a href="/showcase">Who's using React Native?</a><a href="https://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/blog">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="https://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2020 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
</script><script>window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));</script><script>
|
||||
|
||||
@@ -129,7 +129,7 @@
|
||||
</code></pre>
|
||||
<p>The string value provided to the <code>PlatformColor</code> function must match the string as it exists on the native platform where the app is running. In order to avoid runtime errors, the function should be wrapped in a platform check, either through a <code>Platform.OS === 'platform'</code> or a <code>Platform.Select()</code>, as shown on the example above.</p>
|
||||
<blockquote>
|
||||
<p><strong>Note:</strong> You can find a complete example that demonstrates proper, intended use of <code>PlatformColor</code> in <a href="https://github.com/facebook/react-native/blob/master/RNTester/js/examples/PlatformColor/PlatformColorExample.js">PlatformColorExample.js</a>.</p>
|
||||
<p><strong>Note:</strong> You can find a complete example that demonstrates proper, intended use of <code>PlatformColor</code> in <a href="https://github.com/facebook/react-native/blob/master/packages/rn-tester/js/examples/PlatformColor/PlatformColorExample.js">PlatformColorExample.js</a>.</p>
|
||||
</blockquote>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/next/pixelratio"><span class="arrow-prev">← </span><span class="function-name-prevnext">PixelRatio</span></a><a class="docs-next button" href="/docs/next/share"><span>Share</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#example">Example</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/docs/getting-started">Getting Started</a><a href="/docs/tutorial">Tutorial</a><a href="/docs/components-and-apis">Components and APIs</a><a href="/docs/more-resources">More Resources</a></div><div><h5>Community</h5><a href="/help">The React Native Community</a><a href="/showcase">Who's using React Native?</a><a href="https://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/blog">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="https://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2020 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
</script><script>window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));</script><script>
|
||||
|
||||
@@ -296,7 +296,7 @@
|
||||
width: 100%;
|
||||
"
|
||||
></div></div></div><p><block class="endBlock syntax" /></p>
|
||||
<p>Try the <a href="https://github.com/facebook/react-native/blob/master/RNTester/js/examples/PanResponder/PanResponderExample.js">PanResponder example in RNTester</a>.</p>
|
||||
<p>Try the <a href="https://github.com/facebook/react-native/blob/master/packages/rn-tester/js/examples/PanResponder/PanResponderExample.js">PanResponder example in RNTester</a>.</p>
|
||||
<hr>
|
||||
<h1><a class="anchor" aria-hidden="true" id="reference"></a><a href="#reference" 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>Reference</h1>
|
||||
<h2><a class="anchor" aria-hidden="true" id="methods"></a><a href="#methods" 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>Methods</h2>
|
||||
|
||||
@@ -296,7 +296,7 @@
|
||||
width: 100%;
|
||||
"
|
||||
></div></div></div><p><block class="endBlock syntax" /></p>
|
||||
<p>Try the <a href="https://github.com/facebook/react-native/blob/master/RNTester/js/examples/PanResponder/PanResponderExample.js">PanResponder example in RNTester</a>.</p>
|
||||
<p>Try the <a href="https://github.com/facebook/react-native/blob/master/packages/rn-tester/js/examples/PanResponder/PanResponderExample.js">PanResponder example in RNTester</a>.</p>
|
||||
<hr>
|
||||
<h1><a class="anchor" aria-hidden="true" id="reference"></a><a href="#reference" 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>Reference</h1>
|
||||
<h2><a class="anchor" aria-hidden="true" id="methods"></a><a href="#methods" 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>Methods</h2>
|
||||
|
||||
@@ -125,7 +125,7 @@
|
||||
</code></pre>
|
||||
<p>The string value provided to the <code>PlatformColor</code> function must match and agree with the same string as it exists on the native platform the app is being run on. This means to avoid runtime errors the function should be wrapped in a platform check, either through a <code>Platform.OS === 'platform'</code> or a <code>Platform.Select()</code>.</p>
|
||||
<blockquote>
|
||||
<p><strong>Note:</strong> You can find a complete example that demonstrates proper, intended use of <code>PlatformColor</code> in <a href="https://github.com/facebook/react-native/blob/master/RNTester/js/examples/PlatformColor/PlatformColorExample.js">PlatformColorExample.js</a>.</p>
|
||||
<p><strong>Note:</strong> You can find a complete example that demonstrates proper, intended use of <code>PlatformColor</code> in <a href="https://github.com/facebook/react-native/blob/master/packages/rn-tester/js/examples/PlatformColor/PlatformColorExample.js">PlatformColorExample.js</a>.</p>
|
||||
</blockquote>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/pixelratio"><span class="arrow-prev">← </span><span class="function-name-prevnext">PixelRatio</span></a><a class="docs-next button" href="/docs/share"><span>Share</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#example">Example</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/docs/getting-started">Getting Started</a><a href="/docs/tutorial">Tutorial</a><a href="/docs/components-and-apis">Components and APIs</a><a href="/docs/more-resources">More Resources</a></div><div><h5>Community</h5><a href="/help">The React Native Community</a><a href="/showcase">Who's using React Native?</a><a href="https://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/blog">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="https://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2020 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
</script><script>window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));</script><script>
|
||||
|
||||
@@ -125,7 +125,7 @@
|
||||
</code></pre>
|
||||
<p>The string value provided to the <code>PlatformColor</code> function must match and agree with the same string as it exists on the native platform the app is being run on. This means to avoid runtime errors the function should be wrapped in a platform check, either through a <code>Platform.OS === 'platform'</code> or a <code>Platform.Select()</code>.</p>
|
||||
<blockquote>
|
||||
<p><strong>Note:</strong> You can find a complete example that demonstrates proper, intended use of <code>PlatformColor</code> in <a href="https://github.com/facebook/react-native/blob/master/RNTester/js/examples/PlatformColor/PlatformColorExample.js">PlatformColorExample.js</a>.</p>
|
||||
<p><strong>Note:</strong> You can find a complete example that demonstrates proper, intended use of <code>PlatformColor</code> in <a href="https://github.com/facebook/react-native/blob/master/packages/rn-tester/js/examples/PlatformColor/PlatformColorExample.js">PlatformColorExample.js</a>.</p>
|
||||
</blockquote>
|
||||
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/pixelratio"><span class="arrow-prev">← </span><span class="function-name-prevnext">PixelRatio</span></a><a class="docs-next button" href="/docs/share"><span>Share</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#example">Example</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/docs/getting-started">Getting Started</a><a href="/docs/tutorial">Tutorial</a><a href="/docs/components-and-apis">Components and APIs</a><a href="/docs/more-resources">More Resources</a></div><div><h5>Community</h5><a href="/help">The React Native Community</a><a href="/showcase">Who's using React Native?</a><a href="https://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/blog">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="https://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2020 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
||||
</script><script>window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));</script><script>
|
||||
|
||||
Reference in New Issue
Block a user