mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
@@ -12,7 +12,7 @@
|
||||
toggler.onclick = function() {
|
||||
nav.classList.toggle('docsSliderActive');
|
||||
};
|
||||
</script></nav></div><div class="container mainContainer documentContainer postContainer blogContainer"><div class="wrapper"><div class="lonePost"><div class="post"><header class="postHeader"><h1><a href="/react-native/blog/2015/09/14/react-native-for-android.html">React Native for Android: How we built the first cross-platform React Native app</a></h1><p class="post-meta">September 14, 2015</p><div class="authorBlock"><p class="post-authorName"><a href="https://www.facebook.com/drwitte" target="_blank" rel="noreferrer noopener">Daniel Witte</a>Software Engineer at Facebook</p><div class="authorPhoto authorPhoto-big"><a href="https://www.facebook.com/drwitte" target="_blank" rel="noreferrer noopener"><img src="https://scontent-sea1-1.xx.fbcdn.net/v/t1.0-1/c54.54.681.681/s160x160/20622_10100459314481893_1435252658_n.jpg?_nc_log=1&oh=7afdb6aaa02f320c4dd4749733140133&oe=59D77C28"/></a></div></div></header><div><span><p>Earlier this year, we introduced <a href="https://code.facebook.com/posts/1014532261909640/react-native-bringing-modern-web-techniques-to-mobile/">React Native for iOS</a>. React Native brings what developers are used to from React on the web — declarative self-contained UI components and fast development cycles — to the mobile platform, while retaining the speed, fidelity, and feel of native applications. Today, we're happy to release React Native for Android.</p>
|
||||
</script></nav></div><div class="container mainContainer documentContainer postContainer blogContainer"><div class="wrapper"><div class="lonePost"><div class="post"><header class="postHeader"><h1><a href="/react-native/blog/2015/09/14/react-native-for-android.html">React Native for Android: How we built the first cross-platform React Native app</a></h1><p class="post-meta">September 14, 2015</p><div class="authorBlock"><p class="post-authorName"><a href="https://www.facebook.com/drwitte" target="_blank" rel="noreferrer noopener">Daniel Witte</a>Software Engineer at Facebook</p><div class="authorPhoto authorPhoto-big"><a href="https://www.facebook.com/drwitte" target="_blank" rel="noreferrer noopener"><img src="https://graph.facebook.com/210064/picture/?height=200&width=200" alt="Daniel Witte"/></a></div></div></header><div><span><p>Earlier this year, we introduced <a href="https://code.facebook.com/posts/1014532261909640/react-native-bringing-modern-web-techniques-to-mobile/">React Native for iOS</a>. React Native brings what developers are used to from React on the web — declarative self-contained UI components and fast development cycles — to the mobile platform, while retaining the speed, fidelity, and feel of native applications. Today, we're happy to release React Native for Android.</p>
|
||||
<p>At Facebook we've been using React Native in production for over a year now. Almost exactly a year ago, our team set out to develop the <a href="https://www.facebook.com/business/news/ads-manager-app">Ads Manager app</a>. Our goal was to create a new app to let the millions of people who advertise on Facebook manage their accounts and create new ads on the go. It ended up being not only Facebook's first fully React Native app but also the first cross-platform one. In this post, we'd like to share with you how we built this app, how React Native enabled us to move faster, and the lessons we learned.</p>
|
||||
<footer>
|
||||
<a href="https://code.facebook.com/posts/1189117404435352/react-native-for-android-how-we-built-the-first-cross-platform-react-native-app/" class="btn">Read more</a>
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
toggler.onclick = function() {
|
||||
nav.classList.toggle('docsSliderActive');
|
||||
};
|
||||
</script></nav></div><div class="container mainContainer documentContainer postContainer blogContainer"><div class="wrapper"><div class="lonePost"><div class="post"><header class="postHeader"><h1><a href="/react-native/blog/2017/08/07/react-native-performance-in-marketplace.html">React Native Performance in Marketplace</a></h1><p class="post-meta">August 7, 2017</p><div class="authorBlock"><p class="post-authorName"><a href="https://www.facebook.com/aaronechiu" target="_blank" rel="noreferrer noopener">Aaron Chiu</a>Software Engineer at Facebook</p><div class="authorPhoto authorPhoto-big"><a href="https://www.facebook.com/aaronechiu" target="_blank" rel="noreferrer noopener"><img src="https://fb-s-d-a.akamaihd.net/h-ak-fbx/v/t1.0-9/185908_1738453495300_6268428_n.jpg?_nc_log=1&oh=b0d497607c0d2012e88fde70cf4c7c7e&oe=59ED387B&__gda__=1509259466_d31a1cfbe282168c51f63019db5db391"/></a></div></div></header><div><span><p>React Native is used in multiple places across multiple apps in the Facebook family including a top level tab in the main Facebook apps. Our focus for this post is a highly visible product, <a href="https://newsroom.fb.com/news/2016/10/introducing-marketplace-buy-and-sell-with-your-local-community/">Marketplace</a>. It is available in a dozen or so countries and enables users to discover products and services provided by other users.</p>
|
||||
</script></nav></div><div class="container mainContainer documentContainer postContainer blogContainer"><div class="wrapper"><div class="lonePost"><div class="post"><header class="postHeader"><h1><a href="/react-native/blog/2017/08/07/react-native-performance-in-marketplace.html">React Native Performance in Marketplace</a></h1><p class="post-meta">August 7, 2017</p><div class="authorBlock"><p class="post-authorName"><a href="https://www.facebook.com/aaronechiu" target="_blank" rel="noreferrer noopener">Aaron Chiu</a>Software Engineer at Facebook</p><div class="authorPhoto authorPhoto-big"><a href="https://www.facebook.com/aaronechiu" target="_blank" rel="noreferrer noopener"><img src="https://graph.facebook.com/1057500063/picture/?height=200&width=200" alt="Aaron Chiu"/></a></div></div></header><div><span><p>React Native is used in multiple places across multiple apps in the Facebook family including a top level tab in the main Facebook apps. Our focus for this post is a highly visible product, <a href="https://newsroom.fb.com/news/2016/10/introducing-marketplace-buy-and-sell-with-your-local-community/">Marketplace</a>. It is available in a dozen or so countries and enables users to discover products and services provided by other users.</p>
|
||||
<p>In the first half of 2017, through the joint effort of the Relay Team, the Marketplace team, the Mobile JS Platform team, and the React Native team, we cut Marketplace Time to Interaction (TTI) in half for Android <a href="https://code.facebook.com/posts/307478339448736/year-class-a-classification-system-for-android/">Year Class 2010-11 devices</a>. Facebook has historically considered these devices as low-end Android devices, and they have the slowest TTIs on any platform or device type.</p>
|
||||
<p>A typical React Native startup looks something like this:</p>
|
||||
<p><img src="/react-native/blog/assets/RNPerformanceStartup.png" alt=""></p>
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
toggler.onclick = function() {
|
||||
nav.classList.toggle('docsSliderActive');
|
||||
};
|
||||
</script></nav></div><div class="container mainContainer documentContainer postContainer blogContainer"><div class="wrapper"><div class="lonePost"><div class="post"><header class="postHeader"><h1><a href="/react-native/blog/2017/08/30/react-native-monthly-3.html">React Native Monthly #3</a></h1><p class="post-meta">August 30, 2017</p><div class="authorBlock"><p class="post-authorName"><a href="https://github.com/grabbou" target="_blank" rel="noreferrer noopener">Mike Grabowski</a>CTO at Callstack</p><div class="authorPhoto authorPhoto-big"><a href="https://github.com/grabbou" target="_blank" rel="noreferrer noopener"><img src="https://pbs.twimg.com/profile_images/836150188725121024/NkU0AcqW_400x400.jpg"/></a></div></div></header><div><span><p>The React Native monthly meeting continues! This month's meeting was a bit shorter as most of our teams were busy shipping. Next month, we are at <a href="https://react-native.eu/">React Native EU</a> conference in Wroclaw, Poland. Make sure to grab a ticket and see you there in person! Meanwhile, let's see what our teams are up to.</p>
|
||||
</script></nav></div><div class="container mainContainer documentContainer postContainer blogContainer"><div class="wrapper"><div class="lonePost"><div class="post"><header class="postHeader"><h1><a href="/react-native/blog/2017/08/30/react-native-monthly-3.html">React Native Monthly #3</a></h1><p class="post-meta">August 30, 2017</p><div class="authorBlock"><p class="post-authorName"><a href="https://github.com/grabbou" target="_blank" rel="noreferrer noopener">Mike Grabowski</a>CTO at Callstack</p><div class="authorPhoto authorPhoto-big"><a href="https://github.com/grabbou" target="_blank" rel="noreferrer noopener"><img src="https://pbs.twimg.com/profile_images/988860423897313281/L9ErG_lr_400x400.jpg"/></a></div></div></header><div><span><p>The React Native monthly meeting continues! This month's meeting was a bit shorter as most of our teams were busy shipping. Next month, we are at <a href="https://react-native.eu/">React Native EU</a> conference in Wroclaw, Poland. Make sure to grab a ticket and see you there in person! Meanwhile, let's see what our teams are up to.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="teams"></a><a href="#teams" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Teams</h2>
|
||||
<p>On this third meeting, we had 5 teams join us:</p>
|
||||
<ul>
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
toggler.onclick = function() {
|
||||
nav.classList.toggle('docsSliderActive');
|
||||
};
|
||||
</script></nav></div><div class="container mainContainer documentContainer postContainer blogContainer"><div class="wrapper"><div class="lonePost"><div class="post"><header class="postHeader"><h1><a href="/react-native/blog/2017/09/21/react-native-monthly-4.html">React Native Monthly #4</a></h1><p class="post-meta">September 21, 2017</p><div class="authorBlock"><p class="post-authorName"><a href="https://github.com/grabbou" target="_blank" rel="noreferrer noopener">Mike Grabowski</a>CTO at Callstack</p><div class="authorPhoto authorPhoto-big"><a href="https://github.com/grabbou" target="_blank" rel="noreferrer noopener"><img src="https://pbs.twimg.com/profile_images/836150188725121024/NkU0AcqW_400x400.jpg"/></a></div></div></header><div><span><p>The React Native monthly meeting continues! Here are the notes from each team:</p>
|
||||
</script></nav></div><div class="container mainContainer documentContainer postContainer blogContainer"><div class="wrapper"><div class="lonePost"><div class="post"><header class="postHeader"><h1><a href="/react-native/blog/2017/09/21/react-native-monthly-4.html">React Native Monthly #4</a></h1><p class="post-meta">September 21, 2017</p><div class="authorBlock"><p class="post-authorName"><a href="https://github.com/grabbou" target="_blank" rel="noreferrer noopener">Mike Grabowski</a>CTO at Callstack</p><div class="authorPhoto authorPhoto-big"><a href="https://github.com/grabbou" target="_blank" rel="noreferrer noopener"><img src="https://pbs.twimg.com/profile_images/988860423897313281/L9ErG_lr_400x400.jpg"/></a></div></div></header><div><span><p>The React Native monthly meeting continues! Here are the notes from each team:</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="callstack"></a><a href="#callstack" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Callstack</h3>
|
||||
<ul>
|
||||
<li><a href="https://react-native.eu">React Native EU</a> is over. More than 300 participants from 33 countries have visited Wroclaw. Talks can be found <a href="https://www.youtube.com/channel/UCUNE_g1mQPuyW975WjgjYxA/videos">on Youtube</a>.</li>
|
||||
|
||||
+3
-3
@@ -768,7 +768,7 @@ const fullScreenWhiteLayer = this.state.animationDone ? null : (
|
||||
</ul>
|
||||
<h2><a class="anchor" aria-hidden="true" id="next-session"></a><a href="#next-session" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Next session</h2>
|
||||
<p>The next session is scheduled for Wednesday 6, December 2017. Feel free to ping me <a href="https://twitter.com/TomislavTenodi">on Twitter</a> if you have any suggestion on how we should improve the output of the meeting.</p>
|
||||
</span></div></article></div><div class="post"><header class="postHeader"><h1><a href="/react-native/blog/2017/09/21/react-native-monthly-4.html">React Native Monthly #4</a></h1><p class="post-meta">September 21, 2017</p><div class="authorBlock"><p class="post-authorName"><a href="https://github.com/grabbou" target="_blank" rel="noreferrer noopener">Mike Grabowski</a>CTO at Callstack</p><div class="authorPhoto authorPhoto-big"><a href="https://github.com/grabbou" target="_blank" rel="noreferrer noopener"><img src="https://pbs.twimg.com/profile_images/836150188725121024/NkU0AcqW_400x400.jpg"/></a></div></div></header><article class="post-content"><div><span><p>The React Native monthly meeting continues! Here are the notes from each team:</p>
|
||||
</span></div></article></div><div class="post"><header class="postHeader"><h1><a href="/react-native/blog/2017/09/21/react-native-monthly-4.html">React Native Monthly #4</a></h1><p class="post-meta">September 21, 2017</p><div class="authorBlock"><p class="post-authorName"><a href="https://github.com/grabbou" target="_blank" rel="noreferrer noopener">Mike Grabowski</a>CTO at Callstack</p><div class="authorPhoto authorPhoto-big"><a href="https://github.com/grabbou" target="_blank" rel="noreferrer noopener"><img src="https://pbs.twimg.com/profile_images/988860423897313281/L9ErG_lr_400x400.jpg"/></a></div></div></header><article class="post-content"><div><span><p>The React Native monthly meeting continues! Here are the notes from each team:</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="callstack"></a><a href="#callstack" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Callstack</h3>
|
||||
<ul>
|
||||
<li><a href="https://react-native.eu">React Native EU</a> is over. More than 300 participants from 33 countries have visited Wroclaw. Talks can be found <a href="https://www.youtube.com/channel/UCUNE_g1mQPuyW975WjgjYxA/videos">on Youtube</a>.</li>
|
||||
@@ -800,7 +800,7 @@ const fullScreenWhiteLayer = this.state.animationDone ? null : (
|
||||
</ul>
|
||||
<h2><a class="anchor" aria-hidden="true" id="next-session"></a><a href="#next-session" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Next session</h2>
|
||||
<p>The next session is scheduled for Wednesday 10, October 2017. As this was only our fourth meeting, we'd like to know how do these notes benefit the React Native community. Feel free to ping me <a href="https://twitter.com/grabbou">on Twitter</a> if you have any suggestion on how we should improve the output of the meeting.</p>
|
||||
</span></div></article></div><div class="post"><header class="postHeader"><h1><a href="/react-native/blog/2017/08/30/react-native-monthly-3.html">React Native Monthly #3</a></h1><p class="post-meta">August 30, 2017</p><div class="authorBlock"><p class="post-authorName"><a href="https://github.com/grabbou" target="_blank" rel="noreferrer noopener">Mike Grabowski</a>CTO at Callstack</p><div class="authorPhoto authorPhoto-big"><a href="https://github.com/grabbou" target="_blank" rel="noreferrer noopener"><img src="https://pbs.twimg.com/profile_images/836150188725121024/NkU0AcqW_400x400.jpg"/></a></div></div></header><article class="post-content"><div><span><p>The React Native monthly meeting continues! This month's meeting was a bit shorter as most of our teams were busy shipping. Next month, we are at <a href="https://react-native.eu/">React Native EU</a> conference in Wroclaw, Poland. Make sure to grab a ticket and see you there in person! Meanwhile, let's see what our teams are up to.</p>
|
||||
</span></div></article></div><div class="post"><header class="postHeader"><h1><a href="/react-native/blog/2017/08/30/react-native-monthly-3.html">React Native Monthly #3</a></h1><p class="post-meta">August 30, 2017</p><div class="authorBlock"><p class="post-authorName"><a href="https://github.com/grabbou" target="_blank" rel="noreferrer noopener">Mike Grabowski</a>CTO at Callstack</p><div class="authorPhoto authorPhoto-big"><a href="https://github.com/grabbou" target="_blank" rel="noreferrer noopener"><img src="https://pbs.twimg.com/profile_images/988860423897313281/L9ErG_lr_400x400.jpg"/></a></div></div></header><article class="post-content"><div><span><p>The React Native monthly meeting continues! This month's meeting was a bit shorter as most of our teams were busy shipping. Next month, we are at <a href="https://react-native.eu/">React Native EU</a> conference in Wroclaw, Poland. Make sure to grab a ticket and see you there in person! Meanwhile, let's see what our teams are up to.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="teams"></a><a href="#teams" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Teams</h2>
|
||||
<p>On this third meeting, we had 5 teams join us:</p>
|
||||
<ul>
|
||||
@@ -845,7 +845,7 @@ const fullScreenWhiteLayer = this.state.animationDone ? null : (
|
||||
</ul>
|
||||
<h2><a class="anchor" aria-hidden="true" id="next-session"></a><a href="#next-session" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Next session</h2>
|
||||
<p>The next session is scheduled for Wednesday 13, September 2017. As this was only our third meeting, we'd like to know how do these notes benefit the React Native community. Feel free to ping me <a href="https://twitter.com/grabbou">on Twitter</a> if you have any suggestion on how we should improve the output of the meeting.</p>
|
||||
</span></div></article></div><div class="post"><header class="postHeader"><h1><a href="/react-native/blog/2017/08/07/react-native-performance-in-marketplace.html">React Native Performance in Marketplace</a></h1><p class="post-meta">August 7, 2017</p><div class="authorBlock"><p class="post-authorName"><a href="https://www.facebook.com/aaronechiu" target="_blank" rel="noreferrer noopener">Aaron Chiu</a>Software Engineer at Facebook</p><div class="authorPhoto authorPhoto-big"><a href="https://www.facebook.com/aaronechiu" target="_blank" rel="noreferrer noopener"><img src="https://fb-s-d-a.akamaihd.net/h-ak-fbx/v/t1.0-9/185908_1738453495300_6268428_n.jpg?_nc_log=1&oh=b0d497607c0d2012e88fde70cf4c7c7e&oe=59ED387B&__gda__=1509259466_d31a1cfbe282168c51f63019db5db391"/></a></div></div></header><article class="post-content"><div><span><p>React Native is used in multiple places across multiple apps in the Facebook family including a top level tab in the main Facebook apps. Our focus for this post is a highly visible product, <a href="https://newsroom.fb.com/news/2016/10/introducing-marketplace-buy-and-sell-with-your-local-community/">Marketplace</a>. It is available in a dozen or so countries and enables users to discover products and services provided by other users.</p>
|
||||
</span></div></article></div><div class="post"><header class="postHeader"><h1><a href="/react-native/blog/2017/08/07/react-native-performance-in-marketplace.html">React Native Performance in Marketplace</a></h1><p class="post-meta">August 7, 2017</p><div class="authorBlock"><p class="post-authorName"><a href="https://www.facebook.com/aaronechiu" target="_blank" rel="noreferrer noopener">Aaron Chiu</a>Software Engineer at Facebook</p><div class="authorPhoto authorPhoto-big"><a href="https://www.facebook.com/aaronechiu" target="_blank" rel="noreferrer noopener"><img src="https://graph.facebook.com/1057500063/picture/?height=200&width=200" alt="Aaron Chiu"/></a></div></div></header><article class="post-content"><div><span><p>React Native is used in multiple places across multiple apps in the Facebook family including a top level tab in the main Facebook apps. Our focus for this post is a highly visible product, <a href="https://newsroom.fb.com/news/2016/10/introducing-marketplace-buy-and-sell-with-your-local-community/">Marketplace</a>. It is available in a dozen or so countries and enables users to discover products and services provided by other users.</p>
|
||||
<p>In the first half of 2017, through the joint effort of the Relay Team, the Marketplace team, the Mobile JS Platform team, and the React Native team, we cut Marketplace Time to Interaction (TTI) in half for Android <a href="https://code.facebook.com/posts/307478339448736/year-class-a-classification-system-for-android/">Year Class 2010-11 devices</a>. Facebook has historically considered these devices as low-end Android devices, and they have the slowest TTIs on any platform or device type.</p>
|
||||
<p>A typical React Native startup looks something like this:</p>
|
||||
<p><img src="/react-native/blog/assets/RNPerformanceStartup.png" alt=""></p>
|
||||
|
||||
@@ -450,7 +450,7 @@ AppRegistry.registerComponent(<span class="hljs-string">'ScratchPad'</span>, ()
|
||||
<blockquote>
|
||||
<p>This is an excerpt. Read the rest of the post on <a href="https://code.facebook.com/posts/435862739941212/making-react-native-apps-accessible/">Facebook Code</a>.</p>
|
||||
</blockquote>
|
||||
</span></div></article></div><div class="post"><header class="postHeader"><h1><a href="/react-native/blog/2015/09/14/react-native-for-android.html">React Native for Android: How we built the first cross-platform React Native app</a></h1><p class="post-meta">September 14, 2015</p><div class="authorBlock"><p class="post-authorName"><a href="https://www.facebook.com/drwitte" target="_blank" rel="noreferrer noopener">Daniel Witte</a>Software Engineer at Facebook</p><div class="authorPhoto authorPhoto-big"><a href="https://www.facebook.com/drwitte" target="_blank" rel="noreferrer noopener"><img src="https://scontent-sea1-1.xx.fbcdn.net/v/t1.0-1/c54.54.681.681/s160x160/20622_10100459314481893_1435252658_n.jpg?_nc_log=1&oh=7afdb6aaa02f320c4dd4749733140133&oe=59D77C28"/></a></div></div></header><article class="post-content"><div><span><p>Earlier this year, we introduced <a href="https://code.facebook.com/posts/1014532261909640/react-native-bringing-modern-web-techniques-to-mobile/">React Native for iOS</a>. React Native brings what developers are used to from React on the web — declarative self-contained UI components and fast development cycles — to the mobile platform, while retaining the speed, fidelity, and feel of native applications. Today, we're happy to release React Native for Android.</p>
|
||||
</span></div></article></div><div class="post"><header class="postHeader"><h1><a href="/react-native/blog/2015/09/14/react-native-for-android.html">React Native for Android: How we built the first cross-platform React Native app</a></h1><p class="post-meta">September 14, 2015</p><div class="authorBlock"><p class="post-authorName"><a href="https://www.facebook.com/drwitte" target="_blank" rel="noreferrer noopener">Daniel Witte</a>Software Engineer at Facebook</p><div class="authorPhoto authorPhoto-big"><a href="https://www.facebook.com/drwitte" target="_blank" rel="noreferrer noopener"><img src="https://graph.facebook.com/210064/picture/?height=200&width=200" alt="Daniel Witte"/></a></div></div></header><article class="post-content"><div><span><p>Earlier this year, we introduced <a href="https://code.facebook.com/posts/1014532261909640/react-native-bringing-modern-web-techniques-to-mobile/">React Native for iOS</a>. React Native brings what developers are used to from React on the web — declarative self-contained UI components and fast development cycles — to the mobile platform, while retaining the speed, fidelity, and feel of native applications. Today, we're happy to release React Native for Android.</p>
|
||||
<p>At Facebook we've been using React Native in production for over a year now. Almost exactly a year ago, our team set out to develop the <a href="https://www.facebook.com/business/news/ads-manager-app">Ads Manager app</a>. Our goal was to create a new app to let the millions of people who advertise on Facebook manage their accounts and create new ads on the go. It ended up being not only Facebook's first fully React Native app but also the first cross-platform one. In this post, we'd like to share with you how we built this app, how React Native enabled us to move faster, and the lessons we learned.</p>
|
||||
<footer>
|
||||
<a href="https://code.facebook.com/posts/1189117404435352/react-native-for-android-how-we-built-the-first-cross-platform-react-native-app/" class="btn">Read more</a>
|
||||
|
||||
@@ -31,22 +31,20 @@
|
||||
|
||||
render() {
|
||||
<span class="hljs-keyword">return</span> (
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">ListView</span>
|
||||
<span class="hljs-attr">refreshControl</span>=<span class="hljs-string">{</span>
|
||||
<<span class="hljs-attr">RefreshControl</span>
|
||||
<span class="hljs-attr">refreshing</span>=<span class="hljs-string">{this.state.refreshing}</span>
|
||||
<span class="hljs-attr">onRefresh</span>=<span class="hljs-string">{this._onRefresh.bind(this)}</span>
|
||||
/></span>
|
||||
<FlatList
|
||||
refreshControl={
|
||||
<RefreshControl
|
||||
refreshing={this.state.refreshing}
|
||||
onRefresh={this._onRefresh.bind(this)}
|
||||
/>
|
||||
}
|
||||
...
|
||||
>
|
||||
...
|
||||
<span class="hljs-tag"></<span class="hljs-name">ListView</span>></span>
|
||||
/>
|
||||
);
|
||||
}
|
||||
...
|
||||
}
|
||||
</span></code></pre>
|
||||
</code></pre>
|
||||
<p><strong>Note:</strong> <code>refreshing</code> is a controlled prop, this is why it needs to be set to true in the <code>onRefresh</code> function otherwise the refresh indicator will stop immediately.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="props"></a><a href="#props" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Props</h3>
|
||||
<ul>
|
||||
|
||||
Reference in New Issue
Block a user