Programming Tutorials

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.






Add Comment

* Required information
1000

Comments

No comments yet. Be the first!

Most Viewed Articles (in React-Native )

Layout direction property in React Native

react-native-android-location-services-dialog-box alternative in expo

OpenType (OTF) vs TrueType (TTF)

loadAsync() vs useFonts() in expo - react native

expo-secure-store vs expo-file-system in expo - react native

Send push notifications to android/ios sample code using expo - react native

Error Handling in TextInput - React Native

react-native-background-job alternative in expo app

'import' and 'export' may only appear at the top level - React Native

set up a global error handler in React Native (expo)

Session variables in React Native - Expo

use axios in Expo to call APIs

Start background location tracking after login in expo react native

Some dependencies are incompatible with the installed expo version:

disable the back arrow in the header of a screen in a React Navigation Stack Navigator

Latest Articles (in React-Native)

Session variables in React Native - Expo

use axios in Expo to call APIs

Start background location tracking after login in expo react native

set up a global error handler in React Native (expo)

SafeAreaView in React Native

Some dependencies are incompatible with the installed expo version:

disable the back arrow in the header of a screen in a React Navigation Stack Navigator

react-native-android-location-services-dialog-box alternative in expo

Error Handling in TextInput - React Native

react-native-background-job alternative in expo app

'import' and 'export' may only appear at the top level - React Native

OpenType (OTF) vs TrueType (TTF)

loadAsync() vs useFonts() in expo - react native

expo-secure-store vs expo-file-system in expo - react native

Send push notifications to android/ios sample code using expo - react native