Facebook/react-native
1
0
Fork 0
mirror of https://github.com/facebook/react-native.git synced 2025-11-01 09:14:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Updated docs for next

Browse Source
This commit is contained in:
Hector Ramos
2017-03-13 11:39:49 -07:00
parent 7f6193c1cc
commit e22bc51677
16 changed files with 238 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files
blog/2017/03/01/better-list-views.html
+55
View File
File diff suppressed because one or more lines are too long
blog/2017/03/13/better-list-views.html
+55
View File
File diff suppressed because one or more lines are too long
blog/2017/03/13/idx-the-existential-function.html
+25
View File
@@ -0,0 +1,25 @@
<!DOCTYPE html><html><head><title>idx: The Existential Function</title><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width"><meta property="fb:app_id" content="1677033832619985"><meta property="fb:admins" content="121800083"><meta property="og:site_name" content="React Native"><meta property="og:title" content="idx: The Existential Function"><meta property="og:url" content="https://facebook.github.io/react-native/blog/2017/03/13/idx-the-existential-function.html"><meta property="og:image" content="https://facebook.github.io/react-native/img/opengraph.png"><meta property="og:description" content="At Facebook, we often need to access deeply nested values in data structures fetched with GraphQL. On the way to accessing these deeply nested values, it is common for one or more intermediate fields to be nullable. These intermediate fields may be null for a variety of reasons, from failed privacy checks to the mere fact that null happens to be the most flexible way to represent non-fatal errors."><meta name="twitter:site" content="@reactnative"><meta name="twitter:card" content="summary_large_image"><meta property="og:type" content="article"><meta property="article:author" content="Timothy Yung"><meta name="twitter:creator" content="@yungsters"><base href="/react-native/releases/next/"><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"><link rel="shortcut icon" href="img/favicon.png?2"><link rel="stylesheet" href="css/react-native.css"><link rel="alternate" type="application/rss+xml" title="React Native Blog" href="https://facebook.github.io/react-native/blog/feed.xml"><link href="//cdn-images.mailchimp.com/embedcode/horizontal-slim-10_7.css" rel="stylesheet" type="text/css"><script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script><script type="text/javascript">try{Typekit.load();}catch(e){}</script></head><body><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><div class="container"><div class="nav-main"><div class="wrap"><a class="nav-home" href=""><img src="img/header_logo.png">React Native</a><a class="nav-version" href="/react-native/versions.html">next</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="docs/getting-started.html" class="" data-target=".nav-docs">Docs</a></li><li><a href="/react-native/support.html" class="">Help</a></li><li><a href="/react-native/showcase.html" class="">Showcase</a></li><li><a href="/react-native/blog/" class="active">Blog</a></li></ul><div class="algolia-search-wrapper"><input id="algolia-doc-search" tabindex="0" type="text" placeholder="Search docs..."></div><ul class="nav-site nav-site-external"><li><a href="https://github.com/facebook/react-native" class="">GitHub</a></li><li><a href="http://facebook.github.io/react" class="">React</a></li></ul></div></div></div><div class="hero"><div class="wrap"><div class="text">React Native Blog</div><div class="minitext">Stay up-to-date with the latest React Native news and events.</div></div></div><section class="content wrap documentationContent"><article class="entry-body"><header class="entry-header"><h4 class="entry-authordate"><a href="https://github.com/yungsters" target="_blank" class="author">Timothy Yung</a> — <time class="date">March 13, 2017</time></h4><h1 class="entry-title">idx: The Existential Function</h1></header><div class="entry-content"><div><p>At Facebook, we often need to access deeply nested values in data structures fetched with GraphQL. On the way to accessing these deeply nested values, it is common for one or more intermediate fields to be nullable. These intermediate fields may be null for a variety of reasons, from failed privacy checks to the mere fact that null happens to be the most flexible way to represent non-fatal errors.</p><p>Unfortunately, accessing these deeply nested values is currently tedious and verbose.</p><div class="prism language-javascript">props<span class="token punctuation">.</span>user &amp;&amp;
props<span class="token punctuation">.</span>user<span class="token punctuation">.</span>friends &amp;&amp;
props<span class="token punctuation">.</span>user<span class="token punctuation">.</span>friends<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> &amp;&amp;
props<span class="token punctuation">.</span>user<span class="token punctuation">.</span>friends<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>friends</div><p>There is <a href="https://github.com/claudepache/es-optional-chaining" target="_blank">an ECMAScript proposal to introduce the existential operator</a> which will make this much more convenient. But until a time when that proposal is finalized, we want a solution that improves our quality of life, maintains existing language semantics, and encourages type safety with Flow.</p><p>We came up with an existential <em>function</em> we call <code>idx</code>.</p><div class="prism language-javascript"><span class="token function">idx<span class="token punctuation">(</span></span>props<span class="token punctuation">,</span> _ <span class="token operator">=</span><span class="token operator">&gt;</span> _<span class="token punctuation">.</span>user<span class="token punctuation">.</span>friends<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>friends<span class="token punctuation">)</span></div><p>The invocation in this code snippet behaves similarly to the boolean expression in the code snippet above, except with significantly less repetition. The <code>idx</code> function takes exactly two arguments:</p><ul><li>Any value, typically an object or array into which you want to access a nested value.</li><li>A function that receives the first argument and accesses a nested value on it.</li></ul><p>In theory, the <code>idx</code> function will try-catch errors that are the result of accessing properties on null or undefined. If such an error is caught, it will return either null or undefined. (And you can see how this might be implemented in <a href="https://github.com/facebookincubator/idx/blob/master/packages/idx/src/idx.js" target="_blank">idx.js</a>.)</p><p>In practice, try-catching every nested property access is slow, and differentiating between specific kinds of TypeErrors is fragile. To deal with these shortcomings, we created a Babel plugin that transforms the above <code>idx</code> invocation into the following expression:</p><div class="prism language-javascript">props<span class="token punctuation">.</span>user <span class="token operator">==</span> <span class="token keyword">null</span> <span class="token operator">?</span> props<span class="token punctuation">.</span>user <span class="token punctuation">:</span>
props<span class="token punctuation">.</span>user<span class="token punctuation">.</span>friends <span class="token operator">==</span> <span class="token keyword">null</span> <span class="token operator">?</span> props<span class="token punctuation">.</span>user<span class="token punctuation">.</span>friends <span class="token punctuation">:</span>
props<span class="token punctuation">.</span>user<span class="token punctuation">.</span>friends<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token operator">==</span> <span class="token keyword">null</span> <span class="token operator">?</span> props<span class="token punctuation">.</span>user<span class="token punctuation">.</span>friends<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token punctuation">:</span>
props<span class="token punctuation">.</span>user<span class="token punctuation">.</span>friends<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>friends</div><p>Finally, we added a custom Flow type declaration for <code>idx</code> that allows the traversal in the second argument to be properly type-checked while permitting nested access on nullable properties.</p><p>The function, Babel plugin, and Flow declaration are now <a href="https://github.com/facebookincubator/idx" target="_blank">available on GitHub</a>. They are used by installing the <strong>idx</strong> and <strong>babel-plugin-idx</strong> npm packages, and adding “idx” to the list of plugins in your <code>.babelrc</code> file.</p></div></div><div><aside class="author-info"><div class="author-image"><span class="the-image" style="background-image:url(https://pbs.twimg.com/profile_images/1592444107/image.jpg);"></span></div><p class="posted-on">Posted on <time class="date">March 13, 2017</time></p><p class="name-title"><a href="https://github.com/yungsters" target="_blank">Timothy Yung</a>, <span class="title">Engineering Manager at Facebook</span></p></aside><aside class="entry-share"><h3 class="small-title">Share this post</h3><div class="social-buttons"><div class="fb-like" data-layout="standard" data-share="true" data-width="225" data-show-faces="false"></div><a href="https://twitter.com/share" class="twitter-share-button" data-text="idx: The Existential Function" data-url="http://facebook.github.io/react-native/blog/2017/03/13/idx-the-existential-function.html" data-via="yungsters" data-related="reactnative" data-show-count="false">Tweet</a></div></aside></div></article></section><footer class="nav-footer"><section class="sitemap"><a href="/react-native" class="nav-home"><img src="img/header_logo.png" alt="React Native" width="66" height="58"></a><div><h5><a href="docs/">Docs</a></h5><a href="docs/getting-started.html">Getting Started</a><a href="docs/tutorial.html">Tutorial</a><a href="docs/integration-with-existing-apps.html">Integration With Existing Apps</a><a href="docs/more-resources.html">More Resources</a></div><div><h5><a href="/react-native/support.html">Community</a></h5><a href="/react-native/showcase.html">Showcase</a><a href="http://www.meetup.com/topics/react-native/" target="_blank">Upcoming Events</a><a href="https://www.facebook.com/groups/react.native.community" target="_blank">Facebook Group</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a></div><div><h5><a href="/react-native/support.html">Help</a></h5><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Stack Overflow</a><a href="https://discord.gg/0ZcbPKXt5bZjGY5n">Reactiflux Chat</a><a href="/react-native/versions.html" target="_blank">Latest Releases</a><a href="https://react-native.canny.io/feature-requests" target="_blank">Feature Requests</a></div><div><h5>More</h5><a href="/react-native/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://facebook.github.io/react/" target="_blank">React</a></div></section><section class="newsletter"><div id="mc_embed_signup"><form action="//reactnative.us10.list-manage.com/subscribe/post?u=db0dd948e2b729ee62625b1a8&amp;id=47cd41008f" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate><div id="mc_embed_signup_scroll"><label for="mce-EMAIL"><h5>Get the React Native Newsletter</h5></label><input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required><div style="position:absolute;left:-5000px;" aria-hidden="true"><input type="text" name="b_db0dd948e2b729ee62625b1a8_47cd41008f" tabindex="-1" value=""></div><div class="clear"><input type="submit" value="Sign up" name="subscribe" id="mc-embedded-subscribe" class="button"></div></div></form></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 © 2017 Facebook Inc.</section></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-41298772-2', 'facebook.github.io');
ga('send', 'pageview');
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)
){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
docsearch({
apiKey: '2c98749b4a1e588efec53b2acec13025',
indexName: 'react-native-versions',
inputSelector: '#algolia-doc-search',
algoliaOptions: { facetFilters: [ "tags:master" ], hitsPerPage: 5 }
});
</script><script src="js/scripts.js"></script><script type="text/javascript" src="//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"></script><script type="text/javascript">(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';}(jQuery));var $mcj = jQuery.noConflict(true);</script></body></html>
blog/2017/03/13/introducing-create-react-native-app.html
+22
View File
File diff suppressed because one or more lines are too long
blog/feed.xml
+37 -1
View File
@@ -2,12 +2,48 @@
<feed xmlns="http://www.w3.org/2005/Atom">
<id>https://facebook.github.io/react-native/blog/</id>
<title>React Native Blog</title>
<updated>2017-02-14T00:00:00Z</updated>
<updated>2017-03-13T00:00:00Z</updated>
<link rel="alternate" href="https://facebook.github.io/react-native/blog/"/>
<subtitle>The best place to stay up-to-date with the latest React Native news and events.</subtitle>
<logo>https://facebook.github.io/react-native/img/header_logo.png</logo>
<rights>Copyright © 2017 Facebook Inc.</rights>
<generator>Feed for Node.js</generator>
<entry>
<title type="html"><![CDATA[Introducing Create React Native App]]></title>
<id>https://facebook.github.io/react-native/blog/2017/03/13/introducing-create-react-native-app.html</id>
<link href="https://facebook.github.io/react-native/blog/2017/03/13/introducing-create-react-native-app.html">
</link>
<updated>2017-03-13T00:00:00Z</updated>
<summary type="html"><![CDATA[Today we’re announcing Create React Native App: a new tool that makes it significantly easier to get started with a React Native project! It’s heavily inspired by the design of Create React App and is the product of a collaboration between Facebook and Expo (formerly Exponent).]]></summary>
<author>
<name>Adam Perry</name>
<uri>https://github.com/dikaiosune</uri>
</author>
</entry>
<entry>
<title type="html"><![CDATA[idx: The Existential Function]]></title>
<id>https://facebook.github.io/react-native/blog/2017/03/13/idx-the-existential-function.html</id>
<link href="https://facebook.github.io/react-native/blog/2017/03/13/idx-the-existential-function.html">
</link>
<updated>2017-03-13T00:00:00Z</updated>
<summary type="html"><![CDATA[At Facebook, we often need to access deeply nested values in data structures fetched with GraphQL. On the way to accessing these deeply nested values, it is common for one or more intermediate fields to be nullable. These intermediate fields may be null for a variety of reasons, from failed privacy checks to the mere fact that null happens to be the most flexible way to represent non-fatal errors.]]></summary>
<author>
<name>Timothy Yung</name>
<uri>https://github.com/yungsters</uri>
</author>
</entry>
<entry>
<title type="html"><![CDATA[Better List Views in React Native]]></title>
<id>https://facebook.github.io/react-native/blog/2017/03/13/better-list-views.html</id>
<link href="https://facebook.github.io/react-native/blog/2017/03/13/better-list-views.html">
</link>
<updated>2017-03-13T00:00:00Z</updated>
<summary type="html"><![CDATA[Many of you have started playing with some of our new List components already after our teaser announcement in the community group, but we are officially announcing them today! No more ListViews or DataSources, stale rows, ignored bugs, or excessive memory consumption - with the latest React Native March 2017 release candidate (0.43-rc.1) you can pick from the new suite of components what best fits your use-case, with great perf and feature sets out of the box:]]></summary>
<author>
<name>Spencer Ahrens</name>
<uri>https://github.com/sahrens</uri>
</author>
</entry>
<entry>
<title type="html"><![CDATA[Using Native Driver for Animated]]></title>
<id>https://facebook.github.io/react-native/blog/2017/02/14/using-native-driver-for-animated.html</id>
blog/index.html
+1 -1
View File
File diff suppressed because one or more lines are too long
releases/next/css/react-native.css
+2 -1
View File
@@ -1701,7 +1701,8 @@ input#algolia-doc-search:focus {
color: rgba(0, 0, 0, 0.4); }
.home-showcase-section .showcase img {
width: 110px;
width: 100px;
height: 100px;
border-radius: 20px; }
.showcaseHeader {
releases/next/docs/flatlist.html
+6 -9
View File
@@ -10,14 +10,14 @@ is not <code>===</code> after updates, otherwise your UI may not update on chang
offscreen. This means it&#x27;s possible to scroll faster than the fill rate ands momentarily see
blank content. This is a tradeoff that can be adjusted to suit the needs of each application,
and we are working on improving it behind the scenes.</li><li>By default, the list looks for a <code>key</code> prop on each item and uses that for the React key.
Alternatively, you can provide a custom <code>keyExtractor</code> prop.</li></ul></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/flatlist.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="footercomponent"></a>FooterComponent?: <span class="propType"><span>?ReactClass&lt;any&gt;</span></span> <a class="hash-link" href="docs/flatlist.html#footercomponent">#</a></h4><div><p>Rendered at the bottom of all the items.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="headercomponent"></a>HeaderComponent?: <span class="propType"><span>?ReactClass&lt;any&gt;</span></span> <a class="hash-link" href="docs/flatlist.html#headercomponent">#</a></h4><div><p>Rendered at the top of all the items.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="separatorcomponent"></a>SeparatorComponent?: <span class="propType"><span>?ReactClass&lt;any&gt;</span></span> <a class="hash-link" href="docs/flatlist.html#separatorcomponent">#</a></h4><div><p>Rendered in between each item, but not at the top or bottom.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="columnwrapperstyle"></a>columnWrapperStyle?: <span class="propType">StyleObj</span> <a class="hash-link" href="docs/flatlist.html#columnwrapperstyle">#</a></h4><div><p>Optional custom style for multi-item rows generated when numColumns &gt; 1</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="data"></a>data: <span class="propType"><span>?Array&lt;ItemT&gt;</span></span> <a class="hash-link" href="docs/flatlist.html#data">#</a></h4><div><p>For simplicity, data is just a plain array. If you want to use something else, like an
Alternatively, you can provide a custom <code>keyExtractor</code> prop.</li></ul></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/flatlist.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="itemseparatorcomponent"></a>ItemSeparatorComponent?: <span class="propType"><span>?ReactClass&lt;any&gt;</span></span> <a class="hash-link" href="docs/flatlist.html#itemseparatorcomponent">#</a></h4><div><p>Rendered in between each item, but not at the top or bottom.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="listfootercomponent"></a>ListFooterComponent?: <span class="propType"><span>?ReactClass&lt;any&gt;</span></span> <a class="hash-link" href="docs/flatlist.html#listfootercomponent">#</a></h4><div><p>Rendered at the bottom of all the items.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="listheadercomponent"></a>ListHeaderComponent?: <span class="propType"><span>?ReactClass&lt;any&gt;</span></span> <a class="hash-link" href="docs/flatlist.html#listheadercomponent">#</a></h4><div><p>Rendered at the top of all the items.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="columnwrapperstyle"></a>columnWrapperStyle?: <span class="propType">StyleObj</span> <a class="hash-link" href="docs/flatlist.html#columnwrapperstyle">#</a></h4><div><p>Optional custom style for multi-item rows generated when numColumns &gt; 1</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="data"></a>data: <span class="propType"><span>?Array&lt;ItemT&gt;</span></span> <a class="hash-link" href="docs/flatlist.html#data">#</a></h4><div><p>For simplicity, data is just a plain array. If you want to use something else, like an
immutable list, use the underlying <code>VirtualizedList</code> directly.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="getitem"></a>getItem?: <a class="hash-link" href="docs/flatlist.html#getitem">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="getitemcount"></a>getItemCount?: <a class="hash-link" href="docs/flatlist.html#getitemcount">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="getitemlayout"></a>getItemLayout?: <span class="propType">(data: ?Array&lt;ItemT&gt;, index: number) =&gt;
{length: number, offset: number, index: number}</span> <a class="hash-link" href="docs/flatlist.html#getitemlayout">#</a></h4><div><p><code>getItemLayout</code> is an optional optimizations that let us skip measurement of dynamic content if
you know the height of items a priori. <code>getItemLayout</code> is the most efficient, and is easy to
use if you have fixed height items, for example:</p><div class="prism language-javascript">getItemLayout<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span>data<span class="token punctuation">,</span> index<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">(</span>
<span class="token punctuation">{</span>length<span class="token punctuation">:</span> ITEM_HEIGHT<span class="token punctuation">,</span> offset<span class="token punctuation">:</span> ITEM_HEIGHT <span class="token operator">*</span> index<span class="token punctuation">,</span> index<span class="token punctuation">}</span>
<span class="token punctuation">)</span><span class="token punctuation">}</span></div><p>Remember to include separator length (height or width) in your offset calculation if you
specify <code>SeparatorComponent</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="horizontal"></a>horizontal?: <span class="propType"><span>?boolean</span></span> <a class="hash-link" href="docs/flatlist.html#horizontal">#</a></h4><div><p>If true, renders items next to each other horizontally instead of stacked vertically.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="keyextractor"></a>keyExtractor: <span class="propType">(item: ItemT, index: number) =&gt; string</span> <a class="hash-link" href="docs/flatlist.html#keyextractor">#</a></h4><div><p>Used to extract a unique key for a given item at the specified index. Key is used for caching
specify <code>ItemSeparatorComponent</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="horizontal"></a>horizontal?: <span class="propType"><span>?boolean</span></span> <a class="hash-link" href="docs/flatlist.html#horizontal">#</a></h4><div><p>If true, renders items next to each other horizontally instead of stacked vertically.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="keyextractor"></a>keyExtractor: <span class="propType">(item: ItemT, index: number) =&gt; string</span> <a class="hash-link" href="docs/flatlist.html#keyextractor">#</a></h4><div><p>Used to extract a unique key for a given item at the specified index. Key is used for caching
and as the react key to track item re-ordering. The default extractor checks <code>item.key</code>, then
falls back to using the index, like React does.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="legacyimplementation"></a>legacyImplementation?: <span class="propType"><span>?boolean</span></span> <a class="hash-link" href="docs/flatlist.html#legacyimplementation">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="numcolumns"></a>numColumns: <span class="propType">number</span> <a class="hash-link" href="docs/flatlist.html#numcolumns">#</a></h4><div><p>Multiple columns can only be rendered with <code>horizontal={false}`` and will zig-zag like a</code>flexWrap` layout. Items should all be the same height - masonry layouts are not supported.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onendreached"></a>onEndReached?: <span class="propType"><span>?(info: {distanceFromEnd: number}) =&gt; void</span></span> <a class="hash-link" href="docs/flatlist.html#onendreached">#</a></h4><div><p>Called once when the scroll position gets within <code>onEndReachedThreshold</code> of the rendered
content.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onendreachedthreshold"></a>onEndReachedThreshold?: <span class="propType"><span>?number</span></span> <a class="hash-link" href="docs/flatlist.html#onendreachedthreshold">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="onrefresh"></a>onRefresh?: <span class="propType"><span>?() =&gt; void</span></span> <a class="hash-link" href="docs/flatlist.html#onrefresh">#</a></h4><div><p>If provided, a standard RefreshControl will be added for &quot;Pull to Refresh&quot; functionality. Make
@@ -28,10 +28,7 @@ sure to also set the <code>refreshing</code> prop correctly.</p></div></div><div
&lt;TouchableOpacity<span class="token operator">/</span><span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span>
&lt;FlatList data<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token punctuation">{</span>title<span class="token punctuation">:</span> <span class="token string">&#x27;Title Text&#x27;</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">&#x27;item1&#x27;</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span> renderItem<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_renderItem<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">&gt;</span></div><p>Provides additional metadata like <code>index</code> if you need it.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="shoulditemupdate"></a>shouldItemUpdate: <span class="propType">(
prevInfo: {item: ItemT, index: number},
nextInfo: {item: ItemT, index: number}
) =&gt; boolean</span> <a class="hash-link" href="docs/flatlist.html#shoulditemupdate">#</a></h4><div><p>Optional optimization to minimize re-rendering items.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="viewabilityconfig"></a>viewabilityConfig?: <span class="propType">ViewabilityConfig</span> <a class="hash-link" href="docs/flatlist.html#viewabilityconfig">#</a></h4><div><p>See <code>ViewabilityHelper</code> for flow type and further documentation.</p></div></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/flatlist.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="scrolltoend"></a>scrollToEnd<span class="methodType">(params?: object)</span> <a class="hash-link" href="docs/flatlist.html#scrolltoend">#</a></h4><div><p>Scrolls to the end of the content. May be janky without <code>getItemLayout</code> prop.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="scrolltoindex"></a>scrollToIndex<span class="methodType">(params: object)</span> <a class="hash-link" href="docs/flatlist.html#scrolltoindex">#</a></h4><div><p>Scrolls to the item at a the specified index such that it is positioned in the viewable area
&lt;FlatList data<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token punctuation">{</span>title<span class="token punctuation">:</span> <span class="token string">&#x27;Title Text&#x27;</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">&#x27;item1&#x27;</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span> renderItem<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_renderItem<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">&gt;</span></div><p>Provides additional metadata like <code>index</code> if you need it.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="viewabilityconfig"></a>viewabilityConfig?: <span class="propType">ViewabilityConfig</span> <a class="hash-link" href="docs/flatlist.html#viewabilityconfig">#</a></h4><div><p>See <code>ViewabilityHelper</code> for flow type and further documentation.</p></div></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/flatlist.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="scrolltoend"></a>scrollToEnd<span class="methodType">(params?: object)</span> <a class="hash-link" href="docs/flatlist.html#scrolltoend">#</a></h4><div><p>Scrolls to the end of the content. May be janky without <code>getItemLayout</code> prop.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="scrolltoindex"></a>scrollToIndex<span class="methodType">(params: object)</span> <a class="hash-link" href="docs/flatlist.html#scrolltoindex">#</a></h4><div><p>Scrolls to the item at a the specified index such that it is positioned in the viewable area
such that <code>viewPosition</code> 0 places it at the top, 1 at the bottom, and 0.5 centered in the
middle.</p><p>May be janky without <code>getItemLayout</code> prop.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="scrolltoitem"></a>scrollToItem<span class="methodType">(params: object)</span> <a class="hash-link" href="docs/flatlist.html#scrolltoitem">#</a></h4><div><p>Requires linear scan through data - use <code>scrollToIndex</code> instead if possible. May be janky
without <code>getItemLayout</code> prop.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="scrolltooffset"></a>scrollToOffset<span class="methodType">(params: object)</span> <a class="hash-link" href="docs/flatlist.html#scrolltooffset">#</a></h4><div><p>Scroll to a specific content pixel offset, like a normal <code>ScrollView</code>.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="recordinteraction"></a>recordInteraction<span class="methodType">()</span> <a class="hash-link" href="docs/flatlist.html#recordinteraction">#</a></h4><div><p>Tells the list an interaction has occured, which should trigger viewability calculations, e.g.
@@ -148,9 +145,9 @@ class <span class="token class-name">FlatListExample</span> extends <span class=
&lt;<span class="token operator">/</span>View<span class="token operator">&gt;</span>
&lt;SeparatorComponent <span class="token operator">/</span><span class="token operator">&gt;</span>
&lt;AnimatedFlatList
HeaderComponent<span class="token operator">=</span><span class="token punctuation">{</span>HeaderComponent<span class="token punctuation">}</span>
FooterComponent<span class="token operator">=</span><span class="token punctuation">{</span>FooterComponent<span class="token punctuation">}</span>
SeparatorComponent<span class="token operator">=</span><span class="token punctuation">{</span>SeparatorComponent<span class="token punctuation">}</span>
ItemSeparatorComponent<span class="token operator">=</span><span class="token punctuation">{</span>SeparatorComponent<span class="token punctuation">}</span>
ListHeaderComponent<span class="token operator">=</span><span class="token punctuation">{</span>HeaderComponent<span class="token punctuation">}</span>
ListFooterComponent<span class="token operator">=</span><span class="token punctuation">{</span>FooterComponent<span class="token punctuation">}</span>
data<span class="token operator">=</span><span class="token punctuation">{</span>filteredData<span class="token punctuation">}</span>
debug<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>debug<span class="token punctuation">}</span>
disableVirtualization<span class="token operator">=</span><span class="token punctuation">{</span><span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>virtualized<span class="token punctuation">}</span>
releases/next/docs/getting-started.html
+17 -13
View File
@@ -48,30 +48,34 @@ one to start with, since the setup is a bit different.</p><span><div class="togg
</span><span><block class="mac ios" />
</span><h2><a class="anchor" name="installing-dependencies"></a>Installing Dependencies <a class="hash-link" href="docs/getting-started.html#installing-dependencies">#</a></h2><p>You will need Node.js, Watchman, the React Native command line interface, and Xcode.</p><span><block class="mac android" />
</span><h2><a class="anchor" name="installing-dependencies"></a>Installing Dependencies <a class="hash-link" href="docs/getting-started.html#installing-dependencies">#</a></h2><p>You will need Node, Watchman, the React Native command line interface, and Xcode.</p><span><block class="mac android" />
</span><h2><a class="anchor" name="installing-dependencies"></a>Installing Dependencies <a class="hash-link" href="docs/getting-started.html#installing-dependencies">#</a></h2><p>You will need Node.js, Watchman, the React Native command line interface, and Android Studio.</p><span><block class="windows linux android" />
</span><h2><a class="anchor" name="installing-dependencies"></a>Installing Dependencies <a class="hash-link" href="docs/getting-started.html#installing-dependencies">#</a></h2><p>You will need Node, Watchman, the React Native command line interface, a JDK, and Android Studio.</p><span><block class="linux android" />
</span><h2><a class="anchor" name="installing-dependencies"></a>Installing Dependencies <a class="hash-link" href="docs/getting-started.html#installing-dependencies">#</a></h2><p>You will need Node.js, the React Native command line interface, and Android Studio.</p><span><block class="mac ios android" />
</span><h2><a class="anchor" name="installing-dependencies"></a>Installing Dependencies <a class="hash-link" href="docs/getting-started.html#installing-dependencies">#</a></h2><p>You will need Node, the React Native command line interface, a JDK, and Android Studio.</p><span><block class="windows android" />
</span><h2><a class="anchor" name="installing-dependencies"></a>Installing Dependencies <a class="hash-link" href="docs/getting-started.html#installing-dependencies">#</a></h2><p>You will need Node, the React Native command line interface, Python2, a JDK, and Android Studio.</p><span><block class="mac ios android" />
</span><h3><a class="anchor" name="node-watchman"></a>Node, Watchman <a class="hash-link" href="docs/getting-started.html#node-watchman">#</a></h3><p>We recommend installing Node and Watchman using <a href="http://brew.sh/" target="_blank">Homebrew</a>. Run the following commands in a Terminal after installing Homebrew:</p><div class="prism language-javascript">brew install node
brew install watchman</div><blockquote><p><a href="https://facebook.github.io/watchman" target="_blank">Watchman</a> is a tool by Facebook for watching
changes in the filesystem. It is highly recommended you install it for better performance.</p></blockquote><span><block class="linux android" />
brew install watchman</div><p>If you have already installed Node on your system, make sure it is version 4 or newer.</p><p><a href="https://facebook.github.io/watchman" target="_blank">Watchman</a> is a tool by Facebook for watching changes in the filesystem. It is highly recommended you install it for better performance.</p><span><block class="linux android" />
</span><h3><a class="anchor" name="node"></a>Node <a class="hash-link" href="docs/getting-started.html#node">#</a></h3><p>Follow the <a href="https://nodejs.org/en/download/package-manager/" target="_blank">installation instructions for your Linux distribution</a> to install Node.js 4 or newer.</p><span><block class='windows android' />
</span><h3><a class="anchor" name="node"></a>Node <a class="hash-link" href="docs/getting-started.html#node">#</a></h3><p>Follow the <a href="https://nodejs.org/en/download/package-manager/" target="_blank">installation instructions for your Linux distribution</a> to install Node 4 or newer.</p><span><block class='windows android' />
</span><h3><a class="anchor" name="node"></a>Node <a class="hash-link" href="docs/getting-started.html#node">#</a></h3><p>We recommend installing Node.js and Python2 via <a href="https://chocolatey.org" target="_blank">Chocolatey</a>, a popular package manager for Windows. Open a Command Prompt as Administrator, then run:</p><div class="prism language-javascript">choco install nodejs<span class="token punctuation">.</span>install
choco install python2</div><blockquote><p>You can find additional installation options on <a href="https://nodejs.org/en/download/" target="_blank">Node.js&#x27;s Downloads page</a>.</p></blockquote><span><block class="mac ios android" />
</span><h3><a class="anchor" name="node-python2-jdk"></a>Node, Python2, JDK <a class="hash-link" href="docs/getting-started.html#node-python2-jdk">#</a></h3><p>We recommend installing Node and Python2 via <a href="https://chocolatey.org" target="_blank">Chocolatey</a>, a popular package manager for Windows.</p><p>Android Studio, which we will install next, requires a recent version of the <a href="http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html" target="_blank">Java SE Development Kit (JDK)</a> which can be installed using Chocolatey.</p><p>Open a Command Prompt as Administrator, then run:</p><div class="prism language-javascript">choco install nodejs<span class="token punctuation">.</span>install
choco install python2
choco install jdk8</div><p>If you have already installed Node on your system, make sure it is version 4 or newer. If you already have a JDK on your system, make sure it is version 8 or newer.</p><blockquote><p>You can find additional installation options on <a href="https://nodejs.org/en/download/" target="_blank">Node.js&#x27;s Downloads page</a>.</p></blockquote><span><block class="mac ios android" />
</span><h3><a class="anchor" name="the-react-native-cli"></a>The React Native CLI <a class="hash-link" href="docs/getting-started.html#the-react-native-cli">#</a></h3><p>Node.js comes with npm, which lets you install the React Native command line interface.</p><p>Run the following command in a Terminal:</p><div class="prism language-javascript">npm install <span class="token operator">-</span>g react<span class="token operator">-</span>native<span class="token operator">-</span>cli</div><blockquote><p>If you get an error like <code>Cannot find module &#x27;npmlog&#x27;</code>, try installing npm directly: <code>curl -0 -L https://npmjs.org/install.sh | sudo sh</code>.</p></blockquote><span><block class="windows linux android" />
</span><h3><a class="anchor" name="the-react-native-cli"></a>The React Native CLI <a class="hash-link" href="docs/getting-started.html#the-react-native-cli">#</a></h3><p>Node comes with npm, which lets you install the React Native command line interface.</p><p>Run the following command in a Terminal:</p><div class="prism language-javascript">npm install <span class="token operator">-</span>g react<span class="token operator">-</span>native<span class="token operator">-</span>cli</div><blockquote><p>If you get an error like <code>Cannot find module &#x27;npmlog&#x27;</code>, try installing npm directly: <code>curl -0 -L https://npmjs.org/install.sh | sudo sh</code>.</p></blockquote><span><block class="windows linux android" />
</span><h3><a class="anchor" name="the-react-native-cli"></a>The React Native CLI <a class="hash-link" href="docs/getting-started.html#the-react-native-cli">#</a></h3><p>Node.js comes with npm, which lets you install the React Native command line interface.</p><p>Run the following command in a Terminal:</p><div class="prism language-javascript">npm install <span class="token operator">-</span>g react<span class="token operator">-</span>native<span class="token operator">-</span>cli</div><blockquote><p>If you get an error like <code>Cannot find module &#x27;npmlog&#x27;</code>, try installing npm directly: <code>curl -0 -L https://npmjs.org/install.sh | sudo sh</code>.</p></blockquote><span><block class="mac ios" />
</span><h3><a class="anchor" name="the-react-native-cli"></a>The React Native CLI <a class="hash-link" href="docs/getting-started.html#the-react-native-cli">#</a></h3><p>Node comes with npm, which lets you install the React Native command line interface.</p><p>Run the following command in a Terminal:</p><div class="prism language-javascript">npm install <span class="token operator">-</span>g react<span class="token operator">-</span>native<span class="token operator">-</span>cli</div><blockquote><p>If you get an error like <code>Cannot find module &#x27;npmlog&#x27;</code>, try installing npm directly: <code>curl -0 -L https://npmjs.org/install.sh | sudo sh</code>.</p></blockquote><span><block class="mac ios" />
</span><h3><a class="anchor" name="xcode"></a>Xcode <a class="hash-link" href="docs/getting-started.html#xcode">#</a></h3><p>The easiest way to install Xcode 8 is via the <a href="https://itunes.apple.com/us/app/xcode/id497799835?mt=12" target="_blank">Mac App Store</a>. Installing Xcode will also install the iOS Simulator and all the necessary tools to build your iOS app.</p><p>You will also need to install the Xcode Command Line Tools. Open Xcode, then choose &quot;Preferences...&quot; from the Xcode menu. Go to the Locations panel and install the tools by selecting the most recent version in the Command Line Tools dropdown.</p><p><img src="img/XcodeCommandLineTools.png" alt="Xcode Command Line Tools"></p><span><block class="mac linux windows android" />
</span><h3><a class="anchor" name="xcode"></a>Xcode <a class="hash-link" href="docs/getting-started.html#xcode">#</a></h3><p>The easiest way to install Xcode is via the <a href="https://itunes.apple.com/us/app/xcode/id497799835?mt=12" target="_blank">Mac App Store</a>. Installing Xcode will also install the iOS Simulator and all the necessary tools to build your iOS app.</p><p>If you have already installed Xcode on your system, make sure it is version 8 or higher.</p><p>You will also need to install the Xcode Command Line Tools. Open Xcode, then choose &quot;Preferences...&quot; from the Xcode menu. Go to the Locations panel and install the tools by selecting the most recent version in the Command Line Tools dropdown.</p><p><img src="img/XcodeCommandLineTools.png" alt="Xcode Command Line Tools"></p><span><block class="mac linux windows android" />
</span><h3><a class="anchor" name="android-development-environment"></a>Android Development Environment <a class="hash-link" href="docs/getting-started.html#android-development-environment">#</a></h3><p>Setting up your development environment can be somewhat tedious if you&#x27;re new to Android development. If you&#x27;re already familiar with Android development, there are a few things you may need to configure. In either case, please make sure to carefully follow the next few steps.</p><h4><a class="anchor" name="1-download-and-install-android-studio"></a>1. Download and install Android Studio <a class="hash-link" href="docs/getting-started.html#1-download-and-install-android-studio">#</a></h4><p><a href="https://developer.android.com/studio/install.html" target="_blank">Android Studio</a> provides the Android SDK and AVD (emulator) required to run and test your React Native apps.</p><span><block class="mac android" />
</span><h3><a class="anchor" name="android-development-environment"></a>Android Development Environment <a class="hash-link" href="docs/getting-started.html#android-development-environment">#</a></h3><p>Setting up your development environment can be somewhat tedious if you&#x27;re new to Android development. If you&#x27;re already familiar with Android development, there are a few things you may need to configure. In either case, please make sure to carefully follow the next few steps.</p><span><block class="mac linux android" />
</span><blockquote><p>Android Studio requires a recent version of the <a href="http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html" target="_blank">Java SE Development Kit (JDK)</a>.</p></blockquote><span><block class="mac windows android" />
</span><blockquote><p>Android Studio requires a recent version of the <a href="http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html" target="_blank">Java SE Development Kit (JDK)</a>. Go ahead and install JDK 8 or newer if needed.</p></blockquote><span><block class="mac linux windows android" />
</span><h4><a class="anchor" name="1-download-and-install-android-studio"></a>1. Download and install Android Studio <a class="hash-link" href="docs/getting-started.html#1-download-and-install-android-studio">#</a></h4><p>Android Studio provides the Android SDK and AVD (emulator) required to run and test your React Native apps. <a href="https://developer.android.com/studio/index.html" target="_blank">Download Android Studio</a>, then follow the <a href="https://developer.android.com/studio/install.html" target="_blank">installation instructions</a>. Choose <code>Custom</code> installation when prompted by the Setup Wizard, and proceed to the next step.</p><span><block class="mac windows android" />
</span><h4><a class="anchor" name="2-install-the-avd-and-haxm"></a>2. Install the AVD and HAXM <a class="hash-link" href="docs/getting-started.html#2-install-the-avd-and-haxm">#</a></h4><p>Android Virtual Devices allow you to run Android apps on your computer without the need for an actual Android phone or tablet. Choose <code>Custom</code> installation when running Android Studio for the first time. Make sure the boxes next to all of the following are checked:</p><ul><li><code>Android SDK</code></li><li><code>Android SDK Platform</code></li><li><code>Performance (Intel ® HAXM)</code></li><li><code>Android Virtual Device</code></li></ul><p>Then, click &quot;Next&quot; to install all of these components.</p><blockquote><p>If you&#x27;ve already installed Android Studio before, you can still <a href="https://software.intel.com/en-us/android/articles/installation-instructions-for-intel-hardware-accelerated-execution-manager-windows" target="_blank">install HAXM</a> without performing a custom installation.</p></blockquote><span><block class="linux android" />
releases/next/docs/listview.html
+5 -3
View File
@@ -62,14 +62,16 @@ are rendered. Defaults to returning a ScrollView with the given props.</p></div>
below each row but not the last row if there is a section header below.
Take a sectionID and rowID of the row above and whether its adjacent row
is highlighted.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="scrollrenderaheaddistance"></a>scrollRenderAheadDistance: <span class="propType">number</span> <a class="hash-link" href="docs/listview.html#scrollrenderaheaddistance">#</a></h4><div><p>How early to start rendering rows before they come on screen, in
pixels.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="stickyheaderindices"></a><span class="platform">ios</span>stickyHeaderIndices: <span class="propType"><span>[number]</span></span> <a class="hash-link" href="docs/listview.html#stickyheaderindices">#</a></h4><div><p>An array of child indices determining which children get docked to the
pixels.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="stickyheaderindices"></a>stickyHeaderIndices: <span class="propType"><span>[number]</span></span> <a class="hash-link" href="docs/listview.html#stickyheaderindices">#</a></h4><div><p>An array of child indices determining which children get docked to the
top of the screen when scrolling. For example, passing
<code>stickyHeaderIndices={[0]}</code> will cause the first child to be fixed to the
top of the scroll view. This property is not supported in conjunction
with <code>horizontal={true}</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="stickysectionheadersenabled"></a><span class="platform">ios</span>stickySectionHeadersEnabled?: <span class="propType">bool</span> <a class="hash-link" href="docs/listview.html#stickysectionheadersenabled">#</a></h4><div><p>Makes the sections headers sticky. The sticky behavior means that it
with <code>horizontal={true}</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="stickysectionheadersenabled"></a>stickySectionHeadersEnabled?: <span class="propType">bool</span> <a class="hash-link" href="docs/listview.html#stickysectionheadersenabled">#</a></h4><div><p>Makes the sections headers sticky. The sticky behavior means that it
will scroll with the content at the top of the section until it reaches
the top of the screen, at which point it will stick to the top until it
is pushed off the screen by the next section header.</p></div></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/listview.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="getmetrics"></a>getMetrics<span class="methodType">()</span> <a class="hash-link" href="docs/listview.html#getmetrics">#</a></h4><div><p>Exports some data, e.g. for perf investigations or analytics.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="scrollto"></a>scrollTo<span class="methodType">(...args: Array)</span> <a class="hash-link" href="docs/listview.html#scrollto">#</a></h4><div><p>Scrolls to a given x, y offset, either immediately or with a smooth animation.</p><p>See <code>ScrollView#scrollTo</code>.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="scrolltoend"></a>scrollToEnd<span class="methodType">(options?: object)</span> <a class="hash-link" href="docs/listview.html#scrolltoend">#</a></h4><div><p>If this is a vertical ListView scrolls to the bottom.
is pushed off the screen by the next section header. This property is
not supported in conjunction with <code>horizontal={true}</code>. Only enabled by
default on iOS because of typical platform standards.</p></div></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/listview.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="getmetrics"></a>getMetrics<span class="methodType">()</span> <a class="hash-link" href="docs/listview.html#getmetrics">#</a></h4><div><p>Exports some data, e.g. for perf investigations or analytics.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="scrollto"></a>scrollTo<span class="methodType">(...args: Array)</span> <a class="hash-link" href="docs/listview.html#scrollto">#</a></h4><div><p>Scrolls to a given x, y offset, either immediately or with a smooth animation.</p><p>See <code>ScrollView#scrollTo</code>.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="scrolltoend"></a>scrollToEnd<span class="methodType">(options?: object)</span> <a class="hash-link" href="docs/listview.html#scrolltoend">#</a></h4><div><p>If this is a vertical ListView scrolls to the bottom.
If this is a horizontal ListView scrolls to the right.</p><p>Use <code>scrollToEnd({animated: true})</code> for smooth animated scrolling,
<code>scrollToEnd({animated: false})</code> for immediate scrolling.
If no options are passed, <code>animated</code> defaults to true.</p><p>See <code>ScrollView#scrollToEnd</code>.</p></div></div></div></span></div><p class="edit-page-block">You can <a target="_blank" href="https://github.com/facebook/react-native/blob/master/Libraries/CustomComponents/ListView/ListView.js">edit the content above on GitHub</a> and send us a pull request!</p><div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/listview.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/js/ListViewExample.js">Edit on GitHub</a></td></tr></tbody></table><div class="example-container"><div class="prism language-javascript"><span class="token string">&#x27;use strict&#x27;</span><span class="token punctuation">;</span>
releases/next/docs/native-modules-android.html
+1 -35
View File
@@ -160,41 +160,7 @@ public class <span class="token class-name">UIManagerModule</span> extends <span
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token function">measureLayout<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span></div><h3><a class="anchor" name="threading"></a>Threading <a class="hash-link" href="docs/native-modules-android.html#threading">#</a></h3><p>Native modules should not have any assumptions about what thread they are being called on, as the current assignment is subject to change in the future. If a blocking call is required, the heavy work should be dispatched to an internally managed worker thread, and any callbacks distributed from there.</p><h3><a class="anchor" name="sending-events-to-javascript"></a>Sending Events to JavaScript <a class="hash-link" href="docs/native-modules-android.html#sending-events-to-javascript">#</a></h3><p>Native modules can signal events to JavaScript without being invoked directly. The easiest way to do this is to use the <code>RCTDeviceEventEmitter</code> which can be obtained from the <code>ReactContext</code> as in the code snippet below.</p><div class="prism language-javascript"><span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span>
private void <span class="token function">sendEvent<span class="token punctuation">(</span></span>ReactContext reactContext<span class="token punctuation">,</span>
String eventName<span class="token punctuation">,</span>
@Nullable WritableMap params<span class="token punctuation">)</span> <span class="token punctuation">{</span>
reactContext
<span class="token punctuation">.</span><span class="token function">getJSModule<span class="token punctuation">(</span></span>DeviceEventManagerModule<span class="token punctuation">.</span>RCTDeviceEventEmitter<span class="token punctuation">.</span>class<span class="token punctuation">)</span>
<span class="token punctuation">.</span><span class="token function">emit<span class="token punctuation">(</span></span>eventName<span class="token punctuation">,</span> params<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span>
WritableMap params <span class="token operator">=</span> Arguments<span class="token punctuation">.</span><span class="token function">createMap<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span>
<span class="token function">sendEvent<span class="token punctuation">(</span></span>reactContext<span class="token punctuation">,</span> <span class="token string">&quot;keyboardWillShow&quot;</span><span class="token punctuation">,</span> params<span class="token punctuation">)</span><span class="token punctuation">;</span></div><p>JavaScript modules can then register to receive events by <code>addListenerOn</code> using the <code>Subscribable</code> mixin</p><div class="prism language-javascript">import <span class="token punctuation">{</span> DeviceEventEmitter <span class="token punctuation">}</span> from <span class="token string">&#x27;react-native&#x27;</span><span class="token punctuation">;</span>
<span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span>
<span class="token keyword">var</span> ScrollResponderMixin <span class="token operator">=</span> <span class="token punctuation">{</span>
mixins<span class="token punctuation">:</span> <span class="token punctuation">[</span>Subscribable<span class="token punctuation">.</span>Mixin<span class="token punctuation">]</span><span class="token punctuation">,</span>
componentWillMount<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">addListenerOn<span class="token punctuation">(</span></span>DeviceEventEmitter<span class="token punctuation">,</span>
<span class="token string">&#x27;keyboardWillShow&#x27;</span><span class="token punctuation">,</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>scrollResponderKeyboardWillShow<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
scrollResponderKeyboardWillShow<span class="token punctuation">:</span><span class="token keyword">function</span><span class="token punctuation">(</span>e<span class="token punctuation">:</span> Event<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>keyboardWillOpenTo <span class="token operator">=</span> e<span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>onKeyboardWillShow &amp;&amp; <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span><span class="token function">onKeyboardWillShow<span class="token punctuation">(</span></span>e<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span></div><p>You can also directly use the <code>DeviceEventEmitter</code> module to listen for events.</p><div class="prism language-javascript"><span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span>
componentWillMount<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
DeviceEventEmitter<span class="token punctuation">.</span><span class="token function">addListener<span class="token punctuation">(</span></span><span class="token string">&#x27;keyboardWillShow&#x27;</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span>e<span class="token punctuation">:</span> Event<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment" spellcheck="true"> // handle event.
</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span></div><h3><a class="anchor" name="getting-activity-result-from-startactivityforresult"></a>Getting activity result from <code>startActivityForResult</code> <a class="hash-link" href="docs/native-modules-android.html#getting-activity-result-from-startactivityforresult">#</a></h3><p>You&#x27;ll need to listen to <code>onActivityResult</code> if you want to get results from an activity you started with <code>startActivityForResult</code>. To do this, you must extend <code>BaseActivityEventListener</code> or implement <code>ActivityEventListener</code>. The former is preferred as it is more resilient to API changes. Then, you need to register the listener in the module&#x27;s constructor,</p><div class="prism language-javascript">reactContext<span class="token punctuation">.</span><span class="token function">addActivityEventListener<span class="token punctuation">(</span></span>mActivityResultListener<span class="token punctuation">)</span><span class="token punctuation">;</span></div><p>Now you can listen to <code>onActivityResult</code> by implementing the following method:</p><div class="prism language-javascript">@Override
<span class="token function">measureLayout<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span></div><h3><a class="anchor" name="threading"></a>Threading <a class="hash-link" href="docs/native-modules-android.html#threading">#</a></h3><p>Native modules should not have any assumptions about what thread they are being called on, as the current assignment is subject to change in the future. If a blocking call is required, the heavy work should be dispatched to an internally managed worker thread, and any callbacks distributed from there.</p><h3><a class="anchor" name="getting-activity-result-from-startactivityforresult"></a>Getting activity result from <code>startActivityForResult</code> <a class="hash-link" href="docs/native-modules-android.html#getting-activity-result-from-startactivityforresult">#</a></h3><p>You&#x27;ll need to listen to <code>onActivityResult</code> if you want to get results from an activity you started with <code>startActivityForResult</code>. To do this, you must extend <code>BaseActivityEventListener</code> or implement <code>ActivityEventListener</code>. The former is preferred as it is more resilient to API changes. Then, you need to register the listener in the module&#x27;s constructor,</p><div class="prism language-javascript">reactContext<span class="token punctuation">.</span><span class="token function">addActivityEventListener<span class="token punctuation">(</span></span>mActivityResultListener<span class="token punctuation">)</span><span class="token punctuation">;</span></div><p>Now you can listen to <code>onActivityResult</code> by implementing the following method:</p><div class="prism language-javascript">@Override
public void <span class="token function">onActivityResult<span class="token punctuation">(</span></span>
final Activity activity<span class="token punctuation">,</span>
final int requestCode<span class="token punctuation">,</span>
releases/next/docs/performance.html
+2 -2
View File
@@ -26,11 +26,11 @@ As a result, <code>TouchableOpacity</code> cannot react to the touch events and
The reason for this is that the animations for the transitions are done entirely on the main thread,
and so they are not interrupted by frame drops on the JavaScript thread.</p><p>Similarly, you can happily scroll up and down through a <code>ScrollView</code> when the JavaScript thread is locked up because the <code>ScrollView</code> lives on the main thread.
The scroll events are dispatched to the JS thread, but their receipt is not necessary for the scroll to occur.</p><h2><a class="anchor" name="common-sources-of-performance-problems"></a>Common sources of performance problems <a class="hash-link" href="docs/performance.html#common-sources-of-performance-problems">#</a></h2><h3><a class="anchor" name="running-in-development-mode-dev-true"></a>Running in development mode (<code>dev=true</code>) <a class="hash-link" href="docs/performance.html#running-in-development-mode-dev-true">#</a></h3><p>JavaScript thread performance suffers greatly when running in dev mode.
This is unavoidable: a lot more work needs to be done at runtime to provide you with good warnings and error messages, such as validating propTypes and various other assertions.</p><h3><a class="anchor" name="using-console-log-statements"></a>Using <code>console.log</code> statements <a class="hash-link" href="docs/performance.html#using-console-log-statements">#</a></h3><p>When running a bundled app, these statements can cause a big bottleneck in the JavaScript thread.
This is unavoidable: a lot more work needs to be done at runtime to provide you with good warnings and error messages, such as validating propTypes and various other assertions. Always make sure to test performance in <a href="docs/running-on-device.html#building-your-app-for-production" target="_blank">release builds</a>.</p><h3><a class="anchor" name="using-console-log-statements"></a>Using <code>console.log</code> statements <a class="hash-link" href="docs/performance.html#using-console-log-statements">#</a></h3><p>When running a bundled app, these statements can cause a big bottleneck in the JavaScript thread.
This includes calls from debugging libraries such as <a href="https://github.com/evgenyrodionov/redux-logger" target="_blank">redux-logger</a>,
so make sure to remove them before bundling.</p><h3><a class="anchor" name="listview-initial-rendering-is-too-slow-or-scroll-performance-is-bad-for-large-lists"></a><code>ListView</code> initial rendering is too slow or scroll performance is bad for large lists <a class="hash-link" href="docs/performance.html#listview-initial-rendering-is-too-slow-or-scroll-performance-is-bad-for-large-lists">#</a></h3><p>Use the new <a href="docs/flatlist.html" target="_blank"><code>FlatList</code></a> or <a href="docs/sectionlist.html" target="_blank"><code>SectionList</code></a> component instead.
Besides simplifying the API, the new list components also have significant performance enhancements,
the main one being nearly constant memory usage for any number of rows.</p><p>TODO: Link to blog post</p><h3><a class="anchor" name="js-fps-plunges-when-re-rendering-a-view-that-hardly-changes"></a>JS FPS plunges when re-rendering a view that hardly changes <a class="hash-link" href="docs/performance.html#js-fps-plunges-when-re-rendering-a-view-that-hardly-changes">#</a></h3><p>If you are using a ListView, you must provide a <code>rowHasChanged</code> function that can reduce a lot of work by quickly determining whether or not a row needs to be re-rendered. If you are using immutable data structures, this would be as simple as a reference equality check.</p><p>Similarly, you can implement <code>shouldComponentUpdate</code> and indicate the exact conditions under which you would like the component to re-render. If you write pure components (where the return value of the render function is entirely dependent on props and state), you can leverage PureRenderMixin to do this for you. Once again, immutable data structures are useful to keep this fast -- if you have to do a deep comparison of a large list of objects, it may be that re-rendering your entire component would be quicker, and it would certainly require less code.</p><h3><a class="anchor" name="dropping-js-thread-fps-because-of-doing-a-lot-of-work-on-the-javascript-thread-at-the-same-time"></a>Dropping JS thread FPS because of doing a lot of work on the JavaScript thread at the same time <a class="hash-link" href="docs/performance.html#dropping-js-thread-fps-because-of-doing-a-lot-of-work-on-the-javascript-thread-at-the-same-time">#</a></h3><p>&quot;Slow Navigator transitions&quot; is the most common manifestation of this, but there are other times this can happen. Using InteractionManager can be a good approach, but if the user experience cost is too high to delay work during an animation, then you might want to consider LayoutAnimation.</p><p>The Animated api currently calculates each keyframe on-demand on the JavaScript thread, while LayoutAnimation leverages Core Animation and is unaffected by JS thread and main thread frame drops.</p><p>One case where I have used this is for animating in a modal (sliding down from top and fading in a translucent overlay) while initializing and perhaps receiving responses for several network requests, rendering the contents of the modal, and updating the view where the modal was opened from. See the Animations guide for more information about how to use LayoutAnimation.</p><p>Caveats:</p><ul><li>LayoutAnimation only works for fire-and-forget animations (&quot;static&quot; animations) -- if it must be be interruptible, you will need to use <code>Animated</code>.</li></ul><h3><a class="anchor" name="moving-a-view-on-the-screen-scrolling-translating-rotating-drops-ui-thread-fps"></a>Moving a view on the screen (scrolling, translating, rotating) drops UI thread FPS <a class="hash-link" href="docs/performance.html#moving-a-view-on-the-screen-scrolling-translating-rotating-drops-ui-thread-fps">#</a></h3><p>This is especially true when you have text with a transparent background positioned on top of an image,
the main one being nearly constant memory usage for any number of rows.</p><h3><a class="anchor" name="js-fps-plunges-when-re-rendering-a-view-that-hardly-changes"></a>JS FPS plunges when re-rendering a view that hardly changes <a class="hash-link" href="docs/performance.html#js-fps-plunges-when-re-rendering-a-view-that-hardly-changes">#</a></h3><p>If you are using a ListView, you must provide a <code>rowHasChanged</code> function that can reduce a lot of work by quickly determining whether or not a row needs to be re-rendered. If you are using immutable data structures, this would be as simple as a reference equality check.</p><p>Similarly, you can implement <code>shouldComponentUpdate</code> and indicate the exact conditions under which you would like the component to re-render. If you write pure components (where the return value of the render function is entirely dependent on props and state), you can leverage PureRenderMixin to do this for you. Once again, immutable data structures are useful to keep this fast -- if you have to do a deep comparison of a large list of objects, it may be that re-rendering your entire component would be quicker, and it would certainly require less code.</p><h3><a class="anchor" name="dropping-js-thread-fps-because-of-doing-a-lot-of-work-on-the-javascript-thread-at-the-same-time"></a>Dropping JS thread FPS because of doing a lot of work on the JavaScript thread at the same time <a class="hash-link" href="docs/performance.html#dropping-js-thread-fps-because-of-doing-a-lot-of-work-on-the-javascript-thread-at-the-same-time">#</a></h3><p>&quot;Slow Navigator transitions&quot; is the most common manifestation of this, but there are other times this can happen. Using InteractionManager can be a good approach, but if the user experience cost is too high to delay work during an animation, then you might want to consider LayoutAnimation.</p><p>The Animated api currently calculates each keyframe on-demand on the JavaScript thread, while LayoutAnimation leverages Core Animation and is unaffected by JS thread and main thread frame drops.</p><p>One case where I have used this is for animating in a modal (sliding down from top and fading in a translucent overlay) while initializing and perhaps receiving responses for several network requests, rendering the contents of the modal, and updating the view where the modal was opened from. See the Animations guide for more information about how to use LayoutAnimation.</p><p>Caveats:</p><ul><li>LayoutAnimation only works for fire-and-forget animations (&quot;static&quot; animations) -- if it must be be interruptible, you will need to use <code>Animated</code>.</li></ul><h3><a class="anchor" name="moving-a-view-on-the-screen-scrolling-translating-rotating-drops-ui-thread-fps"></a>Moving a view on the screen (scrolling, translating, rotating) drops UI thread FPS <a class="hash-link" href="docs/performance.html#moving-a-view-on-the-screen-scrolling-translating-rotating-drops-ui-thread-fps">#</a></h3><p>This is especially true when you have text with a transparent background positioned on top of an image,
or any other situation where alpha compositing would be required to re-draw the view on each frame.
You will find that enabling <code>shouldRasterizeIOS</code> or <code>renderToHardwareTextureAndroid</code> can help with this significantly.</p><p>Be careful not to overuse this or your memory usage could go through the roof.
Profile your performance and memory usage when using these props.
releases/next/docs/scrollview.html
+6 -6
View File
@@ -47,7 +47,11 @@ This can improve scrolling performance on long lists. The default value is
true.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="scrollenabled"></a>scrollEnabled?: <span class="propType">bool</span> <a class="hash-link" href="docs/scrollview.html#scrollenabled">#</a></h4><div><p>When false, the content does not scroll.
The default value is true.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="showshorizontalscrollindicator"></a>showsHorizontalScrollIndicator?: <span class="propType">bool</span> <a class="hash-link" href="docs/scrollview.html#showshorizontalscrollindicator">#</a></h4><div><p>When true, shows a horizontal scroll indicator.
The default value is true.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="showsverticalscrollindicator"></a>showsVerticalScrollIndicator?: <span class="propType">bool</span> <a class="hash-link" href="docs/scrollview.html#showsverticalscrollindicator">#</a></h4><div><p>When true, shows a vertical scroll indicator.
The default value is true.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="style"></a>style?: <span class="propType">style</span> <a class="hash-link" href="docs/scrollview.html#style">#</a></h4><div class="compactProps"><div class="prop"><h6 class="propTitle"><a href="docs/layout-props.html#props">Layout Props...</a></h6></div><div class="prop"><h6 class="propTitle"><a href="docs/shadow-props.html#props">Shadow Props...</a></h6></div><div class="prop"><h6 class="propTitle"><a href="docs/transforms.html#props">Transforms...</a></h6></div><div class="prop"><h6 class="propTitle">backfaceVisibility <span class="propType">enum(&#x27;visible&#x27;, &#x27;hidden&#x27;)</span> </h6></div><div class="prop"><h6 class="propTitle">backgroundColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderBottomColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderBottomLeftRadius <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderBottomRightRadius <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderBottomWidth <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderLeftColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderLeftWidth <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderRadius <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderRightColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderRightWidth <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderStyle <span class="propType">enum(&#x27;solid&#x27;, &#x27;dotted&#x27;, &#x27;dashed&#x27;)</span> </h6></div><div class="prop"><h6 class="propTitle">borderTopColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderTopLeftRadius <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderTopRightRadius <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderTopWidth <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderWidth <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">opacity <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle"><span class="platform">android</span>elevation <span class="propType">number</span> <div><p>(Android-only) Sets the elevation of a view, using Android&#x27;s underlying
The default value is true.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="stickyheaderindices"></a>stickyHeaderIndices?: <span class="propType"><span>[number]</span></span> <a class="hash-link" href="docs/scrollview.html#stickyheaderindices">#</a></h4><div><p>An array of child indices determining which children get docked to the
top of the screen when scrolling. For example, passing
<code>stickyHeaderIndices={[0]}</code> will cause the first child to be fixed to the
top of the scroll view. This property is not supported in conjunction
with <code>horizontal={true}</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="style"></a>style?: <span class="propType">style</span> <a class="hash-link" href="docs/scrollview.html#style">#</a></h4><div class="compactProps"><div class="prop"><h6 class="propTitle"><a href="docs/layout-props.html#props">Layout Props...</a></h6></div><div class="prop"><h6 class="propTitle"><a href="docs/shadow-props.html#props">Shadow Props...</a></h6></div><div class="prop"><h6 class="propTitle"><a href="docs/transforms.html#props">Transforms...</a></h6></div><div class="prop"><h6 class="propTitle">backfaceVisibility <span class="propType">enum(&#x27;visible&#x27;, &#x27;hidden&#x27;)</span> </h6></div><div class="prop"><h6 class="propTitle">backgroundColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderBottomColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderBottomLeftRadius <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderBottomRightRadius <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderBottomWidth <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderLeftColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderLeftWidth <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderRadius <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderRightColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderRightWidth <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderStyle <span class="propType">enum(&#x27;solid&#x27;, &#x27;dotted&#x27;, &#x27;dashed&#x27;)</span> </h6></div><div class="prop"><h6 class="propTitle">borderTopColor <span class="propType"><a href="docs/colors.html">color</a></span> </h6></div><div class="prop"><h6 class="propTitle">borderTopLeftRadius <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderTopRightRadius <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderTopWidth <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">borderWidth <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle">opacity <span class="propType">number</span> </h6></div><div class="prop"><h6 class="propTitle"><span class="platform">android</span>elevation <span class="propType">number</span> <div><p>(Android-only) Sets the elevation of a view, using Android&#x27;s underlying
<a href="https://developer.android.com/training/material/shadows-clipping.html#Elevation" target="_blank">elevation API</a>.
This adds a drop shadow to the item and affects z-order for overlapping views.
Only supported on Android 5.0+, has no effect on earlier versions.</p></div></h6></div></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="endfillcolor"></a><span class="platform">android</span>endFillColor?: <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/scrollview.html#endfillcolor">#</a></h4><div><p>Sometimes a scrollview takes up more space than its content fills. When this is
@@ -102,11 +106,7 @@ of the snapping to the scroll view.
- <code>end</code> will align the snap at the right (horizontal) or bottom (vertical)</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="snaptointerval"></a><span class="platform">ios</span>snapToInterval?: <span class="propType">number</span> <a class="hash-link" href="docs/scrollview.html#snaptointerval">#</a></h4><div><p>When set, causes the scroll view to stop at multiples of the value of
<code>snapToInterval</code>. This can be used for paginating through children
that have lengths smaller than the scroll view. Used in combination
with <code>snapToAlignment</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="stickyheaderindices"></a><span class="platform">ios</span>stickyHeaderIndices?: <span class="propType"><span>[number]</span></span> <a class="hash-link" href="docs/scrollview.html#stickyheaderindices">#</a></h4><div><p>An array of child indices determining which children get docked to the
top of the screen when scrolling. For example, passing
<code>stickyHeaderIndices={[0]}</code> will cause the first child to be fixed to the
top of the scroll view. This property is not supported in conjunction
with <code>horizontal={true}</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="zoomscale"></a><span class="platform">ios</span>zoomScale?: <span class="propType">number</span> <a class="hash-link" href="docs/scrollview.html#zoomscale">#</a></h4><div><p>The current scale of the scroll view content. The default value is 1.0.</p></div></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/scrollview.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="scrollto"></a>scrollTo<span class="methodType">(y?: number, object, x?: number, animated?: boolean)</span> <a class="hash-link" href="docs/scrollview.html#scrollto">#</a></h4><div><p>Scrolls to a given x, y offset, either immediately or with a smooth animation.</p><p>Example:</p><p><code>scrollTo({x: 0; y: 0; animated: true})</code></p><p>Note: The weird function signature is due to the fact that, for historical reasons,
with <code>snapToAlignment</code>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="zoomscale"></a><span class="platform">ios</span>zoomScale?: <span class="propType">number</span> <a class="hash-link" href="docs/scrollview.html#zoomscale">#</a></h4><div><p>The current scale of the scroll view content. The default value is 1.0.</p></div></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/scrollview.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="scrollto"></a>scrollTo<span class="methodType">(y?: number, object, x?: number, animated?: boolean)</span> <a class="hash-link" href="docs/scrollview.html#scrollto">#</a></h4><div><p>Scrolls to a given x, y offset, either immediately or with a smooth animation.</p><p>Example:</p><p><code>scrollTo({x: 0; y: 0; animated: true})</code></p><p>Note: The weird function signature is due to the fact that, for historical reasons,
the function also accepts separate arguments as an alternative to the options object.
This is deprecated due to ambiguity (y before x), and SHOULD NOT BE USED.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="scrolltoend"></a>scrollToEnd<span class="methodType">(options?: object)</span> <a class="hash-link" href="docs/scrollview.html#scrolltoend">#</a></h4><div><p>If this is a vertical ScrollView scrolls to the bottom.
If this is a horizontal ScrollView scrolls to the right.</p><p>Use <code>scrollToEnd({animated: true})</code> for smooth animated scrolling,
releases/next/docs/troubleshooting.html
+1 -1
View File
File diff suppressed because one or more lines are too long
releases/next/docs/virtualizedlist.html
+1 -1
View File
@@ -15,7 +15,7 @@ blank content. This is a tradeoff that can be adjusted to suit the needs of each
and we are working on improving it behind the scenes.</li><li>By default, the list looks for a <code>key</code> prop on each item and uses that for the React key.
Alternatively, you can provide a custom <code>keyExtractor</code> prop.</li></ul><p>NOTE: <code>LayoutAnimation</code> and sticky section headers both have bugs when used with this and are
therefore not officially supported yet.</p><p>NOTE: <code>removeClippedSubviews</code> might not be necessary and may cause bugs. If you see issues with
content not rendering, try disabling it, and we may change the default there.</p></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/virtualizedlist.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="footercomponent"></a>FooterComponent?: <span class="propType"><span>?ReactClass&lt;any&gt;</span></span> <a class="hash-link" href="docs/virtualizedlist.html#footercomponent">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="headercomponent"></a>HeaderComponent?: <span class="propType"><span>?ReactClass&lt;any&gt;</span></span> <a class="hash-link" href="docs/virtualizedlist.html#headercomponent">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="separatorcomponent"></a>SeparatorComponent?: <span class="propType"><span>?ReactClass&lt;any&gt;</span></span> <a class="hash-link" href="docs/virtualizedlist.html#separatorcomponent">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="data"></a>data?: <span class="propType">any</span> <a class="hash-link" href="docs/virtualizedlist.html#data">#</a></h4><div><p>The default accessor functions assume this is an Array&lt;{key: string}&gt; but you can override
content not rendering, try disabling it, and we may change the default there.</p></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/virtualizedlist.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="data"></a>data?: <span class="propType">any</span> <a class="hash-link" href="docs/virtualizedlist.html#data">#</a></h4><div><p>The default accessor functions assume this is an Array&lt;{key: string}&gt; but you can override
getItem, getItemCount, and keyExtractor to handle any type of index-based data.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="debug"></a>debug?: <span class="propType"><span>?boolean</span></span> <a class="hash-link" href="docs/virtualizedlist.html#debug">#</a></h4><div><p><code>debug</code> will turn on extra logging and visual overlays to aid with debugging both usage and
implementation, but with a significant perf hit.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="disablevirtualization"></a>disableVirtualization: <span class="propType">boolean</span> <a class="hash-link" href="docs/virtualizedlist.html#disablevirtualization">#</a></h4><div><p>DEPRECATED: Virtualization provides significant performance and memory optimizations, but fully
unmounts react instances that are outside of the render window. You should only need to disable
versions.html
+2 -2
View File
File diff suppressed because one or more lines are too long