Right-to-Left Text and Layout

Right-to-Left (RTL) language and layout support in an app is a must if you want to expand your product or services to every part of the world. You.i React Native offers the RTL support to your app with smooth user experience for countries with RTL languages.

One of the best things about RTL support in You.i React Native is that you don’t need to add any additional code to enable RTL for the TextInput component in an app, as it’s already taken care of by the You.i Platform. However, there are few things you need to do to support RTL on other components as described below.

Check Device RTL Preference

The Localization module is used to verify whether the device your app is running on has the user-preferred language settings on or not. Use the Localization module’s getIsRTL() method, which returns a boolean, to select the correct direction in your app.

If you use custom logic for an end-user to select an RTL language on your app, such as using an external menu to select a language, then use that to determine the RTL language instead of getIsRTL().

Enable RTL Layouts

Once you have information on the user-preferred language setting using getIsRTL(), you can enable RTL on your app using the direction prop of Layout Props. If getIsRTL() returns true, you can set the direction prop to RTL. This automatically changes the direction of layouts. For more information, see the example code snippet.

Note that if you enable RTL on a component, all children components inherit the RTL automatically. For example, if on a layout RTL is enabled, you’ll see that the layout/view begins from right instead of left.

When the layout direction is set to LTR:

When the layout direction is set to RTL:

Animations in the RTL Layout

Animations that use the start and end style props automatically flip when the direction prop is set to RTL, and you update the start prop to left and the end prop to right.

For native animations, which use the transform style prop, you need to manually change the values, such as setting the rotateZ value to a equivalent negative value instead of a positive one to support RTL. The following example code illustrates how to set the animation rotation output range to -360 degrees if RTL is enabled:

let rotateVal = this.state.animatedRotation.interpolate({
  inputRange: [0, 1],
  outputRange: ["0deg", this.state.isRTL ? "-360deg" : "360deg"]
});

Example Code Snippet

The following example code snippet illustrates how to use getIsRTL() method to get the user-preferred language settings and set the direction prop accordingly. When the RTL settings are applied to the parent layout, all children layouts inherit it automatically.

import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View } from 'react-native';
import { LocalizationModule } from '@youi/react-native-youi';
export default class EnableRTLExample extends Component {
  render() {
    return (
      <View
        style={[
          styles.container,
          { direction: LocalizationModule.getIsRTL() ? 'rtl' : 'ltr' }
        ]}
      >
      <View style={styles.view}>
        <Text style={styles.text}>View #1</Text>
      </View>
      <View style={styles.view}>
        <Text style={styles.text}>View #2</Text>
      </View>
      <View style={styles.view}>
        <Text style={styles.text}>View #3</Text>
      </View>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'grey',
    flexDirection: 'row'
  },
  view: {
    flex: 1,
    backgroundColor: 'white',
    margin: 20
  },
  text: {
    fontSize: 100
  }
});

Example Code Snippet 2

The following example code snippet illustrates how to use the getIsRTL() method to get the user-preferred language settings and set the textAlign style prop accordingly.

import React, { Component } from 'react';
import { TextInput, View } from 'react-native';
import { LocalizationModule } from '@youi/react-native-youi';
export default class EnableRTLTextInputExample extends Component {
  render() {
    return (
      <View>
        <TextInput style={{ textAlign: LocalizationModule.getIsRTL() ? 'right' : 'left' }}/>
      </View>
    );
  }
}

Limitations and Known Issues

There are a few limitations and known issues that you should be aware of when adding RTL layout support to your app:

General

• RTL layouts are not supported with the After Effects workflow.
• On UWP, RTL text renders incorrectly with unexpected glyphs.

TextInput Component

When using the RTL layout support, cursor navigation in the TextInput component does not always have the correct behavior on the following platforms:

• On webOS and PS4, the cursor in the TextInput component moves to the opposite direction when arrow keys are pressed.
• On PS4, the cursor moves towards the right until the end of the new RTL characters, then unexpectedly reverses direction and goes through those characters again.
• On Tizen, pressing the soft keyboard’s arrow keys results in unexpected behavior when moving the cursor through the RTL text in the TextInput component.

Text Component

The Text component’s textAlign prop behavior is unaffected by the layout direction. If textAlign is set to left, it remains set to left irrespective of the layout selected (LTR/RTL). Similarly, if textAlign is set to right, it remains set to right.