Let us Implement Right-To-Left(RTL) in react native to expand accessibility and add international language support.
Languages like languages like Arabic, Hebrew, or Persian are read out RTL,
Even while React Native natively supports RTL, it takes careful consideration to handle it effectively without requiring app restarts.
This tutorial shows how we can add RTL support without restarting your React Native application.
Why Is RTL Important?
RTL languages are used predominantly in more than 20 countries, and adding support for them may greatly enhance user experience. Your program will be flexible and easy to use for users with varying language preferences if you can guarantee smooth transitions between Left-to-Right (LTR) and RTL layouts.
Prerequisites
- Basic knowledge of React Native.
- A React Native project set up (React Native CLI or Expo).
- `i18n-js `for translations.
- `react-i18next` and `i18next` for additional features.
Step-by-Step Implementation
Step 1: Install Dependencies
Install the following dependencies:
npm install i18n-js react-i18next i18next
Step 2: Set Up Translations
Create a `locales` folder in your project root directory and add your translation files. For example, create a `locales` folder and add `english.json`, `arabic.json`, `german.json` files.
// english.json
{
"hello": "Hello",
"welcome": "Welcome"
}
// arabic.json
{
"hello": "ู
ุฑุญุจุง",
"welcome": "ู
ุฑุญุจุง"
}
// german.json
{
"hello": "Hallo",
"welcome": "Willkommen"
}Step 3. Enable RTL in Your Project
React Nativeโs `I18nManager` module allows you to enable RTL layout direction. Use the following code to toggle RTL support:
import { I18nManager } from 'react-native';
import { useState } from 'react';
import YourAppComponent from './YourAppComponent';
const App = () => {
const [key, setKey] = useState(0); // Track changes to force re-render.
const toggleRTL = () => {
// Toggle RTL support
I18nManager.allowRTL(!I18nManager.isRTL);
I18nManager.forceRTL(!I18nManager.isRTL);
setKey((prevKey) => prevKey + 1); // Force a re-render to apply layout changes.
};
return <YourAppComponent key={key} toggleRTL={toggleRTL} />;
};
export default App;Step 4. Trigger Layout Changes Without Restart
By updating the `key` prop of the root component, you force a re-render of the app. This approach allows the layout to change without needing a full restart, which is crucial for maintaining a seamless user experience.
Step 5. Adjust Styles for RTL Compatibility
Ensure that your styles are RTL-aware by using `start` and `end` instead of `left` and `right` in your layout definitions:
const styles = {
container: {
flexDirection: 'row', // Switch to 'row-reverse' automatically in RTL.
justifyContent: 'space-between',
paddingStart: 10, // Aligns with start regardless of direction.
paddingEnd: 10,
},
};React Native handles many components automatically when RTL is enabled, but review any custom components for directional dependencies.
Step 6. Set up your `i18n.js` file:
import english from '@/locales/english.json';
import arabic from '@/locales/arabic.json';
import german from '@/locales/german.json';
import { I18n } from 'i18n-js';
import * as Localization from 'expo-localization';
const i18n = new I18n({
en: english,
de: german,
ar: arabic,
});
const deviceLocales = Localization.getLocales();
i18n.locale = deviceLocales[0]?.languageCode || 'en';
i18n.enableFallback = true;
const isRTL = deviceLocales[0]?.textDirection === 'rtl';
export { isRTL };
export default i18n;Final Thoughts
Implementing RTL support without restarting your React Native app improves the user experience, making your app more adaptable for multilingual audiences. Using the `key` prop technique for re-rendering is a straightforward method that avoids app reloads and enhances performance.
By following these steps, you can ensure that your React Native app is ready for global use, supporting both LTR and RTL languages dynamically and seamlessly.
