Localization

React Native for Web provides simple mechanisms to automatically flip layouts to match the writing direction of the app or a specific component tree.

Localization styles

The non-standard direction-independent style properties and values (e.g., marginStart) should be used as much as possible. React Native for Web will automatically flip the direction of these properties within subtrees based on the writing direction of the ancestor tree.

// "start" is "left" for LTR and "right" for RTL
const style = { paddingInlineStart: 10, marginInlineStart: 10 };
return (
  <View style={style} />
);

Localization props

To automatically flip the layout of a component and its subtree, you can either:

1. Set the dir prop to the desired writing direction (e.g., "rtl").
2. Set the lang prop to the locale of the content.

<View dir="ltr">...</View>
<Text lang="ar">...</Text>

By default, the native writing direction of Text and TextInput components is set to "auto". This uses the browser’s built-in writing direction algorithm to detect whether the text should be displayed left-to-right or right-to-left.

Localization hook

The useLocaleContext API can be used for fine-grained control of layout, e.g., flipping images or transforms.

const { direction, locale } = useLocaleContext();

const isRTL = direction === 'rtl';
const style = { scaleX: isRTL ? -1 : 1 };

<Image source={'forward.svg'} style={style} />
<Image source={isRTL ? 'back.svg' : 'forward.svg'} />