React Native Arabic guide 2: RTL layouts without duplication

Use one direction source and logical layout properties for Arabic and English React Native screens.

Yasir Najeep

2 min read Reviewed Read the Arabic source

All articles
React Native Arabic guide 2: RTL layouts without duplication

Many RTL bugs come from applying two direction rules at once. Yoga mirrors the interface, then a developer also adds row-reverse, so the screen flips twice and behaves differently across devices.

Prefer start and end

Use marginStart, marginEnd, paddingStart, paddingEnd, start, and end when the meaning is the beginning or end of a line. Reserve left and right for content with a truly physical direction.

const styles = StyleSheet.create({
  card: {
    paddingStart: 16,
    paddingEnd: 12,
    borderStartWidth: 3,
  },
});

Keep one source of direction

const direction = language === "ar" ? "rtl" : "ltr";
const isRTL = direction === "rtl";

Pass direction through your design system. Avoid reading global native state in one component and application language in another.

Treat icons by meaning

Back arrows, next arrows, progress, and reply icons can have directional meaning. Brand marks, media controls, phone symbols, and most status icons should not be mirrored. Record the rule in the icon component instead of scattering transforms through screens.

Animate from logical edges

const translateX = new Animated.Value(isRTL ? 24 : -24);

Animated.timing(translateX, {
  toValue: 0,
  duration: 180,
  useNativeDriver: true,
}).start();

Test the animation after a cold start and after a language change. A visually correct static layout can still enter from the wrong side.

Test mixed content

Use real examples containing Arabic text, English product names, prices, email addresses, and phone numbers. Check small devices and larger text settings. The goal is one component system that understands direction, not duplicated Arabic and English screens.