nabta-translations

nabta-translations!

This is documentation for nabta-translations.

Author: Abdelrahman Moussa.

Installation Guide

npm install nabta-translations --save

Please note that you need to MANUALLY install ONLY IF NOT INSTALLED the following packages:

npm install @react-native-community/async-storage

npm install react-native-localization

npm install react-native-localize

npm install react-native-restart

Also note that some of this libraries may need manual linking so look at their documentation if any error occurred.

HOW TO USE

First import the package.

import { LocalizationContext } from 'nabta-translations'; import LocalizationProvider from 'nabta-translations';

Then use it like that :

Firstly wrap the whole application with the LocalizationProvider and pass to it 2 props; json files containing the arabic and english translations. Here is an example :

      const en = require('./languages/en.json');
      const ar = require('./languages/ar.json');

      const App = () => {
        return (
          <SafeAreaView>
            <View>
              <LocalizationProvider
                ar = {{ ar }}
                en = {{ en }}
                languages = {{ languages }}
              >
                  <TestingTranslations/>
               </LocalizationProvider>
            </View>
          </SafeAreaView>
          )
      };

Secondly in the child component of the app ( where you want to implement tranaslated text ) , you can access the text through the context like this :

 class TestingTranslations extends Component {

 constructor(props){
     super(props);
 }

 static contextType = LocalizationContext

 render(){
     this.context.initializeAppLanguage
     return(
         <Text>{this.context.translations["boiledEgg"]}</Text>
     )
 }
}

Available Props

Prop Name	Describtion	Type	Default Value
ar	Defines the JSON file containing all of the Arabic translations	JSON	NULL
en	Defines the JSON file containing all of the English translations	JSON	NULL

Available functions

AppLanguage , setAppLanguage and initializeApplanguage

should be accessed through the context, while

translateDigits

is a self contained exported function that can be accessed directly

Object name	Description
appLanguage	returns the current language for the application
setAppLanguage	Uset to set the language for the application by passing to it either en for English or ar for Arabic
initializeAppLanguage	Used to initialize the language for the application and must be called at the root of the application. If the language of the application is predefined it restores it. Otherwise ( if the user opens the application for the first time ) , it checks the language of the mobile device itself and sets the language accordingly. For instance, if the phone language is set to Arabic then the application will initially be in Arabic until the user changes the language of the app.
translateDigits	returns translated numbers

nabta-translations