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
Files
4fa31017c957acbca9b56f94de8e201b8b369635
react-native/blog/page4/index.html
T
Website Deployment Script 63533dd30d Deploy website 
Deploy website version based on 67c3e83c93e25daad08df01230fd7be7daf86671
2019-06-12 12:18:23 +00:00

546 lines
106 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Blog · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="A framework for building native apps using React"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Blog · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="A framework for building native apps using React"/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.png"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><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','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-41298772-2', 'auto');
ga('send', 'pageview');
</script><script type="text/javascript" src="https://snack.expo.io/embed.js"></script><script type="text/javascript" src="/react-native/js/codeblocks.js"></script><script src="https://unpkg.com/vanilla-back-to-top@7.1.14/dist/vanilla-back-to-top.min.js"></script><script>
document.addEventListener('DOMContentLoaded', function() {
addBackToTop(
{"zIndex":100}
)
});
</script><script src="/react-native/js/scrollSpy.js"></script><link rel="stylesheet" href="/react-native/css/prism.css"/><link rel="stylesheet" href="/react-native/css/main.css"/><script src="/react-native/js/codetabs.js"></script></head><body class="blog"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/react-native/"><img class="logo" src="/react-native/img/header_logo.png" alt="React Native"/><h2 class="headerTitleWithLogo">React Native</h2></a><a href="/react-native/versions"><h3>0.59</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class=""><a href="/react-native/docs/0.59/getting-started" target="_self">Docs</a></li><li class=""><a href="/react-native/docs/0.59/activityindicator" target="_self">API</a></li><li class=""><a href="/react-native/help" target="_self">Community</a></li><li class="siteNavGroupActive siteNavItemActive"><a href="/react-native/blog/" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search" title="Search"/></li><li class=""><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container docsNavContainer" id="docsNav"><nav class="toc"><div class="toggleNav"><section class="navWrapper wrapper"><div class="navBreadcrumb wrapper"><div class="navToggle" id="navToggler"><div class="hamburger-menu"><div class="line1"></div><div class="line2"></div><div class="line3"></div></div></div><h2><i>›</i><span>All Blog Posts</span></h2></div><div class="navGroups"><div class="navGroup"><h3 class="navGroupCategoryTitle">All Blog Posts</h3><ul class=""><li class="navListItem"><a class="navItem" href="/react-native/blog/2019/06/12/react-native-open-source-update">React Native Open Source Update June 2019</a></li><li class="navListItem"><a class="navItem" href="/react-native/blog/2019/05/01/react-native-at-f8-and-podcast">React Native at F8 and Open Source Podcast</a></li><li class="navListItem"><a class="navItem" href="/react-native/blog/2019/03/12/releasing-react-native-059">Releasing React Native 0.59</a></li><li class="navListItem"><a class="navItem" href="/react-native/blog/2019/03/01/react-native-open-source-update">React Native Open Source Update March 2019</a></li><li class="navListItem"><a class="navItem" href="/react-native/blog/2019/01/07/state-of-react-native-community">The State of the React Native Community in 2018</a></li><li class="navListItem"><a class="navItem" href="/react-native/blog/2018/11/01/oss-roadmap">Open Source Roadmap</a></li><li class="navListItem"><a class="navItem" href="/react-native/blog/2018/08/27/wkwebview">Introducing new iOS WebViews</a></li><li class="navListItem"><a class="navItem" href="/react-native/blog/2018/08/13/react-native-accessibility-updates">Accessibility API Updates</a></li><li class="navListItem"><a class="navItem" href="/react-native/blog/2018/07/04/releasing-react-native-056">Releasing 0.56</a></li><li class="navListItem"><a class="navItem" href="/react-native/blog/2018/06/14/state-of-react-native-2018">State of React Native 2018</a></li><li class="navListItem"><a class="navItem" href="/react-native/blog/2018/05/07/using-typescript-with-react-native">Using TypeScript with React Native</a></li><li class="navListItem"><a class="navItem" href="/react-native/blog/2018/04/09/build-com-app">Built with React Native - The Build.com app</a></li><li class="navListItem"><a class="navItem" href="/react-native/blog/2018/03/22/building-input-accessory-view-for-react-native">Building &lt;InputAccessoryView&gt; For React Native</a></li><li class="navListItem"><a class="navItem" href="/react-native/blog/2018/03/05/AWS-app-sync">Using AWS with React Native</a></li><li class="navListItem"><a class="navItem" href="/react-native/blog/2018/01/18/implementing-twitters-app-loading-animation-in-react-native">Implementing Twitter’s App Loading Animation in React Native</a></li><li class="navListItem"><a class="navItem" href="/react-native/blog/2018/01/09/react-native-monthly-6">React Native Monthly #6</a></li><li class="navListItem"><a class="navItem" href="/react-native/blog/2017/11/06/react-native-monthly-5">React Native Monthly #5</a></li><li class="navListItem"><a class="navItem" href="/react-native/blog/2017/09/21/react-native-monthly-4">React Native Monthly #4</a></li><li class="navListItem"><a class="navItem" href="/react-native/blog/2017/08/30/react-native-monthly-3">React Native Monthly #3</a></li><li class="navListItem"><a class="navItem" href="/react-native/blog/2017/08/07/react-native-performance-in-marketplace">React Native Performance in Marketplace</a></li><li class="navListItem"><a class="navItem" href="/react-native/blog/2017/07/28/react-native-monthly-2">React Native Monthly #2</a></li><li class="navListItem"><a class="navItem" href="/react-native/blog/2017/06/21/react-native-monthly-1">React Native Monthly #1</a></li><li class="navListItem"><a class="navItem" href="/react-native/blog/2017/03/13/idx-the-existential-function">idx: The Existential Function</a></li><li class="navListItem"><a class="navItem" href="/react-native/blog/2017/03/13/better-list-views">Better List Views in React Native</a></li><li class="navListItem"><a class="navItem" href="/react-native/blog/2017/03/13/introducing-create-react-native-app">Introducing Create React Native App</a></li><li class="navListItem"><a class="navItem" href="/react-native/blog/2017/02/14/using-native-driver-for-animated">Using Native Driver for Animated</a></li><li class="navListItem"><a class="navItem" href="/react-native/blog/2017/01/07/monthly-release-cadence">A Monthly Release Cadence: Releasing December and January RC</a></li><li class="navListItem"><a class="navItem" href="/react-native/blog/2016/12/05/easier-upgrades">Easier Upgrades Thanks to Git</a></li><li class="navListItem"><a class="navItem" href="/react-native/blog/2016/11/08/introducing-button-yarn-and-a-public-roadmap">Introducing Button, Faster Installs with Yarn, and a Public Roadmap</a></li><li class="navListItem"><a class="navItem" href="/react-native/blog/2016/10/25/0.36-headless-js-the-keyboard-api-and-more">0.36: Headless JS, the Keyboard API, &amp; more</a></li><li class="navListItem"><a class="navItem" href="/react-native/blog/2016/09/08/exponent-talks-unraveling-navigation">Expo Talks: Adam on Unraveling Navigation</a></li><li class="navListItem"><a class="navItem" href="/react-native/blog/2016/08/19/right-to-left-support-for-react-native-apps">Right-to-Left Layout Support For React Native Apps</a></li><li class="navListItem"><a class="navItem" href="/react-native/blog/2016/08/12/react-native-meetup-san-francisco">San Francisco Meetup Recap</a></li><li class="navListItem"><a class="navItem" href="/react-native/blog/2016/07/06/toward-better-documentation">Toward Better Documentation</a></li><li class="navListItem"><a class="navItem" href="/react-native/blog/2016/04/13/react-native-a-year-in-review">React Native: A year in review</a></li><li class="navListItem"><a class="navItem" href="/react-native/blog/2016/03/28/dive-into-react-native-performance">Dive into React Native Performance</a></li><li class="navListItem"><a class="navItem" href="/react-native/blog/2016/03/24/introducing-hot-reloading">Introducing Hot Reloading</a></li><li class="navListItem"><a class="navItem" href="/react-native/blog/2015/11/23/making-react-native-apps-accessible">Making React Native apps accessible</a></li><li class="navListItem"><a class="navItem" href="/react-native/blog/2015/09/14/react-native-for-android">React Native for Android: How we built the first cross-platform React Native app</a></li><li class="navListItem"><a class="navItem" href="/react-native/blog/2015/03/26/react-native-bringing-modern-web-techniques-to-mobile">React Native: Bringing modern web techniques to mobile</a></li></ul></div></div></section></div><script>
var coll = document.getElementsByClassName('collapsible');
var checkActiveCategory = true;
for (var i = 0; i < coll.length; i++) {
var links = coll[i].nextElementSibling.getElementsByTagName('*');
if (checkActiveCategory){
for (var j = 0; j < links.length; j++) {
if (links[j].classList.contains('navListItemActive')){
coll[i].nextElementSibling.classList.toggle('hide');
coll[i].childNodes[1].classList.toggle('rotate');
checkActiveCategory = false;
break;
}
}
}
coll[i].addEventListener('click', function() {
var arrow = this.childNodes[1];
arrow.classList.toggle('rotate');
var content = this.nextElementSibling;
content.classList.toggle('hide');
});
}
document.addEventListener('DOMContentLoaded', function() {
createToggler('#navToggler', '#docsNav', 'docsSliderActive');
createToggler('#tocToggler', 'body', 'tocActive');
var headings = document.querySelector('.toc-headings');
headings && headings.addEventListener('click', function(event) {
var el = event.target;
while(el !== headings){
if (el.tagName === 'A') {
document.body.classList.remove('tocActive');
break;
} else{
el = el.parentNode;
}
}
}, false);
function createToggler(togglerSelector, targetSelector, className) {
var toggler = document.querySelector(togglerSelector);
var target = document.querySelector(targetSelector);
if (!toggler) {
return;
}
toggler.onclick = function(event) {
event.preventDefault();
target.classList.toggle(className);
};
}
});
</script></nav></div><div class="container mainContainer postContainer blogContainer"><div class="wrapper"><div class="posts"><div class="post"><header class="postHeader"><h1 class="postHeaderTitle"><a href="/react-native/blog/2016/09/08/exponent-talks-unraveling-navigation">Expo Talks: Adam on Unraveling Navigation</a></h1><p class="post-meta">September 8, 2016</p><div class="authorBlock"><p class="post-authorName"><a href="https://twitter.com/hectorramos" target="_blank" rel="noreferrer noopener">Héctor Ramos</a>Developer Advocate at Facebook</p><div class="authorPhoto authorPhotoBig"><a href="https://twitter.com/hectorramos" target="_blank" rel="noreferrer noopener"><img src="https://s.gravatar.com/avatar/f2223874e66e884c99087e452501f2da?s=128" alt="Héctor Ramos"/></a></div></div></header><article class="post-content"><div><span><p><a href="https://twitter.com/skevy">Adam Miskiewicz</a> from <a href="https://expo.io/">Expo</a> talks about mobile navigation and the <a href="https://github.com/exponent/ex-navigation"><code>ex-navigation</code></a> React Native library at Expo's office hours last week.</p>
</span></div></article></div><div class="post"><header class="postHeader"><h1 class="postHeaderTitle"><a href="/react-native/blog/2016/08/19/right-to-left-support-for-react-native-apps">Right-to-Left Layout Support For React Native Apps</a></h1><p class="post-meta">August 19, 2016</p><div class="authorBlock"><p class="post-authorName"><a href="https://github.com/MengjueW" target="_blank" rel="noreferrer noopener">Mengjue (Mandy) Wang</a>Software Engineer Intern at Facebook</p><div class="authorPhoto authorPhotoBig"><a href="https://github.com/MengjueW" target="_blank" rel="noreferrer noopener"><img src="https://avatars0.githubusercontent.com/u/13987140?v=3&amp;s=128" alt="Mengjue (Mandy) Wang"/></a></div></div></header><article class="post-content"><div><span><p>After launching an app to the app stores, internationalization is the next step to further your audience reach. Over 20 countries and numerous people around the world use Right-to-Left (RTL) languages. Thus, making your app support RTL for them is necessary.</p>
<p>We're glad to announce that React Native has been improved to support RTL layouts. This is now available in the <a href="https://github.com/facebook/react-native">react-native</a> master branch today, and will be available in the next RC: <a href="https://github.com/facebook/react-native/releases"><code>v0.33.0-rc</code></a>.</p>
<p>This involved changing <a href="https://github.com/facebook/css-layout">css-layout</a>, the core layout engine used by RN, and RN core implementation, as well as specific OSS JS components to support RTL.</p>
<p>To battle test the RTL support in production, the latest version of the <strong>Facebook Ads Manager</strong> app (the first cross-platform 100% RN app) is now available in Arabic and Hebrew with RTL layouts for both <a href="https://itunes.apple.com/app/id964397083">iOS</a> and <a href="https://play.google.com/store/apps/details?id=com.facebook.adsmanager">Android</a>. Here is how it looks like in those RTL languages:</p>
<p><img src="/react-native/blog/assets/rtl-ama-ios-arabic.png" width="280" style="margin:10px"></p>
<p><img src="/react-native/blog/assets/rtl-ama-android-hebrew.png" width="280" style="margin:10px"></p>
<h2><a class="anchor" aria-hidden="true" id="overview-changes-in-rn-for-rtl-support"></a><a href="#overview-changes-in-rn-for-rtl-support" 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>Overview Changes in RN for RTL support</h2>
<p><a href="https://github.com/facebook/css-layout">css-layout</a> already has a concept of <code>start</code> and <code>end</code> for the layout. In the Left-to-Right (LTR) layout, <code>start</code> means <code>left</code>, and <code>end</code> means <code>right</code>. But in RTL, <code>start</code> means <code>right</code>, and <code>end</code> means <code>left</code>. This means we can make RN depend on the <code>start</code> and <code>end</code> calculation to compute the correct layout, which includes <code>position</code>, <code>padding</code>, and <code>margin</code>.</p>
<p>In addition, <a href="https://github.com/facebook/css-layout">css-layout</a> already makes each component's direction inherits from its parent. This means, we simply need to set the direction of the root component to RTL, and the entire app will flip.</p>
<p>The diagram below describes the changes at high level:</p>
<p><img src="/react-native/blog/assets/rtl-rn-core-updates.png" alt=""></p>
<p>These include:</p>
<ul>
<li><a href="https://github.com/facebook/css-layout/commit/46c842c71a1232c3c78c4215275d104a389a9a0f">css-layout RTL support for absolute positioning</a></li>
<li>mapping <code>left</code> and <code>right</code> to <code>start</code> and <code>end</code> in RN core implementation for shadow nodes</li>
<li>and exposing a <a href="https://github.com/facebook/react-native/blob/f0fb228ec76ed49e6ed6d786d888e8113b8959a2/Libraries/Utilities/I18nManager.js">bridged utility module</a> to help control the RTL layout</li>
</ul>
<p>With this update, when you allow RTL layout for your app:</p>
<ul>
<li>every component layout will flip horizontally</li>
<li>some gestures and animations will automatically have RTL layout, if you are using RTL-ready OSS components</li>
<li>minimal additional effort may be needed to make your app fully RTL-ready</li>
</ul>
<h2><a class="anchor" aria-hidden="true" id="making-an-app-rtl-ready"></a><a href="#making-an-app-rtl-ready" 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>Making an App RTL-ready</h2>
<ol>
<li><p>To support RTL, you should first add the RTL language bundles to your app.</p>
<ul>
<li>See the general guides from <a href="https://developer.apple.com/library/ios/documentation/MacOSX/Conceptual/BPInternational/LocalizingYourApp/LocalizingYourApp.html#//apple_ref/doc/uid/10000171i-CH5-SW1">iOS</a> and <a href="https://developer.android.com/training/basics/supporting-devices/languages.html">Android</a>.</li>
</ul></li>
<li><p>Allow RTL layout for your app by calling the <code>allowRTL()</code> function at the beginning of native code. We provided this utility to only apply to an RTL layout when your app is ready. Here is an example:</p>
<p>iOS:</p>
<pre><code class="hljs css language-objc"><span class="hljs-comment">// in AppDelegate.m</span>
[[RCTI18nUtil sharedInstance] allowRTL:<span class="hljs-literal">YES</span>];
</code></pre>
<p>Android:</p>
<pre><code class="hljs css language-java"><span class="token comment">// in MainActivity.java</span>
I18nUtil sharedI18nUtilInstance <span class="token operator">=</span> I18nUtil<span class="token punctuation">.</span><span class="token function">getInstance</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
sharedI18nUtilInstance<span class="token punctuation">.</span><span class="token function">allowRTL</span><span class="token punctuation">(</span>context<span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></li>
<li><p>For Android, you need add <code>android:supportsRtl=&quot;true&quot;</code> to the <a href="http://developer.android.com/guide/topics/manifest/application-element.html"><code>&lt;application&gt;</code></a> element in <code>AndroidManifest.xml</code> file.</p></li>
</ol>
<p>Now, when you recompile your app and change the device language to an RTL language (e.g. Arabic or Hebrew), your app layout should change to RTL automatically.</p>
<h2><a class="anchor" aria-hidden="true" id="writing-rtl-ready-components"></a><a href="#writing-rtl-ready-components" 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>Writing RTL-ready Components</h2>
<p>In general, most components are already RTL-ready, for example:</p>
<ul>
<li>Left-to-Right Layout</li>
</ul>
<p><img src="/react-native/blog/assets/rtl-demo-listitem-ltr.png" width="300"></p>
<ul>
<li>Right-to-Left Layout</li>
</ul>
<p><img src="/react-native/blog/assets/rtl-demo-listitem-rtl.png" width="300"></p>
<p>However, there are several cases to be aware of, for which you will need the <a href="https://github.com/facebook/react-native/blob/f0fb228ec76ed49e6ed6d786d888e8113b8959a2/Libraries/Utilities/I18nManager.js"><code>I18nManager</code></a>. In <a href="https://github.com/facebook/react-native/blob/f0fb228ec76ed49e6ed6d786d888e8113b8959a2/Libraries/Utilities/I18nManager.js"><code>I18nManager</code></a>, there is a constant <code>isRTL</code> to tell if layout of app is RTL or not, so that you can make the necessary changes according to the layout.</p>
<h4><a class="anchor" aria-hidden="true" id="icons-with-directional-meaning"></a><a href="#icons-with-directional-meaning" 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>Icons with Directional Meaning</h4>
<p>If your component has icons or images, they will be displayed the same way in LTR and RTL layout, because RN will not flip your source image. Therefore, you should flip them according to the layout style.</p>
<ul>
<li>Left-to-Right Layout</li>
</ul>
<p><img src="/react-native/blog/assets/rtl-demo-icon-ltr.png" width="300"></p>
<ul>
<li>Right-to-Left Layout</li>
</ul>
<p><img src="/react-native/blog/assets/rtl-demo-icon-rtl.png" width="300"></p>
<p>Here are two ways to flip the icon according to the direction:</p>
<ul>
<li><p>Adding a <code>transform</code> style to the image component:</p>
<pre><code class="hljs css language-javascript"><span class="token operator">&lt;</span>Image
source<span class="token operator">=</span><span class="token punctuation">{</span><span class="token operator">...</span><span class="token punctuation">}</span>
style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>transform<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>scaleX<span class="token punctuation">:</span> I18nManager<span class="token punctuation">.</span>isRTL <span class="token operator">?</span> <span class="token operator">-</span><span class="token number">1</span> <span class="token punctuation">:</span> <span class="token number">1</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>
</code></pre></li>
<li><p>Or, changing the image source according to the direction:</p>
<pre><code class="hljs css language-javascript"><span class="token keyword">let</span> imageSource <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'./back.png'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>I18nManager<span class="token punctuation">.</span>isRTL<span class="token punctuation">)</span> <span class="token punctuation">{</span>
imageSource <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'./forward.png'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">return</span> <span class="token operator">&lt;</span>Image source<span class="token operator">=</span><span class="token punctuation">{</span>imageSource<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">;</span>
</code></pre></li>
</ul>
<h4><a class="anchor" aria-hidden="true" id="gestures-and-animations"></a><a href="#gestures-and-animations" 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>Gestures and Animations</h4>
<p>In iOS and Android development, when you change to RTL layout, the gestures and animations are the opposite of LTR layout. Currently, in RN, gestures and animations are not supported on RN core code level, but on components level. The good news is, some of these components already support RTL today, such as <a href="https://github.com/facebook/react-native/blob/38a6eec0db85a5204e85a9a92b4dee2db9641671/Libraries/Experimental/SwipeableRow/SwipeableRow.js"><code>SwipeableRow</code></a> and <a href="https://github.com/facebook/react-native/tree/master/Libraries/NavigationExperimental"><code>NavigationExperimental</code></a>. However, other components with gestures will need to support RTL manually.</p>
<p>A good example to illustrate gesture RTL support is <a href="https://github.com/facebook/react-native/blob/38a6eec0db85a5204e85a9a92b4dee2db9641671/Libraries/Experimental/SwipeableRow/SwipeableRow.js"><code>SwipeableRow</code></a>.</p>
<p align="center">
<img src="/react-native/blog/assets/rtl-demo-swipe-ltr.png" width="280" style="margin:10px">
<img src="/react-native/blog/assets/rtl-demo-swipe-rtl.png" width="280" style="margin:10px">
</p>
<h5><a class="anchor" aria-hidden="true" id="gestures-example"></a><a href="#gestures-example" 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>Gestures Example</h5>
<pre><code class="hljs css language-js"><span class="token comment">// SwipeableRow.js</span>
<span class="token function">_isSwipingExcessivelyRightFromClosedPosition</span><span class="token punctuation">(</span>gestureState<span class="token punctuation">:</span> Object<span class="token punctuation">)</span><span class="token punctuation">:</span> boolean <span class="token punctuation">{</span>
<span class="token comment">// ...</span>
<span class="token keyword">const</span> gestureStateDx <span class="token operator">=</span> <span class="token constant">IS_RTL</span> <span class="token operator">?</span> <span class="token operator">-</span>gestureState<span class="token punctuation">.</span>dx <span class="token punctuation">:</span> gestureState<span class="token punctuation">.</span>dx<span class="token punctuation">;</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">_isSwipingRightFromClosed</span><span class="token punctuation">(</span>gestureState<span class="token punctuation">)</span> <span class="token operator">&amp;&amp;</span>
gestureStateDx <span class="token operator">></span> <span class="token constant">RIGHT_SWIPE_THRESHOLD</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre>
<h5><a class="anchor" aria-hidden="true" id="animation-example"></a><a href="#animation-example" 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>Animation Example</h5>
<pre><code class="hljs css language-js"><span class="token comment">// SwipeableRow.js</span>
<span class="token function">_animateBounceBack</span><span class="token punctuation">(</span>duration<span class="token punctuation">:</span> number<span class="token punctuation">)</span><span class="token punctuation">:</span> <span class="token keyword">void</span> <span class="token punctuation">{</span>
<span class="token comment">// ...</span>
<span class="token keyword">const</span> swipeBounceBackDistance <span class="token operator">=</span> <span class="token constant">IS_RTL</span> <span class="token operator">?</span>
<span class="token operator">-</span><span class="token constant">RIGHT_SWIPE_BOUNCE_BACK_DISTANCE</span> <span class="token punctuation">:</span>
<span class="token constant">RIGHT_SWIPE_BOUNCE_BACK_DISTANCE</span><span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">_animateTo</span><span class="token punctuation">(</span>
<span class="token operator">-</span>swipeBounceBackDistance<span class="token punctuation">,</span>
duration<span class="token punctuation">,</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>_animateToClosedPositionDuringBounce<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>
</code></pre>
<h2><a class="anchor" aria-hidden="true" id="maintaining-your-rtl-ready-app"></a><a href="#maintaining-your-rtl-ready-app" 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>Maintaining Your RTL-ready App</h2>
<p>Even after the initial RTL-compatible app release, you will likely need to iterate on new features. To improve development efficiency, <a href="https://github.com/facebook/react-native/blob/f0fb228ec76ed49e6ed6d786d888e8113b8959a2/Libraries/Utilities/I18nManager.js"><code>I18nManager</code></a> provides the <code>forceRTL()</code> function for faster RTL testing without changing the test device language. You might want to provide a simple switch for this in your app. Here's an example from the RTL example in the RNTester:</p>
<p align="center">
<img src="/react-native/blog/assets/rtl-demo-forcertl.png" width="300">
</p>
<pre><code class="hljs css language-js"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>RNTesterBlock</span> <span class="token attr-name">title</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token string">'Quickly Test RTL Layout'</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>View</span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>flexDirectionRow<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Text</span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>switchRowTextView<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>forceRTL<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Text</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>View</span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>switchRowSwitchView<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Switch</span>
<span class="token attr-name">onValueChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_onDirectionChange<span class="token punctuation">}</span></span>
<span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>rightAlignStyle<span class="token punctuation">}</span></span>
<span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>isRTL<span class="token punctuation">}</span></span>
<span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>View</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>View</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>RNTesterBlock</span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
<span class="token function-variable function">_onDirectionChange</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
I18nManager<span class="token punctuation">.</span><span class="token function">forceRTL</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>isRTL<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">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>isRTL<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>isRTL<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
Alert<span class="token punctuation">.</span><span class="token function">alert</span><span class="token punctuation">(</span>
<span class="token string">'Reload this page'</span><span class="token punctuation">,</span>
<span class="token string">'Please reload this page to change the UI direction! '</span> <span class="token operator">+</span>
<span class="token string">'All examples in this app will be affected. '</span> <span class="token operator">+</span>
<span class="token string">'Check them out to see what they look like in RTL layout.'</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>
</code></pre>
<p>When working on a new feature, you can easily toggle this button and reload the app to see RTL layout. The benefit is you won't need to change the language setting to test, however some text alignment won't change, as explained in the next section. Therefore, it's always a good idea to test your app in the RTL language before launching.</p>
<h2><a class="anchor" aria-hidden="true" id="limitations-and-future-plan"></a><a href="#limitations-and-future-plan" 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>Limitations and Future Plan</h2>
<p>The RTL support should cover most of the UX in your app; however, there are some limitations for now:</p>
<ul>
<li>Text alignment behaviors differ in iOS and Android
<ul>
<li>In iOS, the default text alignment depends on the active language bundle, they are consistently on one side. In Android, the default text alignment depends on the language of the text content, i.e. English will be left-aligned and Arabic will be right-aligned.</li>
<li>In theory, this should be made consistent across platform, but some people may prefer one behavior to another when using an app. More user experience research may be needed to find out the best practice for text alignment.</li>
</ul></li>
</ul>
<ul>
<li><p>There is no &quot;true&quot; left/right</p>
<p>As discussed before, we map the <code>left</code>/<code>right</code> styles from the JS side to <code>start</code>/<code>end</code>, all <code>left</code> in code for RTL layout becomes &quot;right&quot; on screen, and <code>right</code> in code becomes &quot;left&quot; on screen. This is convenient because you don't need to change your product code too much, but it means there is no way to specify &quot;true left&quot; or &quot;true right&quot; in the code. In the future, allowing a component to control its direction regardless of the language may be necessary.</p></li>
<li><p>Make RTL support for gestures and animations more developer friendly</p>
<p>Currently, there is still some programming effort required to make gestures and animations RTL compatible. In the future, it would be ideal to find a way to make gestures and animations RTL support more developer friendly.</p></li>
</ul>
<h2><a class="anchor" aria-hidden="true" id="try-it-out"></a><a href="#try-it-out" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Try it Out!</h2>
<p>Check out the <a href="https://github.com/facebook/react-native/blob/master/RNTester/js/RTLExample.js"><code>RTLExample</code></a> in the <code>RNTester</code> to understand more about RTL support, and let us know how it works for you!</p>
<p>Finally, thank you for reading! We hope that the RTL support for React Native helps you grow your apps for international audience!</p>
</span></div></article></div><div class="post"><header class="postHeader"><h1 class="postHeaderTitle"><a href="/react-native/blog/2016/08/12/react-native-meetup-san-francisco">San Francisco Meetup Recap</a></h1><p class="post-meta">August 12, 2016</p><div class="authorBlock"><p class="post-authorName"><a href="https://twitter.com/hectorramos" target="_blank" rel="noreferrer noopener">Héctor Ramos</a>Developer Advocate at Facebook</p><div class="authorPhoto authorPhotoBig"><a href="https://twitter.com/hectorramos" target="_blank" rel="noreferrer noopener"><img src="https://s.gravatar.com/avatar/f2223874e66e884c99087e452501f2da?s=128" alt="Héctor Ramos"/></a></div></div></header><article class="post-content"><div><span><p>Last week I had the opportunity to attend the <a href="http://www.meetup.com/React-Native-San-Francisco/photos/27168649/#452793854">React Native Meetup</a> at Zynga’s San Francisco office. With around 200 people in attendance, it served as a great place to meet other developers near me that are also interested in React Native.</p>
<p><img src="/react-native/blog/assets/rnmsf-august-2016-hero.jpg" alt=""></p>
<p>I was particularly interested in learning more about how React and React Native are used at companies like Zynga, Netflix, and Airbnb. The agenda for the night would be as follows:</p>
<ul>
<li>Rapid Prototyping in React</li>
<li>Designing APIs for React Native</li>
<li>Bridging the Gap: Using React Native in Existing Codebases</li>
</ul>
<p>But first, the event started off with a quick introduction and a brief recap of recent news:</p>
<ul>
<li>Did you know that React Native is now the <a href="https://twitter.com/jamespearce/status/759637111880359937">top Java repository on GitHub</a>?</li>
<li><a href="https://github.com/rnpm/rnpm">rnpm</a> is now part of React Native core! You can now use <code>react-native link</code> in place of <code>rnpm link</code> to <a href="https://facebook.github.io/react-native/linking-libraries-ios.md">install libraries with native dependencies</a>.</li>
<li>The React Native Meetup community is growing fast! There are now over 4,800 developers across a variety of React Native meetup groups all over the globe.</li>
</ul>
<p>If <a href="http://www.meetup.com/find/?allMeetups=false&amp;keywords=react+native&amp;radius=Infinity&amp;userFreeform=San+Francisco%2C+CA&amp;mcId=z94105&amp;mcName=San+Francisco%2C+CA&amp;sort=recommended&amp;eventFilter=mysugg">one of these meetups</a> is held near you, I highly recommend attending!</p>
<h2><a class="anchor" aria-hidden="true" id="rapid-prototyping-in-react-at-zynga"></a><a href="#rapid-prototyping-in-react-at-zynga" 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>Rapid Prototyping in React at Zynga</h2>
<p>The first round of news was followed by a quick introduction by Zynga, our hosts for the evening. Abhishek Chadha talked about how they use React to quickly prototype new experiences on mobile, demoing a quick prototype of a Draw Something-like app. They use a similar approach as React Native, providing access to native APIs via a bridge. This was demonstrated when Abhishek used the device's camera to snap a photo of the audience and then drew a hat on someone's head.</p>
<h2><a class="anchor" aria-hidden="true" id="designing-apis-for-react-native-at-netflix"></a><a href="#designing-apis-for-react-native-at-netflix" 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>Designing APIs for React Native at Netflix</h2>
<p>Up next, the first featured talk of the evening. <a href="https://twitter.com/clarler">Clarence Leung</a>, Senior Software Engineer at Netflix, presented his talk on Designing APIs for React Native. First he noted the two main types of libraries one may work on: components such as tab bars and date pickers, and libraries that provide access to native services such as the camera roll or in-app payments. There are two ways one may approach when building a library for use in React Native:</p>
<ul>
<li>Provide platform-specific components</li>
<li>A cross-platform library with a similar API for both iOS and Android</li>
</ul>
<p>Each approach has its own considerations, and it’s up to you to determine what works best for your needs.</p>
<p><strong>Approach #1</strong></p>
<p>As an example of platform-specific components, Clarence talked about the DatePickerIOS and DatePickerAndroid from core React Native. On iOS, date pickers are rendered as part of the UI and can be easily embedded in an existing view, while date pickers on Android are presented modally. It makes sense to provide separate components in this case.</p>
<p><strong>Approach #2</strong></p>
<p>Photo pickers, on the other hand, are treated similarly on iOS and Android. There are some slight differences — Android does not group photos into folders like iOS does with Selfies, for example — but those are easily handled using <code>if</code> statements and the <code>Platform</code> component.</p>
<p>Regardless of which approach you settle on, it’s a good idea to minimize the API surface and build app-specific libraries. For example, iOS’s In-App Purchase framework supports one-time, consumable purchases, as well as renewable subscriptions. If your app will only need to support consumable purchases, you may get away with dropping support for subscriptions in your cross-platform library.</p>
<p><img src="/react-native/blog/assets/rnmsf-august-2016-netflix.jpg" alt=""></p>
<p>There was a brief Q&amp;A session at the end of Clarence’s talk. One of the interesting tid bits that came out of it was that around 80% of the React Native code written for these libraries at Netflix is shared across both iOS and Android.</p>
<h2><a class="anchor" aria-hidden="true" id="bridging-the-gap-using-react-native-in-existing-codebases"></a><a href="#bridging-the-gap-using-react-native-in-existing-codebases" 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>Bridging the Gap, Using React Native in Existing Codebases</h2>
<p>The final talk of the night was by <a href="https://twitter.com/intelligibabble">Leland Richardson</a> from Airbnb. The talk was focused on the use of React Native in existing codebases. I already know how easy it is to write a new app from scratch using React Native, so I was very interested to hear about Airbnb’s experience adopting React Native in their existing native apps.</p>
<p>Leland started off by talking about greenfield apps versus brownfield apps. Greenfield means to start a project without the need to consider any prior work. This is in contrast to brownfield projects where you need to take into account the existing project’s requirements, development processes, and all of the teams various needs.</p>
<p>When you’re working on a greenfield app, the React Native CLI sets up a single repository for both iOS and Android and everything just works. The first challenge against using React Native at Airbnb was the fact that the iOS and Android app each had their own repository. Multi-repo companies have some hurdles to get past before they can adopt React Native.</p>
<p>To get around this, Airbnb first set up a new repo for the React Native codebase. They used their continuous integration servers to mirror the iOS and Android repos into this new repo. After tests are run and the bundle is built, the build artifacts are synced back to the iOS and Android repos. This allows the mobile engineers to work on native code without altering their development enviroment. Mobile engineers don't need to install npm, run the packager, or remember to build the JavaScript bundle. The engineers writing actual React Native code do not have to worry about syncing their code across iOS and Android, as they work on the React Native repository directly.</p>
<p>This does come with some drawbacks, mainly they could not ship atomic updates. Changes that require a combination of native and JavaScript code would require three separate pull requests, all of which had to be carefully landed. In order to avoid conflicts, CI will fail to land changes back to the iOS and Android repos if master has changed since the build started. This would cause long delays during high commit frequency days (such as when new releases are cut).</p>
<p>Airbnb has since moved to a mono repo approach. Fortunately this was already under consideration, and once the iOS and Android teams became comfortable with using React Native they were happy to accelerate the move towards the mono repo.</p>
<p>This has solved most of the issues they had with the split repo approach. Leland did note that this does cause a higher strain on the version control servers, which may be an issue for smaller companies.</p>
<p><img src="/react-native/blog/assets/rnmsf-august-2016-airbnb.jpg" alt=""></p>
<h3><a class="anchor" aria-hidden="true" id="the-navigation-problem"></a><a href="#the-navigation-problem" 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>The Navigation Problem</h3>
<p>The second half of Leland's talk focused on a topic that is dear to me: the Navigation problem in React Native. He talked about the abundance of navigation libraries in React Native, both first party and third party. NavigationExperimental was mentioned as something that seemed promising, but ended up not being well suited for their use case.</p>
<p>In fact, none of the existing navigation libraries seem to work well for brownfield apps. A brownfield app requires that the navigation state be fully owned by the native app. For example, if a user’s session expires while a React Native view is being presented, the native app should be able to take over and present a login screen as needed.</p>
<p>Airbnb also wanted to avoid replacing native navigation bars with JavaScript versions as part of a transition, as the effect could be jarring. Initially they limited themselves to modally presented views, but this obviously presented a problem when it came to adopting React Native more widely within their apps.</p>
<p>They decided that they needed their own library. The library is called <code>airbnb-navigation</code>. The library has not yet being open sourced as it is strongly tied to Airbnb’s codebase, but it is something they’d like to release by the end of the year.</p>
<p>I won’t go into much detail into the library’s API, but here are some of the key takeaways:</p>
<ul>
<li>One must preregister scenes ahead of time</li>
<li>Each scene is displayed within its own <code>RCTRootView</code>. They are presented natively on each platform (e.g. <code>UINavigationController</code>s are used on iOS).</li>
<li>The main <code>ScrollView</code> in a scene should be wrapped in a <code>ScrollScene</code> component. Doing so allows you to take advantage of native behaviors such as tapping on the status bar to scroll to the top on iOS.</li>
<li>Transitions between scenes are handled natively, no need to worry about performance.</li>
<li>The Android back button is automatically supported.</li>
<li>They can take advantage of View Controller based navigation bar styling via a Navigator.Config UI-less component.</li>
</ul>
<p>There’s also some considerations to keep in mind:</p>
<ul>
<li>The navigation bar is not easily customized in JavaScript, as it is a native component. This is intentional, as using native navigation bars is a hard requirement for this type of library.</li>
<li>ScreenProps must be serialized/de-serialized whenever they're sent through the bridge, so care must be taken if sending too much data here.</li>
<li>Navigation state is owned by the native app (also a hard requirement for the library), so things like Redux cannot manipulate navigation state.</li>
</ul>
<p>Leland's talk was also followed by a Q&amp;A session. Overall, Airbnb is satisfied with React Native. They’re interested in using Code Push to fix any issues without going through the App Store, and their engineers love Live Reload, as they don't have to wait for the native app to be rebuilt after every minor change.</p>
<h2><a class="anchor" aria-hidden="true" id="closing-remarks"></a><a href="#closing-remarks" 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>Closing Remarks</h2>
<p>The event ended with some additional React Native news:</p>
<ul>
<li>Deco announced their <a href="https://www.decosoftware.com/showcase">React Native Showcase</a>, and invited everyone to add their app to the list.</li>
<li>The recent <a href="https://facebook.github.io/react-native/blog/2016/07/06/toward-better-documentation.html">documentation overhaul</a> got a shoutout!</li>
<li>Devin Abbott, one of the creators of Deco IDE, will be teaching an introductory <a href="https://www.decosoftware.com/course">React Native course</a>.</li>
</ul>
<p><img src="/react-native/blog/assets/rnmsf-august-2016-docs.jpg" alt=""></p>
<p>Meetups provide a good opportunity to meet and learn from other developers in the community. I'm looking forward to attending more React Native meetups in the future. If you make it up to one of these, please look out for me and let me know how we can make React Native work better for you!</p>
</span></div></article></div><div class="post"><header class="postHeader"><h1 class="postHeaderTitle"><a href="/react-native/blog/2016/07/06/toward-better-documentation">Toward Better Documentation</a></h1><p class="post-meta">July 6, 2016</p><div class="authorBlock"><p class="post-authorName"><a href="https://twitter.com/lacker" target="_blank" rel="noreferrer noopener">Kevin Lacker</a>Engineering Manager at Facebook</p><div class="authorPhoto authorPhotoBig"><a href="https://twitter.com/lacker" target="_blank" rel="noreferrer noopener"><img src="http://www.gravatar.com/avatar/9b790592be15d4f55a5ed7abb5103304?s=128" alt="Kevin Lacker"/></a></div></div></header><article class="post-content"><div><span><p>Part of having a great developer experience is having great documentation. A lot goes into creating good docs - the ideal documentation is concise, helpful, accurate, complete, and delightful. Recently we've been working hard to make the docs better based on your feedback, and we wanted to share some of the improvements we've made.</p>
<h2><a class="anchor" aria-hidden="true" id="inline-examples"></a><a href="#inline-examples" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Inline Examples</h2>
<p>When you learn a new library, a new programming language, or a new framework, there's a beautiful moment when you first write a bit of code, try it out, see if it works... and it <em>does</em> work. You created something real. We wanted to put that visceral experience right into our docs. Like this:</p>
<div class="web-player"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React, { Component } <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
<span class="hljs-keyword">import</span> { AppRegistry, Text, View } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">ScratchPad</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span> </span>{
render() {
<span class="hljs-keyword">return</span> (
<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{{flex:</span> <span class="hljs-attr">1</span>}}&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{{fontSize:</span> <span class="hljs-attr">30</span>, <span class="hljs-attr">flex:</span> <span class="hljs-attr">1</span>, <span class="hljs-attr">textAlign:</span> '<span class="hljs-attr">center</span>'}}&gt;</span>
Isn't this cool?
<span class="hljs-tag">&lt;/<span class="hljs-name">Text</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">Text</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{{fontSize:</span> <span class="hljs-attr">100</span>, <span class="hljs-attr">flex:</span> <span class="hljs-attr">1</span>, <span class="hljs-attr">textAlign:</span> '<span class="hljs-attr">center</span>'}}&gt;</span>
👍
<span class="hljs-tag">&lt;/<span class="hljs-name">Text</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">View</span>&gt;</span></span>
);
}
}
AppRegistry.registerComponent(<span class="hljs-string">'ScratchPad'</span>, () =&gt; ScratchPad);
</code></pre><iframe style="margin-top: 4" width="100%" height="420" data-src="//cdn.rawgit.com/dabbott/react-native-web-player/gh-v1.10.0/index.html#code=import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20AppRegistry%2C%20Text%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aclass%20ScratchPad%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CView%20style%3D%7B%7Bflex%3A%201%7D%7D%3E%0A%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A%2030%2C%20flex%3A%201%2C%20textAlign%3A%20'center'%7D%7D%3E%0A%20%20%20%20%20%20%20%20%20%20Isn't%20this%20cool%3F%0A%20%20%20%20%20%20%20%20%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3CText%20style%3D%7B%7BfontSize%3A%20100%2C%20flex%3A%201%2C%20textAlign%3A%20'center'%7D%7D%3E%0A%20%20%20%20%20%20%20%20%20%20%F0%9F%91%8D%0A%20%20%20%20%20%20%20%20%3C%2FText%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0AAppRegistry.registerComponent('ScratchPad'%2C%20()%20%3D%3E%20ScratchPad)%3B%0A" frame-border="0"></iframe></div>
<p>We think these inline examples, using the <a href="https://github.com/dabbott/react-native-web-player"><code>react-native-web-player</code></a> module with help from <a href="https://twitter.com/devinaabbott">Devin Abbott</a>, are a great way to learn the basics of React Native, and we have updated our <a href="/react-native/tutorial.md">tutorial for new React Native developers</a> to use these wherever possible. Check it out - if you have ever been curious to see what would happen if you modified just one little bit of sample code, this is a really nice way to poke around. Also, if you're building developer tools and you want to show a live React Native sample on your own site, <a href="https://github.com/dabbott/react-native-web-player"><code>react-native-web-player</code></a> can make that straightforward.</p>
<p>The core simulation engine is provided by <a href="https://twitter.com/necolas">Nicolas Gallagher</a>'s <a href="https://github.com/necolas/react-native-web"><code>react-native-web</code></a> project, which provides a way to display React Native components like <code>Text</code> and <code>View</code> on the web. Check out <a href="https://github.com/necolas/react-native-web"><code>react-native-web</code></a> if you're interested in building mobile and web experiences that share a large chunk of the codebase.</p>
<h2><a class="anchor" aria-hidden="true" id="better-guides"></a><a href="#better-guides" 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>Better Guides</h2>
<p>In some parts of React Native, there are multiple ways to do things, and we've heard feedback that we could provide better guidance.</p>
<p>We have a new <a href="/react-native/navigator-comparison.md">guide to Navigation</a> that compares the different approaches and advises on what you should use - <code>Navigator</code>, <code>NavigatorIOS</code>, <code>NavigationExperimental</code>. In the medium term, we're working towards improving and consolidating those interfaces. In the short term, we hope that a better guide will make your life easier.</p>
<p>We also have a new <a href="/react-native/handling-touches.md">guide to handling touches</a> that explains some of the basics of making button-like interfaces, and a brief summary of the different ways to handle touch events.</p>
<p>Another area we worked on is Flexbox. This includes tutorials on how to <a href="/react-native/flexbox.md">handle layout with Flexbox</a> and how to control <a href="/react-native/height-and-width.md">the size of components</a>. It also includes an unsexy but hopefully-useful <a href="/react-native/layout-props.md">list of all the props that control layout in React Native</a>.</p>
<h2><a class="anchor" aria-hidden="true" id="getting-started"></a><a href="#getting-started" 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>Getting Started</h2>
<p>When you start getting a React Native development environment set up on your machine, you do have to do a bunch of installing and configuring things. It's hard to make installation a really fun and exciting experience, but we can at least make it as quick and painless as possible.</p>
<p>We built a <a href="/react-native/releases/next/getting-started.md">new Getting Started workflow</a> that lets you select your development operating system and your mobile operating system up front, to provide one concise place with all the setup instructions. We also went through the installation process to make sure everything worked and to make sure that every decision point had a clear recommendation. After testing it out on our innocent coworkers, we're pretty sure this is an improvement.</p>
<p>We also worked on the <a href="/react-native/integration-with-existing-apps.md">guide to integrating React Native into an existing app</a>. Many of the largest apps that use React Native, like the Facebook app itself, actually build part of the app in React Native, and part of it using regular development tools. We hope this guide makes it easier for more people to build apps this way.</p>
<h2><a class="anchor" aria-hidden="true" id="we-need-your-help"></a><a href="#we-need-your-help" 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>We Need Your Help</h2>
<p>Your feedback lets us know what we should prioritize. I know some people will read this blog post and think &quot;Better docs? Pffft. The documentation for X is still garbage!&quot;. That's great - we need that energy. The best way to give us feedback depends on the sort of feedback.</p>
<p>If you find a mistake in the documentation, like inaccurate descriptions or code that doesn't actually work, <a href="https://github.com/facebook/react-native/issues">file an issue</a>. Tag it with &quot;Documentation&quot;, so that it's easier to route it to the right people.</p>
<p>If there isn't a specific mistake, but something in the documentation is fundamentally confusing, it's not a great fit for a GitHub issue. Instead, post on <a href="https://react-native.canny.io/feature-requests">Canny</a> about the area of the docs that could use help. This helps us prioritize when we are doing more general work like guide-writing.</p>
<p>Thanks for reading this far, and thanks for using React Native!</p>
</span></div></article></div><div class="post"><header class="postHeader"><h1 class="postHeaderTitle"><a href="/react-native/blog/2016/04/13/react-native-a-year-in-review">React Native: A year in review</a></h1><p class="post-meta">April 13, 2016</p><div class="authorBlock"><p class="post-authorName"><a href="https://github.com/mkonicek" target="_blank" rel="noreferrer noopener">Martin Konicek</a>Software Engineer at Facebook</p><div class="authorPhoto authorPhotoBig"><a href="https://github.com/mkonicek" target="_blank" rel="noreferrer noopener"><img src="https://avatars1.githubusercontent.com/u/346214?v=3&amp;s=460" alt="Martin Konicek"/></a></div></div></header><article class="post-content"><div><span><p>It's been one year since we open-sourced React Native. What started as an idea with a handful of engineers is now a framework being used by product teams across Facebook and beyond. Today at F8 we announced that Microsoft is bringing <a href="http://microsoft.github.io/code-push/articles/ReactNativeWindows.html">React Native to the Windows ecosystem</a>, giving developers the potential to build React Native on Windows PC, Phone, and Xbox. It will also provide open source tools and services such as a React Native extension for Visual Studio Code and CodePush to help developers create React Native apps on the Windows platform. In addition, <a href="https://www.tizen.org/blogs">Samsung</a> is building React Native for its hybrid platform, which will empower developers to build apps for millions of SmartTVs and mobile and wearable devices. We also released the <a href="https://github.com/facebook/react-native-fbsdk">Facebook SDK for React Native</a>, which makes it easier for developers to incorporate Facebook social features like Login, Sharing, App Analytics, and Graph APIs into their apps. In one year, React Native has changed the way developers build on every major platform.</p>
<p>It's been an epic ride — but we are only getting started. Here is a look back at how React Native has grown and evolved since we open-sourced it a year ago, some challenges we faced along the way, and what we expect as we look ahead to the future.</p>
<footer>
<a href="https://code.facebook.com/posts/597378980427792/react-native-a-year-in-review/" class="btn">Read more</a>
</footer>
<blockquote>
<p>This is an excerpt. Read the rest of the post on <a href="https://code.facebook.com/posts/597378980427792/react-native-a-year-in-review/">Facebook Code</a>.</p>
</blockquote>
</span></div></article></div><div class="post"><header class="postHeader"><h1 class="postHeaderTitle"><a href="/react-native/blog/2016/03/28/dive-into-react-native-performance">Dive into React Native Performance</a></h1><p class="post-meta">March 28, 2016</p><div class="authorBlock"><p class="post-authorName"><a href="https://github.com/javache" target="_blank" rel="noreferrer noopener">Pieter De Baets</a>Software Engineer at Facebook</p><div class="authorPhoto authorPhotoBig"><a href="https://github.com/javache" target="_blank" rel="noreferrer noopener"><img src="https://avatars1.githubusercontent.com/u/5676?v=3&amp;s=460" alt="Pieter De Baets"/></a></div></div></header><article class="post-content"><div><span><p>React Native allows you to build iOS and Android apps in JavaScript using React and Relay's declarative programming model. This leads to more concise, easier-to-understand code; fast iteration without a compile cycle; and easy sharing of code across multiple platforms. You can ship faster and focus on details that really matter, making your app look and feel fantastic. Optimizing performance is a big part of this. Here is the story of how we made React Native app startup twice as fast.</p>
<h2><a class="anchor" aria-hidden="true" id="why-the-hurry"></a><a href="#why-the-hurry" 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>Why the hurry?</h2>
<p>With an app that runs faster, content loads quickly, which means people get more time to interact with it, and smooth animations make the app enjoyable to use. In emerging markets, where <a href="https://code.facebook.com/posts/952628711437136/classes-performance-and-network-segmentation-on-android/">2011 class phones</a> on <a href="https://newsroom.fb.com/news/2015/10/news-feed-fyi-building-for-all-connectivity/">2G networks</a> are the majority, a focus on performance can make the difference between an app that is usable and one that isn't.</p>
<p>Since releasing React Native on <a href="https://facebook.github.io/react/blog/2015/03/26/introducing-react-native.html">iOS</a> and on <a href="https://code.facebook.com/posts/1189117404435352/react-native-for-android-how-we-built-the-first-cross-platform-react-native-app/">Android</a>, we have been improving list view scrolling performance, memory efficiency, UI responsiveness, and app startup time. Startup sets the first impression of an app and stresses all parts of the framework, so it is the most rewarding and challenging problem to tackle.</p>
<footer>
<a href="https://code.facebook.com/posts/895897210527114/dive-into-react-native-performance/" class="btn">Read more</a>
</footer>
<blockquote>
<p>This is an excerpt. Read the rest of the post on <a href="https://code.facebook.com/posts/895897210527114/dive-into-react-native-performance/">Facebook Code</a>.</p>
</blockquote>
</span></div></article></div><div class="post"><header class="postHeader"><h1 class="postHeaderTitle"><a href="/react-native/blog/2016/03/24/introducing-hot-reloading">Introducing Hot Reloading</a></h1><p class="post-meta">March 24, 2016</p><div class="authorBlock"><p class="post-authorName"><a href="https://twitter.com/martinbigio" target="_blank" rel="noreferrer noopener">Martín Bigio</a>Software Engineer at Instagram</p><div class="authorPhoto authorPhotoBig"><a href="https://twitter.com/martinbigio" target="_blank" rel="noreferrer noopener"><img src="https://avatars3.githubusercontent.com/u/535661?v=3&amp;s=128" alt="Martín Bigio"/></a></div></div></header><article class="post-content"><div><span><p>React Native's goal is to give you the best possible developer experience. A big part of it is the time it takes between you save a file and be able to see the changes. Our goal is to get this feedback loop to be under 1 second, even as your app grows.</p>
<p>We got close to this ideal via three main features:</p>
<ul>
<li>Use JavaScript as the language doesn't have a long compilation cycle time.</li>
<li>Implement a tool called Packager that transforms es6/flow/jsx files into normal JavaScript that the VM can understand. It was designed as a server that keeps intermediate state in memory to enable fast incremental changes and uses multiple cores.</li>
<li>Build a feature called Live Reload that reloads the app on save.</li>
</ul>
<p>At this point, the bottleneck for developers is no longer the time it takes to reload the app but losing the state of your app. A common scenario is to work on a feature that is multiple screens away from the launch screen. Every time you reload, you've got to click on the same path again and again to get back to your feature, making the cycle multiple-seconds long.</p>
<h2><a class="anchor" aria-hidden="true" id="hot-reloading"></a><a href="#hot-reloading" 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>Hot Reloading</h2>
<p>The idea behind hot reloading is to keep the app running and to inject new versions of the files that you edited at runtime. This way, you don't lose any of your state which is especially useful if you are tweaking the UI.</p>
<p>A video is worth a thousand words. Check out the difference between Live Reload (current) and Hot Reload (new).</p>
<iframe width="100%" height="315" src="https://www.youtube.com/embed/2uQzVi-KFuc" frameborder="0" allowfullscreen></iframe>
<p>If you look closely, you can notice that it is possible to recover from a red box and you can also start importing modules that were not previously there without having to do a full reload.</p>
<p><strong>Word of warning:</strong> because JavaScript is a very stateful language, hot reloading cannot be perfectly implemented. In practice, we found out that the current setup is working well for a large amount of usual use cases and a full reload is always available in case something gets messed up.</p>
<p>Hot reloading is available as of 0.22, you can enable it:</p>
<ul>
<li>Open the developer menu</li>
<li>Tap on &quot;Enable Hot Reloading&quot;</li>
</ul>
<h2><a class="anchor" aria-hidden="true" id="implementation-in-a-nutshell"></a><a href="#implementation-in-a-nutshell" 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>Implementation in a nutshell</h2>
<p>Now that we've seen why we want it and how to use it, the fun part begins: how it actually works.</p>
<p>Hot Reloading is built on top of a feature <a href="https://webpack.github.io/hot-module-replacement-with-webpack.md">Hot Module Replacement</a>, or HMR. It was first introduced by Webpack and we implemented it inside of React Native Packager. HMR makes the Packager watch for file changes and send HMR updates to a thin HMR runtime included on the app.</p>
<p>In a nutshell, the HMR update contains the new code of the JS modules that changed. When the runtime receives them, it replaces the old modules' code with the new one:</p>
<p><img src="/react-native/blog/assets/hmr-architecture.png" alt=""></p>
<p>The HMR update contains a bit more than just the module's code we want to change because replacing it, it's not enough for the runtime to pick up the changes. The problem is that the module system may have already cached the <em>exports</em> of the module we want to update. For instance, say you have an app composed of these two modules:</p>
<pre><code class="hljs"><span class="hljs-comment">// log.js</span>
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">log</span>(<span class="hljs-params">message</span>) </span>{
<span class="hljs-keyword">const</span> time = <span class="hljs-built_in">require</span>(<span class="hljs-string">'./time'</span>);
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">`[<span class="hljs-subst">${time()}</span>] <span class="hljs-subst">${message}</span>`</span>);
}
<span class="hljs-built_in">module</span>.exports = log;
</code></pre>
<pre><code class="hljs"><span class="hljs-comment">// time.js</span>
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">time</span>(<span class="hljs-params"></span>) </span>{
<span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>().getTime();
}
<span class="hljs-built_in">module</span>.exports = time;
</code></pre>
<p>The module <code>log</code>, prints out the provided message including the current date provided by the module <code>time</code>.</p>
<p>When the app is bundled, React Native registers each module on the module system using the <code>__d</code> function. For this app, among many <code>__d</code> definitions, there will one for <code>log</code>:</p>
<pre><code class="hljs">__d(<span class="hljs-string">'log'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
... <span class="hljs-comment">// module's code</span>
});
</code></pre>
<p>This invocation wraps each module's code into an anonymous function which we generally refer to as the factory function. The module system runtime keeps track of each module's factory function, whether it has already been executed, and the result of such execution (exports). When a module is required, the module system either provides the already cached exports or executes the module's factory function for the first time and saves the result.</p>
<p>So say you start your app and require <code>log</code>. At this point, neither <code>log</code> nor <code>time</code>'s factory functions have been executed so no exports have been cached. Then, the user modifies <code>time</code> to return the date in <code>MM/DD</code>:</p>
<pre><code class="hljs"><span class="hljs-comment">// time.js</span>
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">bar</span>(<span class="hljs-params"></span>) </span>{
<span class="hljs-keyword">var</span> <span class="hljs-built_in">date</span> = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>();
<span class="hljs-keyword">return</span> <span class="hljs-string">`<span class="hljs-subst">${date.getMonth() + 1}</span>/<span class="hljs-subst">${date.getDate()}</span>`</span>;
}
<span class="hljs-built_in">module</span>.exports = bar;
</code></pre>
<p>The Packager will send time's new code to the runtime (step 1), and when <code>log</code> gets eventually required the exported function gets executed it will do so with <code>time</code>'s changes (step 2):</p>
<p><img src="/react-native/blog/assets/hmr-step.png" alt=""></p>
<p>Now say the code of <code>log</code> requires <code>time</code> as a top level require:</p>
<pre><code class="hljs"><span class="hljs-keyword">const</span> time = <span class="hljs-built_in">require</span>(<span class="hljs-string">'./time'</span>); <span class="hljs-comment">// top level require</span>
<span class="hljs-comment">// log.js</span>
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">log</span>(<span class="hljs-params">message</span>) </span>{
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">`[<span class="hljs-subst">${time()}</span>] <span class="hljs-subst">${message}</span>`</span>);
}
<span class="hljs-built_in">module</span>.exports = log;
</code></pre>
<p>When <code>log</code> is required, the runtime will cache its exports and <code>time</code>'s one. (step 1). Then, when <code>time</code> is modified, the HMR process cannot simply finish after replacing <code>time</code>'s code. If it did, when <code>log</code> gets executed, it would do so with a cached copy of <code>time</code> (old code).</p>
<p>For <code>log</code> to pick up <code>time</code> changes, we'll need to clear its cached exports because one of the modules it depends on was hot swapped (step 3). Finally, when <code>log</code> gets required again, its factory function will get executed requiring <code>time</code> and getting its new code.</p>
<p><img src="/react-native/blog/assets/hmr-log.png" alt=""></p>
<h2><a class="anchor" aria-hidden="true" id="hmr-api"></a><a href="#hmr-api" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>HMR API</h2>
<p>HMR in React Native extends the module system by introducing the <code>hot</code> object. This API is based on <a href="https://webpack.github.io/hot-module-replacement.md">Webpack</a>'s one. The <code>hot</code> object exposes a function called <code>accept</code> which allows you to define a callback that will be executed when the module needs to be hot swapped. For instance, if we would change <code>time</code>'s code as follows, every time we save time, we'll see “time changed” in the console:</p>
<pre><code class="hljs"><span class="hljs-comment">// time.js</span>
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">time</span>(<span class="hljs-params"></span>) </span>{
... <span class="hljs-comment">// new code</span>
}
<span class="hljs-built_in">module</span>.hot.accept(<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">'time changed'</span>);
});
<span class="hljs-built_in">module</span>.exports = time;
</code></pre>
<p>Note that only in rare cases you would need to use this API manually. Hot Reloading should work out of the box for the most common use cases.</p>
<h2><a class="anchor" aria-hidden="true" id="hmr-runtime"></a><a href="#hmr-runtime" 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>HMR Runtime</h2>
<p>As we've seen before, sometimes it's not enough only accepting the HMR update because a module that uses the one being hot swapped may have been already executed and its imports cached. For instance, suppose the dependency tree for the movies app example had a top-level <code>MovieRouter</code> that depended on the <code>MovieSearch</code> and <code>MovieScreen</code> views, which depended on the <code>log</code> and <code>time</code> modules from the previous examples:</p>
<p><img src="/react-native/blog/assets/hmr-diamond.png" alt=""></p>
<p>If the user accesses the movies' search view but not the other one, all the modules except for <code>MovieScreen</code> would have cached exports. If a change is made to module <code>time</code>, the runtime will have to clear the exports of <code>log</code> for it to pick up <code>time</code>'s changes. The process wouldn't finish there: the runtime will repeat this process recursively up until all the parents have been accepted. So, it'll grab the modules that depend on <code>log</code> and try to accept them. For <code>MovieScreen</code> it can bail, as it hasn't been required yet. For <code>MovieSearch</code>, it will have to clear its exports and process its parents recursively. Finally, it will do the same thing for <code>MovieRouter</code> and finish there as no modules depends on it.</p>
<p>In order to walk the dependency tree, the runtime receives the inverse dependency tree from the Packager on the HMR update. For this example the runtime will receive a JSON object like this one:</p>
<pre><code class="hljs">{
<span class="hljs-attribute">modules</span>: [
{
<span class="hljs-attribute">name</span>: <span class="hljs-string">'time'</span>,
<span class="hljs-attribute">code</span>: <span class="hljs-comment">/* time's new code */</span>
}
],
<span class="hljs-attribute">inverseDependencies</span>: {
<span class="hljs-attribute">MovieRouter</span>: [],
<span class="hljs-attribute">MovieScreen</span>: [<span class="hljs-string">'MovieRouter'</span>],
<span class="hljs-attribute">MovieSearch</span>: [<span class="hljs-string">'MovieRouter'</span>],
<span class="hljs-attribute">log</span>: [<span class="hljs-string">'MovieScreen'</span>, <span class="hljs-string">'MovieSearch'</span>],
<span class="hljs-attribute">time</span>: [<span class="hljs-string">'log'</span>],
}
}
</code></pre>
<h2><a class="anchor" aria-hidden="true" id="react-components"></a><a href="#react-components" 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>React Components</h2>
<p>React components are a bit harder to get to work with Hot Reloading. The problem is that we can't simply replace the old code with the new one as we'd loose the component's state. For React web applications, <a href="https://twitter.com/dan_abramov">Dan Abramov</a> implemented a babel <a href="http://gaearon.github.io/react-hot-loader/">transform</a> that uses Webpack's HMR API to solve this issue. In a nutshell, his solution works by creating a proxy for every single React component on <em>transform time</em>. The proxies hold the component's state and delegate the lifecycle methods to the actual components, which are the ones we hot reload:</p>
<p><img src="/react-native/blog/assets/hmr-proxy.png" alt=""></p>
<p>Besides creating the proxy component, the transform also defines the <code>accept</code> function with a piece of code to force React to re-render the component. This way, we can hot reload rendering code without losing any of the app's state.</p>
<p>The default <a href="https://github.com/facebook/react-native/blob/master/packager/transformer.js#L92-L95">transformer</a> that comes with React Native uses the <code>babel-preset-react-native</code>, which is <a href="https://github.com/facebook/react-native/blob/master/babel-preset/configs/hmr.js#L24-L31">configured</a> to use <code>react-transform</code> the same way you'd use it on a React web project that uses Webpack.</p>
<h2><a class="anchor" aria-hidden="true" id="redux-stores"></a><a href="#redux-stores" 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>Redux Stores</h2>
<p>To enable Hot Reloading on <a href="http://redux.js.org/">Redux</a> stores you will just need to use the HMR API similarly to what you'd do on a web project that uses Webpack:</p>
<pre><code class="hljs"><span class="hljs-comment">// configureStore.js</span>
<span class="hljs-keyword">import</span> { createStore, applyMiddleware, compose } <span class="hljs-keyword">from</span> <span class="hljs-string">'redux'</span>;
<span class="hljs-keyword">import</span> thunk <span class="hljs-keyword">from</span> <span class="hljs-string">'redux-thunk'</span>;
<span class="hljs-keyword">import</span> reducer <span class="hljs-keyword">from</span> <span class="hljs-string">'../reducers'</span>;
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">configureStore</span>(<span class="hljs-params">initialState</span>) </span>{
<span class="hljs-keyword">const</span> store = createStore(
reducer,
initialState,
applyMiddleware(thunk),
);
<span class="hljs-keyword">if</span> (<span class="hljs-built_in">module</span>.hot) {
<span class="hljs-built_in">module</span>.hot.accept(<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
<span class="hljs-keyword">const</span> nextRootReducer = <span class="hljs-built_in">require</span>(<span class="hljs-string">'../reducers/index'</span>).default;
store.replaceReducer(nextRootReducer);
});
}
<span class="hljs-keyword">return</span> store;
};
</code></pre>
<p>When you change a reducer, the code to accept that reducer will be sent to the client. Then the client will realize that the reducer doesn't know how to accept itself, so it will look for all the modules that refer it and try to accept them. Eventually, the flow will get to the single store, the <code>configureStore</code> module, which will accept the HMR update.</p>
<h2><a class="anchor" aria-hidden="true" id="conclusion"></a><a href="#conclusion" 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>Conclusion</h2>
<p>If you are interested in helping making hot reloading better, I encourage you to read <a href="https://medium.com/@dan_abramov/hot-reloading-in-react-1140438583bf#.jmivpvmz4">Dan Abramov's post around the future of hot reloading</a> and to contribute. For example, Johny Days is going to <a href="https://github.com/facebook/react-native/pull/6179">make it work with multiple connected clients</a>. We're relying on you all to maintain and improve this feature.</p>
<p>With React Native, we have the opportunity to rethink the way we build apps in order to make it a great developer experience. Hot reloading is only one piece of the puzzle, what other crazy hacks can we do to make it better?</p>
</span></div></article></div><div class="post"><header class="postHeader"><h1 class="postHeaderTitle"><a href="/react-native/blog/2015/11/23/making-react-native-apps-accessible">Making React Native apps accessible</a></h1><p class="post-meta">November 23, 2015</p><div class="authorBlock"><p class="post-authorName"><a href="https://www.facebook.com/georgiy.kassabli" target="_blank" rel="noreferrer noopener">Georgiy Kassabli</a>Software Engineer at Facebook</p><div class="authorPhoto authorPhotoBig"><a href="https://www.facebook.com/georgiy.kassabli" target="_blank" rel="noreferrer noopener"><img src="https://scontent-sea1-1.xx.fbcdn.net/v/t1.0-1/c0.0.160.160/p160x160/1978838_795592927136196_1205041943_n.jpg?_nc_log=1&amp;oh=d7a500fdece1250955a4d27b0a80fee2&amp;oe=59E8165A" alt="Georgiy Kassabli"/></a></div></div></header><article class="post-content"><div><span><p>With the recent launch of React on web and React Native on mobile, we've provided a new front-end framework for developers to build products. One key aspect of building a robust product is ensuring that anyone can use it, including people who have vision loss or other disabilities. The Accessibility API for React and React Native enables you to make any React-powered experience usable by someone who may use assistive technology, like a screen reader for the blind and visually impaired.</p>
<p>For this post, we're going to focus on React Native apps. We've designed the React Accessibility API to look and feel similar to the iOS and Android APIs. If you've developed accessible applications for the web, iOS, or Android before, you should feel comfortable with the framework and nomenclature of the React AX API. For instance, you can make a UI element <em>accessible</em> (therefore exposed to assistive technology) and use <em>accessibilityLabel</em> to provide a string description for the element:</p>
<pre><code class="hljs">&lt;View accessible={<span class="hljs-literal">true</span>} <span class="hljs-attribute">accessibilityLabel</span>=”This is<span class="hljs-built_in"> simple </span>view”&gt;
</code></pre>
<p>Let's walk through a slightly more involved application of the React AX API by looking at one of Facebook's own React-powered products: the <strong>Ads Manager app</strong>.</p>
<footer>
<a href="https://code.facebook.com/posts/435862739941212/making-react-native-apps-accessible/" class="btn">Read more</a>
</footer>
<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 class="postHeaderTitle"><a href="/react-native/blog/2015/09/14/react-native-for-android">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 authorPhotoBig"><a href="https://www.facebook.com/drwitte" target="_blank" rel="noreferrer noopener"><img src="https://graph.facebook.com/210064/picture/?height=200&amp;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>
</footer>
<blockquote>
<p>This is an excerpt. Read the rest of the post on <a href="https://code.facebook.com/posts/1189117404435352/react-native-for-android-how-we-built-the-first-cross-platform-react-native-app/">Facebook Code</a>.</p>
</blockquote>
</span></div></article></div><div class="post"><header class="postHeader"><h1 class="postHeaderTitle"><a href="/react-native/blog/2015/03/26/react-native-bringing-modern-web-techniques-to-mobile">React Native: Bringing modern web techniques to mobile</a></h1><p class="post-meta">March 26, 2015</p><div class="authorBlock"><p class="post-authorName"><a href="https://github.com/tomocchino" target="_blank" rel="noreferrer noopener">Tom Occhino</a>Engineering Manager at Facebook</p><div class="authorPhoto authorPhotoBig"><a href="https://github.com/tomocchino" target="_blank" rel="noreferrer noopener"><img src="https://avatars0.githubusercontent.com/u/13947?v=3&amp;s=460" alt="Tom Occhino"/></a></div></div></header><article class="post-content"><div><span><p>We introduced <a href="https://code.facebook.com/projects/176988925806765/react/">React</a> to the world two years ago, and since then it's seen impressive growth, both inside and outside of Facebook. Today, even though no one is forced to use it, new web projects at Facebook are commonly built using React in one form or another, and it's being broadly adopted across the industry. Engineers are choosing to use React every day because it enables them to spend more time focusing on their products and less time fighting with their framework. It wasn't until we'd been building with React for a while, though, that we started to understand what makes it so powerful.</p>
<p>React forces us to break our applications down into discrete components, each representing a single view. These components make it easier to iterate on our products, since we don't need to keep the entire system in our head in order to make changes to one part of it. More important, though, React wraps the DOM's mutative, imperative API with a declarative one, which raises the level of abstraction and simplifies the programming model. What we've found is that when we build with React, our code is a lot more predictable. This predictability makes it so we can iterate more quickly with confidence, and our applications are a lot more reliable as a result. Additionally, it's not only easier to scale our applications when they're built with React, but we've found it's also easier to scale the size of our teams themselves.</p>
<p>Together with the rapid iteration cycle of the web, we've been able to build some awesome products with React, including many components of Facebook.com. Additionally, we've built amazing frameworks in JavaScript on top of React, like <a href="https://facebook.github.io/react/blog/2015/02/20/introducing-relay-and-graphql.html">Relay</a>, which allows us to greatly simplify our data fetching at scale. Of course, web is only part of the story. Facebook also has widely used Android and iOS apps, which are built on top of disjointed, proprietary technology stacks. Having to build our apps on top of multiple platforms has bifurcated our engineering organization, but that's only one of the things that makes native mobile application development hard.</p>
<footer>
<a href="https://code.facebook.com/posts/1014532261909640/react-native-bringing-modern-web-techniques-to-mobile/" class="btn">Read more</a>
</footer>
<blockquote>
<p>This is an excerpt. Read the rest of the post on <a href="https://code.facebook.com/posts/1014532261909640/react-native-bringing-modern-web-techniques-to-mobile/">Facebook Code</a>.</p>
</blockquote>
</span></div></article></div><div class="docs-prevnext"><a class="docs-prev" href="/react-native/blog/page3/">← Prev</a></div></div></div></div></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/react-native/" class="nav-home"><img src="/react-native/img/header_logo.png" alt="React Native" width="66" height="58"/></a><div><h5><a href="/react-native/docs/getting-started.html">Docs</a></h5><a href="/react-native/docs/getting-started.html">Getting Started</a><a href="/react-native/docs/tutorial.html">Tutorial</a><a href="/react-native/docs/components-and-apis.html">Components and APIs</a><a href="/react-native/docs/more-resources.html">More Resources</a></div><div><h5>Community</h5><a href="/react-native/help.html">The React Native Community</a><a href="/react-native/showcase.html">Who&#x27;s using React Native?</a><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a></div><div><h5>More Resources</h5><a href="/react-native/blog/">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/react-native/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2019 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
</script><script>window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));</script><script>
document.addEventListener('keyup', function(e) {
if (e.target !== document.body) {
return;
}
// keyCode for '/' (slash)
if (e.keyCode === 191) {
const search = document.getElementById('search_input_react');
search && search.focus();
}
});
</script><script>
var search = docsearch({
apiKey: '2c98749b4a1e588efec53b2acec13025',
indexName: 'react-native-versions',
inputSelector: '#search_input_react',
algoliaOptions: {"facetFilters":["tags:0.60-RC"],"hitsPerPage":5}
});
</script></body></html>
Reference in New Issue View Git Blame Copy Permalink