README
React Native Easy Localization and RTL
This library is for creating multi-Language supported apps easily on android and ios using react native without any reloads. It helps to change language and layout easily using predefined styles.
Lets build an RTL layout stylesheet library for ease of use
Getting Started
yarn add react-native-localization react-native-easy-localization-and-rtl
npm i --save react-native-localization react-native-easy-localization-and-rtl
This Library use react-native-localization.
Installation
#react-native >= 0.60
cd ios && pod install && cd ..
#react-native < 0.60
react-native link react-native-localization
for manual installation guide https://github.com/stefalda/ReactNativeLocalization**
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**
RTL functions
- getSheet(LocalizedStrings) - get stylesheet for the current language
- isRTL(LocalizedStrings) - get RTL status : boolean
Examples
Format String Examples
en:{
bread:"bread",
butter:"butter",
question:"I'd like {0} and {1}, or just {0}"
}
...
strings.formatString(strings.question, strings.bread, strings.butter)
Overwrite Locale
You might have default localized in the build but then download the latest localization strings from a server. Use setContent to overwrite the whole object. NOTE that this will remove all other localizations if used.
strings.setContent({
en: {
how: "How do you want your egg todajsie?",
boiledEgg: "Boiled eggsie",
softBoiledEgg: "Soft-boiled egg",
choice: "How to choose the egg",
},
});
You can also only overwrite a specific language using
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",
},
})
);