How do you support right-to-left (RTL) writing and layout interfaces for Arabic?

Short answer

Use the I18nManager module and direction-neutral Flexbox properties such as marginStart, marginEnd, paddingStart, and paddingEnd instead of left and right.

Explanation

When switching to Arabic, the entire app direction reverses to right-to-left. Fixed left and right properties prevent the design from reversing automatically and cause layout issues. Using start and end lets the system flip margins and alignment automatically based on the device language direction detected by I18nManager.isRTL.

Code example

const styles = StyleSheet.create({
  listItem: {
    flexDirection: 'row',
    alignItems: 'center',
    // Automatically flips between Arabic and English:
    paddingStart: 16,
    paddingEnd: 8,
    marginEnd: 12,
  }
});

Common mistakes

• Using fixed marginLeft and marginRight, forcing the developer to write laborious manual conditions for every element in the app.

Follow-up questions

• What is the difference between position: "relative" and position: "absolute" in React Native layout?

Sources

• React Native docs — I18nManager