Localize an Application Name in React Native

Written by ivanzotov | Published 2017/08/16
Tech Story Tags: react-native | android-app-development | ios-app-development

TLDRvia the TL;DR App

A localization of an application name in a React Native project and in a native project is a similar process.

Localize an iOS application name

Create a new file InfoPlist.string in the root folder in XCode:

Creating InfoPlist.string in Xcode

Add a default application name to the file, like this:

"CFBundleDisplayName" = "Example Application Name";"CFBundleName" = "Example Application Name";

Where “Example Application Name” is your application name.

Select the file and press “Localize…” button on the right side.

Then press “Localize” in the popup to add the current file as Base language.

Change the Display Name as well, because newest iOS versions uses it as a fallback instead of Base language:

Now add languages in XCode you want to localize the application name. Press “+” in “Localizations” of Info tab of your project.

Adding new language in XCode

And choose InfoPlist.string file to localize.

For each language you added XCode will create a file for InfoPlist.strings. Change the content of localized files:

That’s all!

Localize an Android application name

By default an Android application name is in strings.xml file ./android/app/src/main/res/values/strings.xml:

Similar to iOS, we’re going to localize strings file. Let’s create a new folder inside res with name like values-de , where de is a language you want to localize, it’s Deutsch in our case (full list of codes).

Copy strings.xml to the folder, and change the application name.

Done. More info about Android localization

Thanks.


Published by HackerNoon on 2017/08/16