Composite components expose RTL problems that simple cards do not. A horizontal list has data order and scroll direction. Navigation has transitions and back controls. A library may read native RTL while the app uses its own language state.
Keep vertical list data unchanged
Arabic does not require reversing a vertical list. Keep the source order and make each row direction-aware:
<FlatList
data={items}
keyExtractor={(item) => item.id}
extraData={direction}
renderItem={({ item }) => <ResultRow item={item} direction={direction} />}
/>Define horizontal behavior
For a carousel, decide what “first,” “next,” and “previous” mean. Test the initial index, paging, scroll-to-index behavior, and gesture direction on the exact React Native version you ship. Old platform workarounds can become new bugs after an upgrade.
Configure navigation once
Keep header direction, transition direction, back icons, and drawer position tied to the same language decision. Do not reverse the screen data to compensate for a navigation animation.
<Drawer.Navigator
screenOptions={{
drawerPosition: isRTL ? "right" : "left",
headerTitleAlign: isRTL ? "right" : "left",
}}
>
<Drawer.Screen name="Home" component={HomeScreen} />
</Drawer.Navigator>Wrap third-party components
Place date pickers, charts, carousels, and rich editors behind small adapters. The adapter should define supported languages, map direction props, and document any platform exception. This gives the rest of the app a stable interface even if the library changes.
Test empty, loading, error, selected, and disabled states. A component is RTL-ready only when its full interaction works, not when its default screenshot looks correct.