devnagri-react-native-sdk

React-Native Production SDK

SDK Integration Steps:

Introduction

Devnagri Over the Air SDK for React Native enables seamless translation updates in your React Native app, eliminating the need for a new release with every translation change. By integrating our SDK, your app will automatically check for updated translations on Devnagri and download them in the background.

Getting started

Install the SDK:

npm install devnagri-react-native-sdk

Install Required Peer Dependencies:

To ensure the SDK functions properly, the following peer dependencies are required:

• i18next:23.14.0
• react-i18next:15.0.1
• react-native-device-info:10.11.0
• react-native-fs:2.20.0
• react-native-sqlite-2:3.6.2
• react-native-view-shot:3.8.0
• intl-pluralrules:2.0.1

run following command to install all libraries with required versions:

npm install i18next@23.14.0 react-i18next@15.0.1 react-native-device-info@10.11.0 react-native-fs@2.20.0 react-native-sqlite-2@3.6.2 react-native-view-shot@3.8.0 intl-pluralrules@2.0.1 && npx pod-install

or

yarn add i18next@23.14.0 react-i18next@15.0.1 react-native-device-info@10.11.1 react-native-fs@2.20.0 react-native-sqlite-2@3.6.2 react-native-view-shot@3.8.0 intl-pluralrules@2.0.1 && npx pod-install

Default Localisation Override

The SDK extends and overrides the functionality of const { t } = useTranslation() from the react-i18next library.

Usage

To use the SDK, you need to obtain the API key and bundle ID from the SDK administrator.

You can use translations in your layouts as usual: {t('bestOffer')}

// App.tsx
import {NavigationContainer, useNavigationContainerRef} from '@react-navigation/native';
import {TranslationProvider} from 'devnagri-react-native-sdk';

const navigationRef = useNavigationContainerRef();

function App() {
  return (
    <NavigationContainer ref={navigationRef}>
      <TranslationProvider
        localeFilePath={require(<en.json strings file>)}//required
        apiKey={API_KEY}//required you need to get an api key from devnagri sdk admin
        navigationRef={navigationRef}//here we pass the reference of navigation container
      >
		    {children}
      </TranslationProvider>
    </NavigationContainer>
  );
}


// TranslationView.tsx

import {useTranslationContext} from 'devnagri-react-native-sdk';

export const TranslationView = () => {
  const {t} = useTranslationContext();

  return (
      <View>
        <Text>{t('v1.feature1.title')}</Text>
        <Text>{t('bestOffer')}</Text>
        <Text>{t('step1.step3.step4')}</Text>
        <Text>{t('numbers')}</Text>
        <Text>{t('alphabets')}</Text>
        <Text>{t('howDoYouDo')}</Text>
      </View>
  );
};

Note: The keys used inside <Text></Text> must be defined in the en.json file, which you have specified in the localFilePath of the <TranslationProvider> component.

Change Language

In case you don't want to use the system language, you can set a different language in the updateAppLocale method.

// Settings.tsx
import {currentLanguage, useTranslationContext} from 'devnagri-react-native-sdk';
export const TranslationView = () => {
  const {setLocale} = useTranslationContext();

  setLocale(item.code);

  // setLocale method have an optional callback that can be used for show/hide loader and other asynchronous tasks.
  setLocale(item.code, () => {

  });


  Return(<View></View>);
};

Get Supported Language

You can get supported languages for the SDK using this method. This will return hashmap of language name and language code

interface Language {
  code: string;
  name: string;
}

const {getSupportedLanguages, isSDKInitialized} = useTranslationContext();
const [supportedLangs, setSupportedLangs] = useState<Language[]>([]);

getSupportedLanguages()
   .then(supportedLanguages => {
     if (supportedLanguages.length > 0) {
       console.log('supported languages: ', supportedLanguages);
     }
   })
   .catch(error => {
     console.log('Error fetching supported languages: ', error);
   });

Setting some extra parameters

- setMaxRecursionCount
  This parameter determines how many times the SDK will attempt to call the fetch translation API until a successful response is received. The default is set to 10 attempts.

- setRecursionDurationInSeconds
  This parameter defines the delay between two consecutive fetch request calls. The default is 2 seconds.

These parameters are optional and not required to be set.

const {setMaxRecursionCount, setRecursionDurationInSeconds} = useTranslationContext();

useEffect(() => {
    setMaxRecursionCount(20);
    setRecursionDurationInSeconds(1);
  }, []);

Translate String, List, Map and JSON on runtime

You can use these methods anywhere in your project and these will provide translation for current active locale in callback method.

Get Translation of a specific String

const {getTranslationOfString} = useTranslationContext();

getTranslationOfString: (
  stringToTranslate: string,
  callback: (translatedString: string) => void,
) => {};

getTranslationOfString(“Hello World”, translatedText => {
//you can get translatedText here
});

Get Translations of an Array of String

const {getTranslationOfArray} = useTranslationContext();

getTranslationOfArray: (
  arrayOfStringToTranslate: string[],
  callback: (translatedArray: string[]) => void,
) => {};

Const arrayOfStrings = [“Hello”,”World”]

getTranslationOfArray(arrayOfStrings, translatedArray => {

});

Get Translations of HashMap

This method converts the HashMap object into the requested language. You can use the ignoreKeys parameter to provide a list of strings (keys) that should be excluded from the conversion process.

const {getTranslationOfMap} = useTranslationContext();

getTranslationOfMap: (
  mapObject: Map<string, any>,
  ignoreKeys: string[],
  callback: (translatedMap: Map<string, any>) => void,
) => {};

getTranslationOfMap(hashMap, ignoreKeysArray, translatedMap => {

});

Get Translations of JSON Object

This method converts the entire JSON object into the requested language. You can use the ignoreKeys parameter to provide a list of strings (keys) that should be excluded from the conversion process.

const {getTranslationOfJson} = useTranslationContext();

getTranslationOfJson: (
  jsonObject: Record<string, any>,
  ignoreKeys: string[],
  callback: (translatedJson: Record<string, any>) => void,
) => {};

getTranslationOfJson(parsedObject, ignoreArray, translatedJson => {

});

Here’s a sample of an en.json file for localization:

{
  "en": {
    "translation": {
      //Place all translation key-value pairs here.
      "hello": "Hello",
      "world":"World"
    }
  }
}

License

Devnagri AI Pvt. Ltd.