mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Updated docs for next
This commit is contained in:
1 parent
780c4242ed
commit
087d202251
4 files changed
+4
-42
No files matched your search
@@ -1,38 +0,0 @@
|
||||
<!DOCTYPE html><html><head><title>Better List Views in React Native</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="Better List Views in React Native"><meta property="og:url" content="https://facebook.github.io/react-native/blog/2017/03/01/better-list-views.html"><meta property="og:image" content="https://facebook.github.io/react-native/img/opengraph.png"><meta property="og:description" content="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 just-released RN 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:"><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="Spencer Ahrens"><meta name="twitter:creator" content="@sahrens2012"><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/sahrens" target="_blank" class="author">Spencer Ahrens</a> — <time class="date">March 1, 2017</time></h4><h1 class="entry-title">Better List Views in React Native</h1></header><div class="entry-content"><div><p>Many of you have started playing with some of our new List components already after our <a href="https://www.facebook.com/groups/react.native.community/permalink/921378591331053" target="_blank">teaser announcement in the community group</a>, but we are officially announcing them today! No more <code>ListView</code>s or <code>DataSource</code>s, stale rows, ignored bugs, or excessive memory consumption - with the just-released RN 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:</p><h3><a class="anchor" name="flatlist-https-github-com-facebook-react-native-blob-master-libraries-customcomponents-lists-flatlist-js"></a><a href="https://github.com/facebook/react-native/blob/master/Libraries/CustomComponents/Lists/FlatList.js" Line truncated
|
||||
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">'Title Text'</span><span class="token punctuation">,</span> key<span class="token punctuation">:</span> <span class="token string">'item1'</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>
|
||||
renderItem<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">{</span>item<span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <ListItem title<span class="token operator">=</span><span class="token punctuation">{</span>item<span class="token punctuation">.</span>title<span class="token punctuation">}</span><span class="token punctuation">}</span>
|
||||
<span class="token operator">/</span><span class="token operator">></span></div><h3><a class="anchor" name="sectionlist-https-github-com-facebook-react-native-blob-master-libraries-customcomponents-lists-sectionlist-js"></a><a href="https://github.com/facebook/react-native/blob/master/Libraries/CustomComponents/Lists/SectionList.js" target="_blank"><code><SectionList></code></a> <a class="hash-link" href="#sectionlist-https-github-com-facebook-react-native-blob-master-libraries-customcomponents-lists-sectionlist-js">#</a></h3><p>If you want to render a set of data broken into logical sections, maybe with section headers (e.g. in an alphabetical address book), and potentially with heterogeneous data and rendering (such as a profile view with some buttons followed by a composer, then a photo grid, then a friend grid, and finally a list of stories), this is the way to go.</p><div class="prism language-javascript"><SectionList
|
||||
renderItem<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">{</span>item<span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <ListItem title<span class="token operator">=</span><span class="token punctuation">{</span>item<span class="token punctuation">.</span>title<span class="token punctuation">}</span><span class="token punctuation">}</span>
|
||||
renderSectionHeader<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">{</span>section<span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <H1 title<span class="token operator">=</span><span class="token punctuation">{</span>section<span class="token punctuation">.</span>key<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">}</span>
|
||||
sections<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token comment" spellcheck="true"> // homogenous rendering between sections
|
||||
</span> <span class="token punctuation">{</span>data<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> key<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>data<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> key<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>data<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> key<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><span class="token punctuation">}</span>
|
||||
<span class="token operator">/</span><span class="token operator">></span>
|
||||
|
||||
<SectionList
|
||||
sections<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token comment" spellcheck="true"> // heterogeneous rendering between sections
|
||||
</span> <span class="token punctuation">{</span>data<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> key<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> renderItem<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>data<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> key<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> renderItem<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>data<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> key<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> renderItem<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><span class="token punctuation">}</span>
|
||||
<span class="token operator">/</span><span class="token operator">></span></div><h3><a class="anchor" name="virtualizedlist-https-github-com-facebook-react-native-blob-master-libraries-customcomponents-lists-virtualizedlist-js"></a><a href="https://github.com/facebook/react-native/blob/master/Libraries/CustomComponents/Lists/VirtualizedList.js" target="_blank"><code><VirtualizedList></code></a> <a class="hash-link" href="#virtualizedlist-https-github-com-facebook-react-native-blob-master-libraries-customcomponents-lists-virtualizedlist-js">#</a></h3><p>The implementation behind the scenes with a more flexible API. Especially handy if your data is not in a plain array (e.g. an immutable list).</p><h3><a class="anchor" name="some-caveats"></a>Some Caveats <a class="hash-link" href="#some-caveats">#</a></h3><ul><li>The internal state of item subtrees is not preserved when content scrolls out of the render window. Make sure all your data is captured in the item data or external stores like Flux, Redux, or Relay.</li><li>In order to constrain memory and enable smooth scrolling, content is rendered asynchronously offscreen. This means it's possible to scroll faster than the fill rate and 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, these new lists look for a <code>key</code> prop on each item and use that for the React key. Alternatively, you can provide a custom <code>keyExtractor</code> prop.</li></ul><h2><a class="anchor" name="features"></a>Features <a class="hash-link" href="#features">#</a></h2><p>Lists are used in many contexts, so we packed the new components full of features to handle the majority of use cases out of the box:</p><ul><li>Scroll loading (<code>onEndReached</code>).</li><li>Pull to refresh (<code>onRefresh</code> / <code>refreshing</code>).</li><li><a href="https://github.com/facebook/react-native/blob/master/Libraries/CustomComponents/Lists/ViewabilityHelper.js" target="_blank">Configurable</a> viewability (VPV) callbacks (<code>onViewableItemsChanged</code> / <code>viewabilityConfig</code>).</li><li>Horizontal mode (<code>horizontal</code>).</li><li>Intelligent item and section separators.</li><li>Multi-column support (<code>numColumns</code>)</li><li><code>scrollToEnd</code>, <code>scrollToIndex</code>, and <code>scrollToItem</code></li><li>Better Flow typing.</li></ul><h2><a class="anchor" name="performance"></a>Performance <a class="hash-link" href="#performance">#</a></h2><p>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. This is done by 'virtualizing' elements that are outside of the render window by completely unmounting them from the component hierarchy and reclaiming the JS memory from the react components, along with the native memory from the shadow tree and the UI views. This has a catch which is that internal component state will not be preserved, so <strong>make sure you track any important state outside of the components themselves, e.g. in Relay or Redux or Flux store.</strong></p><p>Limiting the render window also reduces the amount of work that needs to be done by React and the native platform, e.g from view traversals. Even if you are rendering the last of a million elements, with these new lists there is no need to iterate through all those elements in order to render. You can even jump to the middle with <code>scrollToIndex</code> without excessive rendering.</p><p>We've also made some improvements with scheduling which should help with application responsiveness. Items at the edge of the render window are rendered infrequently and at a lower priority after any active gestures or animations or other interactions have completed.</p><h2><a class="anchor" name="advanced-usage"></a>Advanced Usage <a class="hash-link" href="#advanced-usage">#</a></h2><p>By default, all items in the render window are re-rendered any time any props change. Often this is fine because there is a finite window of items, but if you want to further optimize performance you can implement <code>shouldItemUpdate</code>. If you do, be careful that your <code>renderItem</code> function does not depend on anything not compared in <code>shouldItemUpdate</code>.</p><p>If you can calculate the height of your rows without rendering them, you can improve the user experience by providing the <code>getItemLayout</code> prop. This makes it much smoother to scroll to specific items with e.g. <code>scrollToIndex</code>, and will improve the scroll indicator UI because the height of the content can be determined without rendering it.</p><p>If you have an alternative data type, like an immutable list, <code><VirtualizedList></code> is the way to go. It takes a <code>getItem</code> prop that lets you return the item data Line truncated
|
||||
(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>
|
||||
@@ -19,9 +19,9 @@ API exposed as static functions on the component. It is however not recommended
|
||||
to use the static API and the component for the same prop because any value
|
||||
set by the static API will get overriden by the one set by the component in
|
||||
the next render.</p><h3><a class="anchor" name="constants"></a>Constants <a class="hash-link" href="docs/statusbar.html#constants">#</a></h3><p><code>currentHeight</code> (Android only) The height of the status bar.</p></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/statusbar.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="animated"></a>animated <span class="propType">bool</span> <a class="hash-link" href="docs/statusbar.html#animated">#</a></h4><div><p>If the transition between status bar property changes should be animated.
|
||||
Supported for backgroundColor, barStyle and hidden.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="hidden"></a>hidden <span class="propType">bool</span> <a class="hash-link" href="docs/statusbar.html#hidden">#</a></h4><div><p>If the status bar is hidden.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="backgroundcolor"></a><span class="platform">android</span>backgroundColor <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/statusbar.html#backgroundcolor">#</a></h4><div><p>The background color of the status bar.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="translucent"></a><span class="platform">android</span>translucent <span class="propType">bool</span> <a class="hash-link" href="docs/statusbar.html#translucent">#</a></h4><div><p>If the status bar is translucent.
|
||||
Supported for backgroundColor, barStyle and hidden.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="barstyle"></a>barStyle <span class="propType">enum('default', 'light-content', 'dark-content')</span> <a class="hash-link" href="docs/statusbar.html#barstyle">#</a></h4><div><p>Sets the color of the status bar text.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="hidden"></a>hidden <span class="propType">bool</span> <a class="hash-link" href="docs/statusbar.html#hidden">#</a></h4><div><p>If the status bar is hidden.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="backgroundcolor"></a><span class="platform">android</span>backgroundColor <span class="propType"><a href="docs/colors.html">color</a></span> <a class="hash-link" href="docs/statusbar.html#backgroundcolor">#</a></h4><div><p>The background color of the status bar.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="translucent"></a><span class="platform">android</span>translucent <span class="propType">bool</span> <a class="hash-link" href="docs/statusbar.html#translucent">#</a></h4><div><p>If the status bar is translucent.
|
||||
When translucent is set to true, the app will draw under the status bar.
|
||||
This is useful when using a semi transparent status bar color.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="barstyle"></a><span class="platform">ios</span>barStyle <span class="propType">enum('default', 'light-content', 'dark-content')</span> <a class="hash-link" href="docs/statusbar.html#barstyle">#</a></h4><div><p>Sets the color of the status bar text.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="networkactivityindicatorvisible"></a><span class="platform">ios</span>networkActivityIndicatorVisible <span class="propType">bool</span> <a class="hash-link" href="docs/statusbar.html#networkactivityindicatorvisible">#</a></h4><div><p>If the network activity indicator should be visible.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="showhidetransition"></a><span class="platform">ios</span>showHideTransition <span class="propType">enum('fade', 'slide')</span> <a class="hash-link" href="docs/statusbar.html#showhidetransition">#</a></h4><div><p>The transition effect when showing and hiding the status bar using the <code>hidden</code>
|
||||
This is useful when using a semi transparent status bar color.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="networkactivityindicatorvisible"></a><span class="platform">ios</span>networkActivityIndicatorVisible <span class="propType">bool</span> <a class="hash-link" href="docs/statusbar.html#networkactivityindicatorvisible">#</a></h4><div><p>If the network activity indicator should be visible.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="showhidetransition"></a><span class="platform">ios</span>showHideTransition <span class="propType">enum('fade', 'slide')</span> <a class="hash-link" href="docs/statusbar.html#showhidetransition">#</a></h4><div><p>The transition effect when showing and hiding the status bar using the <code>hidden</code>
|
||||
prop. Defaults to 'fade'.</p></div></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/statusbar.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="sethidden"></a><span class="methodType">static </span>setHidden<span class="methodType">(hidden, animation?)</span> <a class="hash-link" href="docs/statusbar.html#sethidden">#</a></h4><div><p>Show or hide the status bar</p></div><div><strong>Parameters:</strong><table class="params"><thead><tr><th>Name and Type</th><th>Description</th></tr></thead><tbody><tr><td>hidden<br><br><div><span>boolean</span></div></td><td class="description"><div><p>Hide the status bar.</p></div></td></tr><tr><td>[animation]<br><br><div><span><a href="docs/#statusbaranimation">StatusBarAnimation</a></span></div></td><td class="description"><div><p>Optional animation when
|
||||
changing the status bar hidden property.</p></div></td></tr></tbody></table></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="setbarstyle"></a><span class="methodType">static </span>setBarStyle<span class="methodType">(style, animated?)</span> <a class="hash-link" href="docs/statusbar.html#setbarstyle">#</a></h4><div><p>Set the status bar style</p></div><div><strong>Parameters:</strong><table class="params"><thead><tr><th>Name and Type</th><th>Description</th></tr></thead><tbody><tr><td>style<br><br><div><span><a href="docs/#statusbarstyle">StatusBarStyle</a></span></div></td><td class="description"><div><p>Status bar style to set</p></div></td></tr><tr><td>[animated]<br><br><div><span>boolean</span></div></td><td class="description"><div><p>Animate the style change.</p></div></td></tr></tbody></table></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="setnetworkactivityindicatorvisible"></a><span class="methodType">static </span>setNetworkActivityIndicatorVisible<span class="methodType">(visible)</span> <a class="hash-link" href="docs/statusbar.html#setnetworkactivityindicatorvisible">#</a></h4><div><p>Control the visibility of the network activity indicator</p></div><div><strong>Parameters:</strong><table class="params"><thead><tr><th>Name and Type</th><th>Description</th></tr></thead><tbody><tr><td>visible<br><br><div><span>boolean</span></div></td><td class="description"><div><p>Show the indicator.</p></div></td></tr></tbody></table></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="setbackgroundcolor"></a><span class="methodType">static </span>setBackgroundColor<span class="methodType">(color, animated?)</span> <a class="hash-link" href="docs/statusbar.html#setbackgroundcolor">#</a></h4><div><p>Set the background color for the status bar</p></div><div><strong>Parameters:</strong><table class="params"><thead><tr><th>Name and Type</th><th>Description</th></tr></thead><tbody><tr><td>color<br><br><div><span>string</span></div></td><td class="description"><div><p>Background color.</p></div></td></tr><tr><td>[animated]<br><br><div><span>boolean</span></div></td><td class="description"><div><p>Animate the style change.</p></div></td></tr></tbody></table></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="settranslucent"></a><span class="methodType">static </span>setTranslucent<span class="methodType">(translucent)</span> <a class="hash-link" href="docs/statusbar.html#settranslucent">#</a></h4><div><p>Control the translucency of the status bar</p></div><div><strong>Parameters:</strong><table class="params"><thead><tr><th>Name and Type</th><th>Description</th></tr></thead><tbody><tr><td>translucent<br><br><div><span>boolean</span></div></td><td class="description"><div><p>Set as translucent.</p></div></td></tr></tbody></table></div></div></div></span><span><h3><a class="anchor" name="type-definitions"></a>Type Definitions <a class="hash-link" href="docs/statusbar.html#type-definitions">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="statusbarstyle"></a>StatusBarStyle <a class="hash-link" href="docs/statusbar.html#statusbarstyle">#</a></h4><div><p>Status bar style</p></div><strong>Type:</strong><br>$Enum<div><br><strong>Constants:</strong><table class="params"><thead><tr><th>Value</th><th>Description</th></tr></thead><tbody><tr><td>default</td><td class="description"><div><p>Default status bar style (dark for iOS, light for Android)</p></div></td></tr><tr><td>light-content</td><td class="description"><div><p>Dark background, white texts and icons</p></div></td></tr><tr><td>dark-content</td><td class="description"><div><p>Light background, dark texts and icons</p></div></td></tr></tbody></table></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="statusbaranimation"></a>StatusBarAnimation <a class="hash-link" href="docs/statusbar.html#statusbaranimation">#</a></h4><div><p>Status bar animation</p></div><strong>Type:</strong><br>$Enum<div><br><strong>Constants:</strong><table class="params"><thead><tr><th>Value</th><th>Description</th></tr></thead><tbody><tr><td>none</td><td class="description"><div><p>No animation</p></div></td></tr><tr><td>fade</td><td class="description"><div><p>Fade animation</p></div></td></tr><tr><td>slide</td><td class="description"><div><p>Slide animation</p></div></td></tr></tbody></table></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/Components/StatusBar/StatusBar.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/statusbar.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/ExLine truncated
|
||||
|
||||
|
||||
@@ -52,7 +52,7 @@ class <span class="token class-name">SomethingFast</span> extends <span class="t
|
||||
<<span class="token operator">/</span>View<span class="token operator">></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span></div></div><section class="home-get-started-section"><div class="buttons-unit"><a href="docs/getting-started.html#content" class="button">Get Started with React Native</a></div></section><section class="home-showcase-section"><h2>Who's using React Native?</h2><p>Thousands of apps are using React Native, from established Fortune 500 companies to hot new startups. If you're curious to see what can be accomplished with React Native, check out these apps!</p><div><div class="showcase"><a href="https://itunes.apple.com/app/facebook/id284882215"><img src="https://lh3.googleusercontent.com/ZZPdzvlpK9r_Df9C3M7j1rNRi7hhHRvPhlklJ3lfi5jk86Jd1s0Y5wcQ1QgbVaAP5Q=w300" alt="Facebook"></a></div><div class="showcase"><a href="https://itunes.apple.com/us/app/facebook-ads-manager/id964397083?mt=8"><img src="http://is5.mzstatic.com/image/pf/us/r30/Purple5/v4/9e/16/86/9e1686ef-cc55-805a-c977-538ddb5e6832/mzl.gqbhwitj.png" alt="Facebook Ads Manager"></a></div><div class="showcase"><a href="https://itunes.apple.com/us/app/facebook-groups/id931735837?mt=8"><img src="http://is4.mzstatic.com/image/pf/us/r30/Purple69/v4/57/f8/4c/57f84c0c-793d-5f9a-95ee-c212d0369e37/mzl.ugjwfhzx.png" alt="Facebook Groups"></a></div><div class="showcase"><a href="https://www.instagram.com/"><img src="http://a4.mzstatic.com/us/r30/Purple62/v4/1f/8d/f9/1f8df910-8ec7-3b8e-0104-d44e869f4d65/icon175x175.jpeg" alt="Instagram"></a></div><div class="showcase"><a href="https://www.airbnb.com/mobile"><img src="https://a2.muscache.com/airbnb/static/icons/apple-touch-icon-180x180-bcbe0e3960cd084eb8eaf1353cf3c730.png" alt="Airbnb"></a></div><div class="showcase"><a href="http://baike.baidu.com/link?url=TW8YhcVN4tO_Jz5VqMclCjGhf12EEqMD_TeVC6efe2REZlx80r6T0dX96hdmNl36XogLyExXzrvFU9rFeqxg_K"><img src="http://a3.mzstatic.com/us/r30/Purple62/v4/90/7c/9b/907c9b4e-556d-1a45-45d4-0ea801719abd/icon175x175.png" alt="Baidu(手机百度)"></a></div><div class="showcase"><a href="https://itunes.apple.com/us/app/discord-chat-for-gamers/id985746746?mt=8"><img src="http://a5.mzstatic.com/us/r30/Purple5/v4/c1/2f/4c/c12f4cba-1d9a-f6bf-2240-04085d3470ec/icon175x175.jpeg" alt="Discord"></a></div><div class="showcase"><a href="https://itunes.apple.com/app/apple-store/id1104085053?pt=117927205&ct=website&mt=8"><img src="https://media.gyrosco.pe/images/magneto/180x180.png" alt="Gyroscope"></a></div><div class="showcase"><a href="https://play.google.com/store/apps/details?id=st.li.listapp"><img src="https://lh3.googleusercontent.com/tXt0HgJ7dCgOnuQ-lQr1P7E57mnOYfwXhRsV9lGcPwHPVvrDAN6YmpLVFgy88qKrkFI=w300" alt="li.st"></a></div><div class="showcase"><a href="http://android.myapp.com/myapp/detail.htm?apkName=com.tencent.mobileqq"><img src="http://pp.myapp.com/ma_icon/0/icon_6633_1461768893/96" alt="QQ"></a></div><div class="showcase"><a href="https://itunes.apple.com/us/app/townske-stunning-city-guides/id1018136179?ls=1&mt=8"><img src="http://a3.mzstatic.com/us/r30/Purple69/v4/8b/42/20/8b4220af-5165-91fd-0f05-014332df73ef/icon175x175.png" alt="Townske"></a></div><div class="showcase"><a href="https://itunes.apple.com/app/apple-store/id1087973225?pt=45076&ct=site-promo&mt=8"><img src="http://a2.mzstatic.com/us/r30/Purple30/v4/06/24/92/0624927f-a389-746c-27f9-e2466d59e55b/icon175x175.jpeg" alt="Vogue"></a></div><div class="showcase"><a href="https://itunes.apple.com/us/app/walmart-app-shopping-savings/id338137227?mt=8"><img src="http://is2.mzstatic.com/image/thumb/Purple111/v4/64/9f/20/649f2026-e968-0417-660c-e5ee6d7977ff/source/350x350bb.jpg" alt="Walmart"></a></div></div><p class="footnote">Some of these are hybrid native/React Native apps.</p><div class="buttons-unit"><a href="/react-native/showcase.html" class="button">More React Native apps</a></div></section></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-reqLine truncated
|
||||
<span class="token punctuation">}</span></div></div><section class="home-get-started-section"><div class="buttons-unit"><a href="docs/getting-started.html#content" class="button">Get Started with React Native</a></div></section><section class="home-showcase-section"><h2>Who's using React Native?</h2><p>Thousands of apps are using React Native, from established Fortune 500 companies to hot new startups. If you're curious to see what can be accomplished with React Native, check out these apps!</p><div><div class="showcase"><a href="https://code.facebook.com/posts/895897210527114/dive-into-react-native-performance/"><img src="https://lh3.googleusercontent.com/ZZPdzvlpK9r_Df9C3M7j1rNRi7hhHRvPhlklJ3lfi5jk86Jd1s0Y5wcQ1QgbVaAP5Q=w300" alt="Facebook"></a></div><div class="showcase"><a href="https://code.facebook.com/posts/1189117404435352/react-native-for-android-how-we-built-the-first-cross-platform-react-native-app/"><img src="http://is5.mzstatic.com/image/pf/us/r30/Purple5/v4/9e/16/86/9e1686ef-cc55-805a-c977-538ddb5e6832/mzl.gqbhwitj.png" alt="Facebook Ads Manager"></a></div><div class="showcase"><a href="https://code.facebook.com/posts/1014532261909640/react-native-bringing-modern-web-techniques-to-mobile/"><img src="http://is4.mzstatic.com/image/pf/us/r30/Purple69/v4/57/f8/4c/57f84c0c-793d-5f9a-95ee-c212d0369e37/mzl.ugjwfhzx.png" alt="Facebook Groups"></a></div><div class="showcase"><a href="https://engineering.instagram.com/react-native-at-instagram-dd828a9a90c7#.3h4wir4zr"><img src="http://a4.mzstatic.com/us/r30/Purple62/v4/1f/8d/f9/1f8df910-8ec7-3b8e-0104-d44e869f4d65/icon175x175.jpeg" alt="Instagram"></a></div><div class="showcase"><a href="https://www.youtube.com/watch?v=tUfgQtmG3R0"><img src="https://a2.muscache.com/airbnb/static/icons/apple-touch-icon-180x180-bcbe0e3960cd084eb8eaf1353cf3c730.png" alt="Airbnb"></a></div><div class="showcase"><a href="http://baike.baidu.com/link?url=TW8YhcVN4tO_Jz5VqMclCjGhf12EEqMD_TeVC6efe2REZlx80r6T0dX96hdmNl36XogLyExXzrvFU9rFeqxg_K"><img src="http://a3.mzstatic.com/us/r30/Purple62/v4/90/7c/9b/907c9b4e-556d-1a45-45d4-0ea801719abd/icon175x175.png" alt="Baidu (手机百度)"></a></div><div class="showcase"><a href="https://discord.engineering/react-native-deep-dive-91fd5e949933#.5jnqftgof"><img src="http://a5.mzstatic.com/us/r30/Purple5/v4/c1/2f/4c/c12f4cba-1d9a-f6bf-2240-04085d3470ec/icon175x175.jpeg" alt="Discord"></a></div><div class="showcase"><a href="https://blog.gyrosco.pe/building-the-app-1dac1a97d253"><img src="https://media.gyrosco.pe/images/magneto/180x180.png" alt="Gyroscope"></a></div><div class="showcase"><a href="https://www.youtube.com/watch?v=cI9bDvDEsYE"><img src="https://lh3.googleusercontent.com/tXt0HgJ7dCgOnuQ-lQr1P7E57mnOYfwXhRsV9lGcPwHPVvrDAN6YmpLVFgy88qKrkFI=w300" alt="li.st"></a></div><div class="showcase"><a href="https://en.wikipedia.org/wiki/Tencent_QQ"><img src="http://pp.myapp.com/ma_icon/0/icon_6633_1461768893/96" alt="QQ"></a></div><div class="showcase"><a href="https://hackernoon.com/townske-app-in-react-native-6ad557de7a7c"><img src="http://a3.mzstatic.com/us/r30/Purple69/v4/8b/42/20/8b4220af-5165-91fd-0f05-014332df73ef/icon175x175.png" alt="Townske"></a></div><div class="showcase"><a href="http://www.vogue.com/app"><img src="http://a2.mzstatic.com/us/r30/Purple30/v4/06/24/92/0624927f-a389-746c-27f9-e2466d59e55b/icon175x175.jpeg" alt="Vogue"></a></div><div class="showcase"><a href=" https://medium.com/walmartlabs/react-native-at-walmartlabs-cdd140589560#.ueonqqloc"><img src="http://is2.mzstatic.com/image/thumb/Purple111/v4/64/9f/20/649f2026-e968-0417-660c-e5ee6d7977ff/source/350x350bb.jpg" alt="Walmart"></a></div></div><p class="footnote">Some of these are hybrid native/React Native apps.</p><div class="buttons-unit"><a href="/react-native/showcase.html" class="button">More React Native apps</a></div></section></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="Line truncated
|
||||
(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)
|
||||
|
||||
+1
-1
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html><head><title>Showcase</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="Showcase"><meta property="og:url" content="https://facebook.github.io/react-native/index.html"><meta property="og:image" content="https://facebook.github.io/react-native/img/opengraph.png"><meta property="og:description" content="A framework for building native apps using React"><meta name="twitter:site" content="@reactnative"><meta name="twitter:card" content="summary_large_image"><meta property="og:type" content="website"><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="active">Showcase</a></li><li><a href="/react-native/blog/" class="">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><section class="content wrap documentationContent nosidebar showcaseSection"><div class="inner-content showcaseHeader"><h1 style="text-align:center;">Who's using React Native?</h1><div class="subHeader"></div><p>Thousands of apps are using React Native, from established Fortune 500 companies to hot new startups. If you're curious to see what can be accomplished with React Native, check out these apps!</p><div class="inner-content"><div><div class="showcase"><div><img src="https://lh3.googleusercontent.com/ZZPdzvlpK9r_Df9C3M7j1rNRi7hhHRvPhlklJ3lfi5jk86Jd1s0Y5wcQ1QgbVaAP5Q=w300" alt="Facebook"><h3>Facebook</h3><p><a href="https://itunes.apple.com/app/facebook/id284882215" target="_blank">iOS</a> · <a href="https://play.google.com/store/apps/details?id=com.facebook.katana&hl=en" target="_blank">Android</a></p><p><a href="https://code.facebook.com/posts/895897210527114/dive-into-react-native-performance/" target="_blank">Using React Native in the Facebook App</a></p></div></div><div class="showcase"><div><img src="http://is5.mzstatic.com/image/pf/us/r30/Purple5/v4/9e/16/86/9e1686ef-cc55-805a-c977-538ddb5e6832/mzl.gqbhwitj.png" alt="Facebook Ads Manager"><h3>Facebook Ads Manager</h3><p><a href="https://itunes.apple.com/us/app/facebook-ads-manager/id964397083?mt=8" target="_blank">iOS</a> · <a href="https://play.google.com/store/apps/details?id=com.facebook.adsmanager" target="_blank">Android</a></p><p><a href="https://code.facebook.com/posts/1189117404435352/react-native-for-android-how-we-built-the-first-cross-platform-react-native-app/" target="_blank">How We Built the First Cross-Platform React Native App</a></p></div></div><div class="showcase"><div><img src="http://is4.mzstatic.com/image/pf/us/r30/Purple69/v4/57/f8/4c/57f84c0c-793d-5f9a-95ee-c212d0369e37/mzl.ugjwfhzx.png" alt="Facebook Groups"><h3>Facebook Groups</h3><p><a href="https://itunes.apple.com/us/app/facebook-groups/id931735837?mt=8" tLine truncated
|
||||
<!DOCTYPE html><html><head><title>Showcase</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="Showcase"><meta property="og:url" content="https://facebook.github.io/react-native/index.html"><meta property="og:image" content="https://facebook.github.io/react-native/img/opengraph.png"><meta property="og:description" content="A framework for building native apps using React"><meta name="twitter:site" content="@reactnative"><meta name="twitter:card" content="summary_large_image"><meta property="og:type" content="website"><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="active">Showcase</a></li><li><a href="/react-native/blog/" class="">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><section class="content wrap documentationContent nosidebar showcaseSection"><div class="inner-content showcaseHeader"><h1 style="text-align:center;">Who's using React Native?</h1><div class="subHeader"></div><p>Thousands of apps are using React Native, from established Fortune 500 companies to hot new startups. If you're curious to see what can be accomplished with React Native, check out these apps!</p><div class="inner-content"><div><div class="showcase"><div><img src="https://lh3.googleusercontent.com/ZZPdzvlpK9r_Df9C3M7j1rNRi7hhHRvPhlklJ3lfi5jk86Jd1s0Y5wcQ1QgbVaAP5Q=w300" alt="Facebook"><h3>Facebook</h3><p><a href="https://itunes.apple.com/app/facebook/id284882215" target="_blank">iOS</a> · <a href="https://play.google.com/store/apps/details?id=com.facebook.katana&hl=en" target="_blank">Android</a></p><p><a href="https://code.facebook.com/posts/895897210527114/dive-into-react-native-performance/" target="_blank">Using React Native in the Facebook App</a></p></div></div><div class="showcase"><div><img src="http://is5.mzstatic.com/image/pf/us/r30/Purple5/v4/9e/16/86/9e1686ef-cc55-805a-c977-538ddb5e6832/mzl.gqbhwitj.png" alt="Facebook Ads Manager"><h3>Facebook Ads Manager</h3><p><a href="https://itunes.apple.com/us/app/facebook-ads-manager/id964397083?mt=8" target="_blank">iOS</a> · <a href="https://play.google.com/store/apps/details?id=com.facebook.adsmanager" target="_blank">Android</a></p><p><a href="https://code.facebook.com/posts/1189117404435352/react-native-for-android-how-we-built-the-first-cross-platform-react-native-app/" target="_blank">How We Built the First Cross-Platform React Native App</a></p></div></div><div class="showcase"><div><img src="http://is4.mzstatic.com/image/pf/us/r30/Purple69/v4/57/f8/4c/57f84c0c-793d-5f9a-95ee-c212d0369e37/mzl.ugjwfhzx.png" alt="Facebook Groups"><h3>Facebook Groups</h3><p><a href="https://itunes.apple.com/us/app/facebook-groups/id931735837?mt=8" tLine truncated
|
||||
(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)
|
||||
|
||||
Reference in new issue
Block a user