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 ea501b7c1aa..51897cc9386 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 @@ -1,12 +1,9 @@ -Right-to-Left Layout Support For React Native Apps – React Native | A framework for building native apps using React
React Nativenext

Recent Posts

Right-to-Left Layout Support For React Native Apps

August 19, 2016 by Mengjue (Mandy) Wang

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.

We're glad to announce that React Native has been improved to support RTL layouts. This is now available in the react-native master branch today, and will be available in the next RC: v0.33.0-rc.

This involved changing css-layout, the core layout engine used by RN, and RN core implementation, as well as specific OSS JS components to support RTL.

To battle test the RTL support in production, the latest version of the Facebook Ads Manager app (the first cross-platform 100% RN app) is now available in Arabic and Hebrew with RTL layouts for both iOS and Android. Here is how it looks like in those RTL languages:

+Right-to-Left Layout Support For React Native Apps – React Native | A framework for building native apps using React

React Nativenext

Recent Posts

Right-to-Left Layout Support For React Native Apps

August 19, 2016 by Mengjue (Mandy) Wang

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.

We're glad to announce that React Native has been improved to support RTL layouts. This is now available in the react-native master branch today, and will be available in the next RC: v0.33.0-rc.

This involved changing css-layout, the core layout engine used by RN, and RN core implementation, as well as specific OSS JS components to support RTL.

To battle test the RTL support in production, the latest version of the Facebook Ads Manager app (the first cross-platform 100% RN app) is now available in Arabic and Hebrew with RTL layouts for both iOS and Android. Here is how it looks like in those RTL languages:

-

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: - css-layout RTL support for absolute positioning - mapping left and right to start and end in RN core implementation for shadow nodes -* and exposing a bridged utility module to help control the RTL layout

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

  • every component layout will flip horizontally
  • some gestures and animations will automatically have RTL layout, if you are using RTL-ready OSS components
  • minimal additional effort may be needed to make your app fully RTL-ready

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 +

    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:

    • every component layout will flip horizontally
    • some gestures and animations will automatically have RTL layout, if you are using RTL-ready OSS components
    • minimal additional effort may be needed to make your app fully RTL-ready

    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:

    • Left-to-Right Layout

      diff --git a/blog/index.html b/blog/index.html index 06a6ba5bace..fda9e953f4e 100644 --- a/blog/index.html +++ b/blog/index.html @@ -1,12 +1,9 @@ -Blog – React Native | A framework for building native apps using React

      React Nativenext

      Recent Posts

      Right-to-Left Layout Support For React Native Apps

      August 19, 2016 by Mengjue (Mandy) Wang

      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.

      We're glad to announce that React Native has been improved to support RTL layouts. This is now available in the react-native master branch today, and will be available in the next RC: v0.33.0-rc.

      This involved changing css-layout, the core layout engine used by RN, and RN core implementation, as well as specific OSS JS components to support RTL.

      To battle test the RTL support in production, the latest version of the Facebook Ads Manager app (the first cross-platform 100% RN app) is now available in Arabic and Hebrew with RTL layouts for both iOS and Android. Here is how it looks like in those RTL languages:

      +Blog – React Native | A framework for building native apps using React

      React Nativenext

      Recent Posts

      Right-to-Left Layout Support For React Native Apps

      August 19, 2016 by Mengjue (Mandy) Wang

      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.

      We're glad to announce that React Native has been improved to support RTL layouts. This is now available in the react-native master branch today, and will be available in the next RC: v0.33.0-rc.

      This involved changing css-layout, the core layout engine used by RN, and RN core implementation, as well as specific OSS JS components to support RTL.

      To battle test the RTL support in production, the latest version of the Facebook Ads Manager app (the first cross-platform 100% RN app) is now available in Arabic and Hebrew with RTL layouts for both iOS and Android. Here is how it looks like in those RTL languages:

      -

      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: - css-layout RTL support for absolute positioning - mapping left and right to start and end in RN core implementation for shadow nodes -* and exposing a bridged utility module to help control the RTL layout

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

      • every component layout will flip horizontally
      • some gestures and animations will automatically have RTL layout, if you are using RTL-ready OSS components
      • minimal additional effort may be needed to make your app fully RTL-ready

      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 +

        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:

        • every component layout will flip horizontally
        • some gestures and animations will automatically have RTL layout, if you are using RTL-ready OSS components
        • minimal additional effort may be needed to make your app fully RTL-ready

        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:

        • Left-to-Right Layout