Usage

import { RTLProvider } from "react-native-easy-localization-and-rtl";
// wrap your app in this provider
<RTLProvider>
  <App />
</RTLProvider>;

Setting up Language Object

There are two ways u can setup the Language Object

1. Initializing RTLProvider with your own version of Localized String (Recommended) Using react-native-localization lib you can create the localized strings and pass it in this library.

//LocalizedConstants.js

import { initializeRTL } from "react-native-easy-localization-and-rtl";
import LocalizedStrings from "react-native-localization";

const localizedString = new LocalizedStrings({
  en: {
    region: "Select Your Region",
    loginMsg: " Kindly enter email address and password to Login",
    noAccount: "Don’t have an account? Click Sign Up button",
    forgotPassword: "Forgot Password",
    login: "Login",
    signup: "Sign up",
    email: "Email Address",
    password: "Password",
    addPhoto: "Add Photo",
    name: "Name and Surname",
  },
  ar: {
    region: "حدد منطقتك",
    loginMsg: "يرجى إدخال عنوان البريد الإلكتروني وكلمة المرور لتسجيل الدخول",
    noAccount: "ليس لديك حساب؟ انقر فوق زر التسجيل",
    forgotPassword: "هل نسيت كلمة المرور",
    login: "تسجيل الدخول",
    signup: "سجل",
  },
});

initializeRTL(localizedString);

export { localizedString };

2. Directly Initializing This will have some problems with intellisense (I am working on its fix)

//LocalizedConstants.js
import { LocalizationString } from "react-native-easy-localization-and-rtl";
const strings = LocalizationString({
  en: {
    region: "Select Your Region",
    loginMsg: " Kindly enter email address and password to Login",
    noAccount: "Don’t have an account? Click Sign Up button",
    forgotPassword: "Forgot Password",
    login: "Login",
    signup: "Sign up",
    email: "Email Address",
    password: "Password",
    addPhoto: "Add Photo",
    name: "Name and Surname",
    helloWorld: "Hello World",
  },
  ar: {
    region: "حدد منطقتك",
    loginMsg: "يرجى إدخال عنوان البريد الإلكتروني وكلمة المرور لتسجيل الدخول",
    noAccount: "ليس لديك حساب؟ انقر فوق زر التسجيل",
    forgotPassword: "هل نسيت كلمة المرور",
    login: "تسجيل الدخول",
    signup: "سجل",
  },
});

export { strings };

Using High Order Class Component

for localized string object you can use either the one passed in props or the object that u created

import React, { Component } from 'react'
import { Text, View } from 'react-native'
import {withRtl} from "react-native-easy-localization-and-rtl"
//If you want to use localized object directly both are same instances so will always be same
import {strings} from './LocalizedConstants.js'


class App extends Component {

  componentDidMount(){
    console.log('Currently Active Language',this.props.language)
    console.log('Currently Active Layout',this.props.isRtl)
    console.log('Currently Active Styles',this.props.RtlStyles)


  }

  onPress=()=>{
    this.props.setLanguage('ar')
  }

  render() {
    return (
      <View style={{...this.props.RtlStyles.containerColumn}}>
        <Text style={{...this.props.RtlStyles.text}} onPress={onPress}>{this.props.localizedString.name} </Text>
        <Text>{strings.name} </Text>
      </View>
    )
  }
}

export withRtl(App)

Using in Functional Component

import React from "react";
import { View, Text } from "react-native";
import { useRtlContext } from "react-native-easy-localization-and-rtl";

export default function App() {
  const { RtlStyles, isRtl, language, setLanguage } = useRtlContext();

  return (
    <View style={{ ...RtlStyles.containerColumn }}>
      <Text
        style={{ ...this.props.RtlStyles.text }}
        onPress={() => {
          setLanguage("ar");
        }}
      >
        {strings.name}
      </Text>
    </View>
  );
}

Available Style Object

RtlStyles

• containerColumn
• containerRow
• text
• containerColumnInverse
• containerRowInverse
• textInverse
• flipHorizontal

APIs

All Functions

LocalizedStrings functions

Note: Dont use setLanguage directly on localizedString object

• setLanguage(languageCode) - to force manually a particular language
• getLanguage() - to get the current displayed language
• getInterfaceLanguage() - to get the current device interface language
• formatString() - to format the passed string replacing its placeholders with the other arguments strings
• setContent(languageObject) - overwrites the current language obj

for further details visit https://github.com/stefalda/ReactNativeLocalization**

  en:{
    bread:"bread",
    butter:"butter",
    question:"I'd like {0} and {1}, or just {0}"
  }
  ...
  strings.formatString(strings.question, strings.bread, strings.butter)

strings.setContent({
  en: {
    how: "How do you want your egg todajsie?",
    boiledEgg: "Boiled eggsie",
    softBoiledEgg: "Soft-boiled egg",
    choice: "How to choose the egg",
  },
});

strings.setContent(
  Object.assign({}, strings.getContent(), {
    en: {
      how: "How do you want your egg todajsie?",
      boiledEgg: "Boiled eggsie",
      softBoiledEgg: "Soft-boiled egg",
      choice: "How to choose the egg",
    },
  })
);