mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Updated docs for next
This commit is contained in:
Website Deployment Script
@@ -1,12 +1,9 @@
|
||||
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>Right-to-Left Layout Support For React Native Apps – React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="Right-to-Left Layout Support For React Native Apps – React Native | A framework for building native apps using React"><meta property="og:type" content="website"><meta property="og:url" content="http://facebook.github.io/react-native/index.html"><meta property="og:image" content="http://facebook.github.io/react-native/img/opengraph.png?2"><meta property="og:description" content="A framework for building native apps using React"><base href="/react-native/releases/next/"><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"><link rel="shortcut icon" href="img/favicon.png?2"><link rel="stylesheet" href="css/react-native.css"><script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script><script type="text/javascript">try{Typekit.load();}catch(e){}</script></head><body><div class="container"><div class="nav-main"><div class="wrap"><a class="nav-home" href=""><img src="img/header_logo.png">React Native</a><a class="nav-version" href="/react-native/versions.html">next</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="docs/getting-started.html" class="" data-target=".nav-docs">Docs</a></li><li><a href="support.html" class="">Support</a></li><li><a href="showcase.html" class="">Showcase</a></li><li><a href="blog/" class="active">Blog</a></li></ul><div class="algolia-search-wrapper"><input id="algolia-doc-search" tabindex="0" type="text" placeholder="Search docs..."></div><ul class="nav-site nav-site-external"><li><a href="https://github.com/facebook/react-native" class="">GitHub</a></li><li><a href="http://facebook.github.io/react" class="">React</a></li></ul></div></div></div><section class="content wrap documentationContent"><div class="nav-docs"><div class="nav-docs-section"><h3>Recent Posts</h3><ul><li><a class="active" href="/react-native/blog/2016/08/19/right-to-left-support-for-react-native-apps.html">Right-to-Left Layout Support For React Native Apps</a></li><li><a class="" href="/react-native/blog/2016/08/12/react-native-meetup-san-francisco.html">San Francisco Meetup Recap</a></li><li><a class="" href="/react-native/blog/2016/07/06/toward-better-documentation.html">Toward Better Documentation</a></li><li><a class="" href="/react-native/blog/2016/03/24/introducing-hot-reloading.html">Introducing Hot Reloading</a></li></ul></div></div><div class="inner-content"><div class="article"><h1>Right-to-Left Layout Support For React Native Apps</h1><p class="meta">August 19, 2016 by <a href="https://github.com/MengjueW" target="_blank">Mengjue (Mandy) Wang</a></p><hr><div><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 RTL support 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" target="_blank">react-native</a> master branch today, and will be available in the next RC: <a href="https://github.com/facebook/react-native/releases" target="_blank"><code>v0.33.0-rc</code></a>.</p><p>This involved changing <a href="https://github.com/facebook/css-layout" target="_blank">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" target="_blank">iOS</a> and <a href="https://play.google.com/store/apps/details?id=com.facebook.adsmanager" target="_blank">Android</a>. Here is how it looks like in those RTL languages:</p><span><p align="center">
|
||||
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>Right-to-Left Layout Support For React Native Apps – React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="Right-to-Left Layout Support For React Native Apps – React Native | A framework for building native apps using React"><meta property="og:type" content="website"><meta property="og:url" content="http://facebook.github.io/react-native/index.html"><meta property="og:image" content="http://facebook.github.io/react-native/img/opengraph.png?2"><meta property="og:description" content="A framework for building native apps using React"><base href="/react-native/releases/next/"><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"><link rel="shortcut icon" href="img/favicon.png?2"><link rel="stylesheet" href="css/react-native.css"><script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script><script type="text/javascript">try{Typekit.load();}catch(e){}</script></head><body><div class="container"><div class="nav-main"><div class="wrap"><a class="nav-home" href=""><img src="img/header_logo.png">React Native</a><a class="nav-version" href="/react-native/versions.html">next</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="docs/getting-started.html" class="" data-target=".nav-docs">Docs</a></li><li><a href="support.html" class="">Support</a></li><li><a href="showcase.html" class="">Showcase</a></li><li><a href="blog/" class="active">Blog</a></li></ul><div class="algolia-search-wrapper"><input id="algolia-doc-search" tabindex="0" type="text" placeholder="Search docs..."></div><ul class="nav-site nav-site-external"><li><a href="https://github.com/facebook/react-native" class="">GitHub</a></li><li><a href="http://facebook.github.io/react" class="">React</a></li></ul></div></div></div><section class="content wrap documentationContent"><div class="nav-docs"><div class="nav-docs-section"><h3>Recent Posts</h3><ul><li><a class="active" href="/react-native/blog/2016/08/19/right-to-left-support-for-react-native-apps.html">Right-to-Left Layout Support For React Native Apps</a></li><li><a class="" href="/react-native/blog/2016/08/12/react-native-meetup-san-francisco.html">San Francisco Meetup Recap</a></li><li><a class="" href="/react-native/blog/2016/07/06/toward-better-documentation.html">Toward Better Documentation</a></li><li><a class="" href="/react-native/blog/2016/03/24/introducing-hot-reloading.html">Introducing Hot Reloading</a></li></ul></div></div><div class="inner-content"><div class="article"><h1>Right-to-Left Layout Support For React Native Apps</h1><p class="meta">August 19, 2016 by <a href="https://github.com/MengjueW" target="_blank">Mengjue (Mandy) Wang</a></p><hr><div><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" target="_blank">react-native</a> master branch today, and will be available in the next RC: <a href="https://github.com/facebook/react-native/releases" target="_blank"><code>v0.33.0-rc</code></a>.</p><p>This involved changing <a href="https://github.com/facebook/css-layout" target="_blank">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" target="_blank">iOS</a> and <a href="https://play.google.com/store/apps/details?id=com.facebook.adsmanager" target="_blank">Android</a>. Here is how it looks like in those RTL languages:</p><span><p align="center">
|
||||
<img src="/react-native/blog/img/rtl-ama-ios-arabic.png" width="280" style="margin:10px">
|
||||
<img src="/react-native/blog/img/rtl-ama-android-hebrew.png" width="280" style="margin:10px">
|
||||
</p>
|
||||
|
||||
</span><h2><a class="anchor" name="overview-changes-in-rn-for-rtl-support"></a>Overview Changes in RN for RTL support <a class="hash-link" href="#overview-changes-in-rn-for-rtl-support">#</a></h2><p><a href="https://github.com/facebook/css-layout" target="_blank">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" target="_blank">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/img/rtl-rn-core-updates.png" alt=""></p><p>These include:
|
||||
<em> <a href="https://github.com/facebook/css-layout/commit/46c842c71a1232c3c78c4215275d104a389a9a0f" target="_blank">css-layout RTL support for absolute positioning</a>
|
||||
</em> mapping <code>left</code> and <code>right</code> to <code>start</code> and <code>end</code> in RN core implementation for shadow nodes
|
||||
* and exposing a <a href="https://github.com/facebook/react-native/blob/f0fb228ec76ed49e6ed6d786d888e8113b8959a2/Libraries/Utilities/I18nManager.js" target="_blank">bridged utility module</a> to help control the RTL layout</p><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" name="making-an-app-rtl-ready"></a>Making an App RTL-ready <a class="hash-link" href="#making-an-app-rtl-ready">#</a></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" target="_blank">iOS</a> and <a href="https://developer.android.com/training/basics/supporting-devices/languages.html" target="_blank">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><div class="prism language-javascript"><span class="token comment" spellcheck="true"> // in AppDelegate.m
|
||||
</span><h2><a class="anchor" name="overview-changes-in-rn-for-rtl-support"></a>Overview Changes in RN for RTL support <a class="hash-link" href="#overview-changes-in-rn-for-rtl-support">#</a></h2><p><a href="https://github.com/facebook/css-layout" target="_blank">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" target="_blank">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/img/rtl-rn-core-updates.png" alt=""></p><p>These include:</p><ul><li><a href="https://github.com/facebook/css-layout/commit/46c842c71a1232c3c78c4215275d104a389a9a0f" target="_blank">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" target="_blank">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" name="making-an-app-rtl-ready"></a>Making an App RTL-ready <a class="hash-link" href="#making-an-app-rtl-ready">#</a></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" target="_blank">iOS</a> and <a href="https://developer.android.com/training/basics/supporting-devices/languages.html" target="_blank">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><div class="prism language-javascript"><span class="token comment" spellcheck="true"> // in AppDelegate.m
|
||||
</span> <span class="token punctuation">[</span><span class="token punctuation">[</span>RCTI18nUtil sharedInstance<span class="token punctuation">]</span> allowRTL<span class="token punctuation">:</span>YES<span class="token punctuation">]</span><span class="token punctuation">;</span></div><p>Android:</p><div class="prism language-javascript"><span class="token comment" spellcheck="true"> // in MainActivity.java
|
||||
</span> I18nUtil sharedI18nUtilInstance <span class="token operator">=</span> I18nUtil<span class="token punctuation">.</span><span class="token function">getInstance<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
sharedI18nUtilInstance<span class="token punctuation">.</span><span class="token function">setAllowRTL<span class="token punctuation">(</span></span>context<span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div></li><li><p>For Android, you need add <code>android:supportsRtl="true"</code> to the <a href="http://developer.android.com/guide/topics/manifest/application-element.html" target="_blank"><code><application></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" name="writing-rtl-ready-components"></a>Writing RTL-ready Components <a class="hash-link" href="#writing-rtl-ready-components">#</a></h2><p>In general, most components are already RTL-ready, for example:</p><ul><li><p>Left-to-Right Layout</p><span><p align="left">
|
||||
|
||||
+2
-5
@@ -1,12 +1,9 @@
|
||||
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>Blog – React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="Blog – React Native | A framework for building native apps using React"><meta property="og:type" content="website"><meta property="og:url" content="http://facebook.github.io/react-native/index.html"><meta property="og:image" content="http://facebook.github.io/react-native/img/opengraph.png?2"><meta property="og:description" content="A framework for building native apps using React"><base href="/react-native/releases/next/"><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"><link rel="shortcut icon" href="img/favicon.png?2"><link rel="stylesheet" href="css/react-native.css"><script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script><script type="text/javascript">try{Typekit.load();}catch(e){}</script></head><body><div class="container"><div class="nav-main"><div class="wrap"><a class="nav-home" href=""><img src="img/header_logo.png">React Native</a><a class="nav-version" href="/react-native/versions.html">next</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="docs/getting-started.html" class="" data-target=".nav-docs">Docs</a></li><li><a href="support.html" class="">Support</a></li><li><a href="showcase.html" class="">Showcase</a></li><li><a href="blog/" class="active">Blog</a></li></ul><div class="algolia-search-wrapper"><input id="algolia-doc-search" tabindex="0" type="text" placeholder="Search docs..."></div><ul class="nav-site nav-site-external"><li><a href="https://github.com/facebook/react-native" class="">GitHub</a></li><li><a href="http://facebook.github.io/react" class="">React</a></li></ul></div></div></div><section class="content wrap documentationContent"><div class="nav-docs"><div class="nav-docs-section"><h3>Recent Posts</h3><ul><li><a class="" href="/react-native/blog/2016/08/19/right-to-left-support-for-react-native-apps.html">Right-to-Left Layout Support For React Native Apps</a></li><li><a class="" href="/react-native/blog/2016/08/12/react-native-meetup-san-francisco.html">San Francisco Meetup Recap</a></li><li><a class="" href="/react-native/blog/2016/07/06/toward-better-documentation.html">Toward Better Documentation</a></li><li><a class="" href="/react-native/blog/2016/03/24/introducing-hot-reloading.html">Introducing Hot Reloading</a></li></ul></div></div><div class="inner-content"><div class="article"><h1>Right-to-Left Layout Support For React Native Apps</h1><p class="meta">August 19, 2016 by <a href="https://github.com/MengjueW" target="_blank">Mengjue (Mandy) Wang</a></p><hr><div><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 RTL support 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" target="_blank">react-native</a> master branch today, and will be available in the next RC: <a href="https://github.com/facebook/react-native/releases" target="_blank"><code>v0.33.0-rc</code></a>.</p><p>This involved changing <a href="https://github.com/facebook/css-layout" target="_blank">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" target="_blank">iOS</a> and <a href="https://play.google.com/store/apps/details?id=com.facebook.adsmanager" target="_blank">Android</a>. Here is how it looks like in those RTL languages:</p><span><p align="center">
|
||||
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>Blog – React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="Blog – React Native | A framework for building native apps using React"><meta property="og:type" content="website"><meta property="og:url" content="http://facebook.github.io/react-native/index.html"><meta property="og:image" content="http://facebook.github.io/react-native/img/opengraph.png?2"><meta property="og:description" content="A framework for building native apps using React"><base href="/react-native/releases/next/"><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"><link rel="shortcut icon" href="img/favicon.png?2"><link rel="stylesheet" href="css/react-native.css"><script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script><script type="text/javascript">try{Typekit.load();}catch(e){}</script></head><body><div class="container"><div class="nav-main"><div class="wrap"><a class="nav-home" href=""><img src="img/header_logo.png">React Native</a><a class="nav-version" href="/react-native/versions.html">next</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="docs/getting-started.html" class="" data-target=".nav-docs">Docs</a></li><li><a href="support.html" class="">Support</a></li><li><a href="showcase.html" class="">Showcase</a></li><li><a href="blog/" class="active">Blog</a></li></ul><div class="algolia-search-wrapper"><input id="algolia-doc-search" tabindex="0" type="text" placeholder="Search docs..."></div><ul class="nav-site nav-site-external"><li><a href="https://github.com/facebook/react-native" class="">GitHub</a></li><li><a href="http://facebook.github.io/react" class="">React</a></li></ul></div></div></div><section class="content wrap documentationContent"><div class="nav-docs"><div class="nav-docs-section"><h3>Recent Posts</h3><ul><li><a class="" href="/react-native/blog/2016/08/19/right-to-left-support-for-react-native-apps.html">Right-to-Left Layout Support For React Native Apps</a></li><li><a class="" href="/react-native/blog/2016/08/12/react-native-meetup-san-francisco.html">San Francisco Meetup Recap</a></li><li><a class="" href="/react-native/blog/2016/07/06/toward-better-documentation.html">Toward Better Documentation</a></li><li><a class="" href="/react-native/blog/2016/03/24/introducing-hot-reloading.html">Introducing Hot Reloading</a></li></ul></div></div><div class="inner-content"><div class="article"><h1>Right-to-Left Layout Support For React Native Apps</h1><p class="meta">August 19, 2016 by <a href="https://github.com/MengjueW" target="_blank">Mengjue (Mandy) Wang</a></p><hr><div><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" target="_blank">react-native</a> master branch today, and will be available in the next RC: <a href="https://github.com/facebook/react-native/releases" target="_blank"><code>v0.33.0-rc</code></a>.</p><p>This involved changing <a href="https://github.com/facebook/css-layout" target="_blank">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" target="_blank">iOS</a> and <a href="https://play.google.com/store/apps/details?id=com.facebook.adsmanager" target="_blank">Android</a>. Here is how it looks like in those RTL languages:</p><span><p align="center">
|
||||
<img src="/react-native/blog/img/rtl-ama-ios-arabic.png" width="280" style="margin:10px">
|
||||
<img src="/react-native/blog/img/rtl-ama-android-hebrew.png" width="280" style="margin:10px">
|
||||
</p>
|
||||
|
||||
</span><h2><a class="anchor" name="overview-changes-in-rn-for-rtl-support"></a>Overview Changes in RN for RTL support <a class="hash-link" href="#overview-changes-in-rn-for-rtl-support">#</a></h2><p><a href="https://github.com/facebook/css-layout" target="_blank">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" target="_blank">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/img/rtl-rn-core-updates.png" alt=""></p><p>These include:
|
||||
<em> <a href="https://github.com/facebook/css-layout/commit/46c842c71a1232c3c78c4215275d104a389a9a0f" target="_blank">css-layout RTL support for absolute positioning</a>
|
||||
</em> mapping <code>left</code> and <code>right</code> to <code>start</code> and <code>end</code> in RN core implementation for shadow nodes
|
||||
* and exposing a <a href="https://github.com/facebook/react-native/blob/f0fb228ec76ed49e6ed6d786d888e8113b8959a2/Libraries/Utilities/I18nManager.js" target="_blank">bridged utility module</a> to help control the RTL layout</p><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" name="making-an-app-rtl-ready"></a>Making an App RTL-ready <a class="hash-link" href="#making-an-app-rtl-ready">#</a></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" target="_blank">iOS</a> and <a href="https://developer.android.com/training/basics/supporting-devices/languages.html" target="_blank">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><div class="prism language-javascript"><span class="token comment" spellcheck="true"> // in AppDelegate.m
|
||||
</span><h2><a class="anchor" name="overview-changes-in-rn-for-rtl-support"></a>Overview Changes in RN for RTL support <a class="hash-link" href="#overview-changes-in-rn-for-rtl-support">#</a></h2><p><a href="https://github.com/facebook/css-layout" target="_blank">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" target="_blank">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/img/rtl-rn-core-updates.png" alt=""></p><p>These include:</p><ul><li><a href="https://github.com/facebook/css-layout/commit/46c842c71a1232c3c78c4215275d104a389a9a0f" target="_blank">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" target="_blank">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" name="making-an-app-rtl-ready"></a>Making an App RTL-ready <a class="hash-link" href="#making-an-app-rtl-ready">#</a></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" target="_blank">iOS</a> and <a href="https://developer.android.com/training/basics/supporting-devices/languages.html" target="_blank">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><div class="prism language-javascript"><span class="token comment" spellcheck="true"> // in AppDelegate.m
|
||||
</span> <span class="token punctuation">[</span><span class="token punctuation">[</span>RCTI18nUtil sharedInstance<span class="token punctuation">]</span> allowRTL<span class="token punctuation">:</span>YES<span class="token punctuation">]</span><span class="token punctuation">;</span></div><p>Android:</p><div class="prism language-javascript"><span class="token comment" spellcheck="true"> // in MainActivity.java
|
||||
</span> I18nUtil sharedI18nUtilInstance <span class="token operator">=</span> I18nUtil<span class="token punctuation">.</span><span class="token function">getInstance<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
sharedI18nUtilInstance<span class="token punctuation">.</span><span class="token function">setAllowRTL<span class="token punctuation">(</span></span>context<span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span></div></li><li><p>For Android, you need add <code>android:supportsRtl="true"</code> to the <a href="http://developer.android.com/guide/topics/manifest/application-element.html" target="_blank"><code><application></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" name="writing-rtl-ready-components"></a>Writing RTL-ready Components <a class="hash-link" href="#writing-rtl-ready-components">#</a></h2><p>In general, most components are already RTL-ready, for example:</p><ul><li><p>Left-to-Right Layout</p><span><p align="left">
|
||||
|
||||
Reference in New Issue
Block a user