500Docs
  • React Libraries
  • SSR
  • React Native

›React Native

React Libraries

  • Calendar

Server-Side Rendering

  • Setup
  • Redux Integration

React Native

  • Tools
  • Setup (iOS)
  • Setup (Android)
  • Running a Project
  • Linking Libraries
  • Debugging
  • Appcenter
  • Detox
  • Bugsnag
  • Notifications
  • Routing
  • Splash Screen
  • RTL
  • Animations
  • Common Problems

RTL

Read React Native's documentation on RTL.

RN comes with RTL support out of the box. Like it says in the documenation, your layout will be adjusted accordingly to whether your app is RTL or not.

Force RTL

If your app should support ONLY RTL, and not depend on device's language, you can use:

import { I18nManager } from 'react-native'

I18nManager.forceRTL(true);

But! On iOS, calling this method, will switch the layout to RTL after the application reloads.

To overcome this issue, open ios/YourProject/AppDelegate.m, add this import:

#import <React/RCTRootView.h>
#import <React/RCTI18nUtil.h> <--- this one

And add these lines just before RCTRootView *rootView = ...:

// Allow RTL and force-set to RTL
[[RCTI18nUtil sharedInstance] allowRTL:YES];
[[RCTI18nUtil sharedInstance] forceRTL:true];

Now your iOS app's layout will always be RTL.


Last updated on 1/30/2019 by Vova Porton
← Splash ScreenAnimations →
  • Force RTL
Copyright © 2020 500Tech