applanga-react-native

A React Native library for Applanga

Installation

1. Add the Applanga native SDKs to your Project

Android

1. Download the Applanga Settings File for your app from the Applanga Project Overview by clicking the [Prepare Release] button and then clicking [Get Settings File] .

Add the Applanga Settings File to your android resources res/raw directory.

2. Add the following to your app/build.gradle file

    repositories {
        maven { url 'https://maven.applanga.com/'}
    }

iOS

1. Download the Applanga Settings File for your app from the App Overview in the dashboard by clicking the [Prepare Release] button and then clicking [Get Settings File] .

Add the Applanga Settings File to your apps resources. It will be automatically loaded.

2. Add applanga-react-native

• npm install applanga-react-native --save

Usage

0. The Example app

In this repo you will find an example app named 'BasicExampleApp'. In this app you will find examples of all techniques explained below. We recommend taking a look, particularly at the string file mapping and init process, before you start using the plugin in your own project.

1. Understanding the flow of the ApplangaSDK

The applanga_settings.applanga file, that you added to your app earlier in this process, contains all the languages and translations that are present in the Applanga dashboard at the time you download the file. This data is then entered into a database on the device.

When your app launches and the ApplangaSDK is initialised, the SDK pulls the latest translations for the current app language and the base (default) language, and then updates those languages in the database.

Other languages are not automatically updated as this would mean potentially pulling data that is not required.

If you wish to trigger an update, and pull the latest data, after the init process then you can use the method:

Applanga.update()

This fetches changes from the dashboard (of the current app language and the base language) and updates the local Applanga Database. You have to rerender your UI to see latest changes. Be aware that due to our CDN-Caching it can take up to 10 minutes before new translations are available from the dashboard.

Note: React Native bridge is asynchronous. So all Methods are asynchronous calls.

2. Import

import {Applanga} from 'applanga-react-native'

3. Initialisation

Before the translations can be accessed you must init the ApplangaSDK by calling Applanga.update().

Here is an example function that you could copy and use to handle init, and also for mapping translations (See the Localize a Map section below for more info).

var en = require('./strings/en.json');
var de = require('./strings/de.json');

var localisedMap;

async function applangaInit(callback){
	try{
      await Applanga.update()
      localisedMap = await Applanga.localizeMap(
        {
            "en": en,
            "de": de
        })
        console.log("Localise map complete")
        console.log(localisedMap)
    } catch (e) {
      console.error(e);
    }
    callback()
}

4. Get a String

You can get the localised value of a string Using the following method:

async Applanga.getString("string\_key", "default\_message")

If string_key does not exists, default_message gets uploaded to the applanga dashboard (See the Debug String Upload section of this doc for more info regarding string upload).

As this call is async, it might not always be convenient, so we advise localising a map(json object), as explained in the next section. Check the BasicExampleApp in this repo for a good example of this.

5. Get a String with arguments (New)

You can get the localised value of a string with his arguments using the following method:

async getStringWithArgumentsAsync("string\key", "default\_message",{"argumentName":"argumentValue"})

Example:

this.greetingsText = await getStringWithArgumentsAsync("greetingskey", "Hello %{userName}",{"userName":"John Doe"})

and then assign the greetingsText variable to a Text component in React Native

Like so:

<Text style = {styles.greetingText}>
    {this.greetingsText}
</Text>

If string_key does not exists, default_message gets uploaded to the applanga dashboard (See the Debug String Upload section of this doc for more info regarding string upload).

6. Localize a Map

With async Applanga.localizeMap(map); you can translate a collection of json objects all in one go. So an optimal setup would be to have the strings for each language in json objects (perhaps in separate files) and then call Applanga.localizeMap on those objects after applanga has finished initialising. Then after that you can get the translations from those objects immediately instead of asynchronously.

Like so:

Applanga.localizeMap(
	{
		"en": {
			"hello_world": "Hello World"
		}, 
		"de" : {
			"hello_world": "Hallo Welt"
		}
	}
);

Applanga.localizeMap(map) returns the same map but with the actual Applanga localizations.

Check our ExampleApp included in this repo to see a clear and simple example of using localizeMap to translate all strings on startup and make them accessible synchronously.

7. Set Language

By Default, the ApplangaSDK will use the devices current language. But if you wish to you can set the language manually using the Set Language method.

Applanga.setLanguage(string language)

If you want to make sure that you have the very latest changes from the dashboard, then you should call Applanga.update(); after setting the language as this will pull all the latest changes for the newly selected language.

8. Set Language and Update (Recommended)

This is the recommended option by the Applanga Team. Its combine the Set Language functionality to set the language manually and the Update functionality to get the the very latest changes from the dashboard. To use this method you should call Applanga.SetLanguageAndUpdate(String Language);

9. Draft Mode & Localisation Screenshots

To show the applanga draft mode and screen shot menus you can either use the following methods, or follow the native documentation for each platform to implement showing the menus using gestures.

Show the applanga draft mode activation popup:

Applanga.showDraftModeDialog()

Show and hide the applanga screenshot and tag picker popup (Draft mode must be active for these menus to appear):

Applanga.showScreenShotMenu() & Applanga.hideScreenShotMenu()

You can read more about tags here : Manage Tags and about screenshots here: Uploading screenshots.

Show Id Mode

Enabling the applanga show id mode forces the sdk to return your string ids instead of string values, for all getString() or localizeMap() calls. This should not be used in production. It is especially useful for screenshots - as all strings will be tagged correctly even the dynamic strings and strings set at runtime.

Applanga.setShowIdModeEnabled(true);

After enabling the show id mode you have to call localizeMap() again and you have to refresh your view tree with setState().

10. Debug String Upload

Strings from Applanga.getString(String, String) and Strings which are located in the map of Applanga.localizeMap(map), will be uploaded if the app is in debug mode and fulfill one of the two points: They are non existent on the Applanga Dashboard or the target text is empty.

Debug mode for iOS

Open your ios/*.xcodeproj or ios/*.xcworkspace in XCode and run your app.

Debug mode for Android

Open Android Studio, File - Open. android/ directory. Run "Debug 'app'".