From 11ac66ed3a4f789df1fe86dcb99a8a184c1c462b Mon Sep 17 00:00:00 2001 From: Website Deployment Script Date: Tue, 10 Oct 2017 18:13:39 +0000 Subject: [PATCH] Updated docs for next --- .../19/right-to-left-support-for-react-native-apps.html | 2 +- releases/next/docs/actionsheetios.html | 9 ++++++++- releases/next/docs/checkbox.html | 4 ++-- releases/next/docs/debugging.html | 2 +- releases/next/docs/easing.html | 2 +- releases/next/docs/flexbox.html | 2 +- releases/next/docs/more-resources.html | 2 +- releases/next/docs/native-modules-ios.html | 4 ++-- releases/next/docs/platform-specific-code.html | 2 +- releases/next/docs/scrollview.html | 2 +- releases/next/docs/sectionlist.html | 2 +- releases/next/docs/textinput.html | 2 +- releases/next/docs/timepickerandroid.html | 8 ++++++-- releases/next/docs/using-a-listview.html | 3 ++- releases/next/docs/webview.html | 6 +++--- releases/next/versions.html | 2 +- versions.html | 4 ++-- 17 files changed, 35 insertions(+), 23 deletions(-) diff --git a/blog/2016/08/19/right-to-left-support-for-react-native-apps.html b/blog/2016/08/19/right-to-left-support-for-react-native-apps.html index 43d9b494946..2aaeea531f8 100644 --- a/blog/2016/08/19/right-to-left-support-for-react-native-apps.html +++ b/blog/2016/08/19/right-to-left-support-for-react-native-apps.html @@ -6,7 +6,7 @@

Overview Changes in RN for RTL support #

css-layout already has a concept of start and end for the layout. In the Left-to-Right (LTR) layout, start means left, and end means right. But in RTL, start means right, and end means left. This means we can make RN depend on the start and end calculation to compute the correct layout, which includes position, padding, and margin.

In addition, css-layout 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.

The diagram below describes the changes at high level:

These include:

With this update, when you allow RTL layout for your app:

Making an App RTL-ready #

  1. To support RTL, you should first add the RTL language bundles to your app.

  2. Allow RTL layout for your app by calling the allowRTL() 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:

    iOS:

    // in AppDelegate.m [[RCTI18nUtil sharedInstance] allowRTL:YES];

    Android:

    // in MainActivity.java I18nUtil sharedI18nUtilInstance = I18nUtil.getInstance(); - sharedI18nUtilInstance.setAllowRTL(context, true);

  3. For Android, you need add android:supportsRtl="true" to the <application> element in AndroidManifest.xml file.

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.

Writing RTL-ready Components #

In general, most components are already RTL-ready, for example: