Applanga App Localization Logo
  • Product
    Overview How it works Features Integrations
  • Resources
    Blog Whats New About Us Solutions Documentation FAQ
  • Pricing
  • Contact
  • See a Demo
  • Login
  • Try for free
  • DocumentationDocs
  • Integration DocumentationIntegration Docs
  • Applanga React Native Localization IntegrationReact Native

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.

  1. 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'".

Product Details
  • Overview
  • How it works
  • Features
  • Integrations
  • Demo
  • Pricing
  • App Localization
  • Android Localization
  • iOS Localization
  • Unity Localization
Information Hub
  • Blog
  • Whats New?
  • How-to?
  • Documentation
  • iOS Integration
  • Android Integration
  • Unity Integration
  • React Native
  • Flutter
  • Rest API
  • Supported File Formats
  • Command Line Interface
  • Solutions
  • FAQ
Company
  • Home
  • About Us
  • Contact
  • Jobs
  • Terms of Service
  • Privacy Policy
  • Imprint
From our Blog
  • • Happy New Year from Applanga!
  • • Applanga Webinar - What's New in 2022!
  • • How to Map Languages between your App and Applanga
  • • Forget about File Management, Applanga is here to help
  • • Translation Review Best Practices
  • • 2022 Release Notes - Vol 1
  • • How to use a custom SSO Provider (Microsoft Azure Active Directory)
  • • How to Add Screenshots from Design Files to App Strings
  • • How to use a custom SSO Provider (PingIdentity SSO)
Stay up to date
Undecided or News Hungry?
Subscribe to our newsletter to get
the latest updates on Applanga's development!
Subscribe

©  All rights reserved. Mbaas Development GmbH.

Thank you!

We have received your request and will get back to you asap!

Contact Us

Email successfully sent

Marketing Permissions

Mbaas Development GmbH will use the information you provide on this form to be in touch with you and to provide updates and marketing. Please let us know all the ways you would like to hear from us:

Email

You can change your mind at any time by clicking the unsubscribe link in the footer of any email you receive from us, or by contacting us at privacy@applanga.com. We will treat your information with respect. For more information about our privacy practices please visit our website. By clicking below, you agree that we may process your information in accordance with these terms.