Building Internationalized UI

Building Internationalized UI

In this lesson, you will learn how to adapt your component layouts to support Right-to-Left (RTL) languages like Arabic or Hebrew using React Native’s built-in layout direction tools.

When we build UIs, we often default to thinking in "Left-to-Right" (LTR). However, for many users, the primary flow of information starts from the right side of the screen. React Native helps us handle this by using I18nManager, which allows us to detect and programmatically adjust the layout direction of our components.

The Power of I18nManager

Instead of hardcoding margins or padding to the "left" or "right," we should think in terms of start and end. When the app’s layout direction is set to RTL, React Native automatically flips any component using start or end properties, ensuring your icons, text alignment, and spacing mirror correctly for the user.

Here is how you can implement a layout that respects the user's language setting:

import { View, Text, I18nManager, StyleSheet } from 'react-native';

const MyComponent = () => {
  return (
    <View style={styles.container}>
      {/* This margin will automatically flip based on locale */}
      <Text style={styles.text}>Hello, World!</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    paddingStart: 20, // Instead of paddingLeft
    paddingEnd: 20,   // Instead of paddingRight
  },
  text: {
    textAlign: 'auto', // Automatically aligns based on system language
  }
});

To test this during development, you can force the RTL layout direction in your entry file (like index.js or App.js) using I18nManager.allowRTL(true).

By shifting your mindset from absolute directions (left/right) to relative directions (start/end), you make your application inclusive to a global audience without having to write separate logic for different languages. Always ensure that your custom animations or absolute positioning also account for this flow by checking the current state of I18nManager.isRTL.

Key Takeaway: Use the start and end layout properties instead of left and right to ensure your components automatically adapt their flow for both LTR and RTL languages.