Layout direction property in React Native

By: Kelly G in React-Native Tutorials on 2023-04-08

The layout direction property in React Native is used to specify the direction in which the elements of a component are laid out. It has two possible values:

ltr: left-to-right layout direction, which is the default in most cases.
rtl: right-to-left layout direction, which is used in languages such as Arabic and Hebrew.

Here's an example of using the layout direction property:

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

const App = () => {
  return (
   <View style={{ flexDirection: 'row', justifyContent: 'center' }}>
      <Text>First item</Text>
      <Text>Second item</Text>
    </View>
  );
};

export default App;

In this example, we have a View component with two Text components inside it, laid out in a row using the flexDirection: 'row' property. The justifyContent: 'center' property centers the Text components horizontally. If we want to change the layout direction to right-to-left, we can add the I18nManager.forceRTL(true) method in the App.js file and set the View component's direction property to 'rtl':

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

I18nManager.forceRTL(true);

const App = () => {
  return (
    <View style={{ flexDirection: 'row', justifyContent: 'center', direction: 'rtl' }}>
      <Text>First item</Text>
      <Text>Second item</Text>
    </View>
  );
};

export default App;

This will change the layout direction to right-to-left and the Text components will be displayed from right to left.

Previous
<< flexDirection in React Native

Next
justifyContent in React Native >>