How to localize Cordova iOS projects?

Question

I've been searching on the Internet but none of the solutions I found seems to work so, my question is with Xcode 6, how we could localize a Cordova app?

The image below illustrates the problem, I tested the app in the iOS Simulator (I changed the language settings of the simulator to Spanish) but the context menu in inputs or some plugin like camera are still in English. I changed the "Localization native development region" to "es" but still in English. Also I have Localizable.strings in the es.lproj folder.

Answer 1

Adding CFBundleLocalizations works, however, you still need to manually add, or drag, the InfoPlist.strings files to the Xcode project to work.

I found this Cordova plugin completely takes over the process, https://github.com/kelvinhokk/cordova-plugin-localization-strings. So I can simply run cordova prepare and it is all set.

Answer 2

How to use iOS device settings for language:

It seems CFBundleDevelopmentRegion is always set to en_US by default (or maybe this is because I build on a laptop that has these settings) thus showing context menus, file upload dialog etc in English.

I found that setting CFBundleDevelopmentRegion to empty uses device settings for language.

Note that some plugins seem to set language, so if you cannot get it to work, check your plugins. This was tested in Ionic 5 / Angular / Cordova.

Put this in your config.xml ios section:

    <platform name="ios">
       <config-file parent="CFBundleDevelopmentRegion" target="*-Info.plist">
            <array>
                <string />
            </array>
        </config-file>
    </platform>

Thanks to @maximillion-bartango answer for putting me on the right track with this

Answer 3

You can do this within the app code itself using cordova-custom-config:

<custom-config-file parent="CFBundleLocalizations" target="*-Info.plist" mode="replace">
    <array>
        <string>en</string>
    </array>
</custom-config-file>

Answer 4

Go to the .plist file of any plugin and comment out:

<!-- <key>CFBundleDevelopmentRegion</key>
<string>nl</string> -->

Then the plugin will use the systems set language and region. This is likely the most practical solution for a lot of cases.

Answer 5

I post the way that i worked:

1. Find in the x-code the folder Resources (is placed in root)
2. Select the folder Resources
3. Then press the main menu File->New->File...
4. Select in section "Resource" Strings File and press Next
5. Then in Save As field write InfoPlist ONLY ("I" capital and "P" capital)
6. Then press Create
7. Then select the file InfoPlist.strings that created in Resources folder and press in the right menu the button "Localize"
8. Then you Select the Project from the Project Navigator and select the The project from project list
9. In the info tab at the bottom you can as many as language you want (There is in section Localizations)
10. The language you can see in Resources Folder
11. To localize the values ("key") from info.plist file you can open with a text editor and get all the keys you want to localize

12. You write any key as the example in any InfoPlist.strings like the above example

    "NSLocationAlwaysAndWhenInUseUsageDescription"="blabla";
    
    "NSLocationAlwaysUsageDescription"="blabla2";
    

That's all work and you have localize your info.plist file!

Answer 6

It is also possible to do this without a hook or plugin by using <edit-config> in your config.xml. Here is an example:

<platform name="ios">
  <edit-config target="CFBundleLocalizations" file="*-Info.plist" mode="overwrite">
    <array>
      <string>en</string>
      <string>es</string>
    </array>
  </edit-config>
</platform>

Usage of <edit-config> in config.xml was introduced in Cordova 6.4.0.

Answer 7

The preferred answer is correct but has the drawback to be native, i. e. you have to modify the Info*.plist after cordova prepare.

If you want to stick with the Cordova's style (which i recommend), you can use a hook or a plugin for this.

I did it with a plugin because a plugin has (from scratch) the ability to modify the native configuration's files (AndroidManifest.xml or Info*.plist).

See https://stackoverflow.com/a/27947343/2728710

What I've done :

• make a new specific plugin name "cordova-plugin-config-ios"

localPlugins/cordova-plugin-config-ios/plugin.xml

<?xml version="1.0" encoding="UTF-8"?>
<plugin id="cordova-plugin-config-ios" version="0.0.1" xmlns="http://apache.org/cordova/ns/plugins/1.0">
    <name>CRM Factory Cordova Localization iOS Plugin</name>
    <description>A label translate example</description>
    <!-- ios -->
    <platform name="ios">
        <config-file target="*-Info.plist" parent="CFBundleDevelopmentRegion">
            <array>
                <string>French</string>
            </array>
        </config-file>
        <config-file target="*-Info.plist" parent="CFBundleLocalizations">
            <array>
                <string>fr_FR</string>
            </array>
        </config-file>
    </platform>
</plugin>

• make a hook add-local-plugins.sh. In it, install the specific plugin made

add-local-plugins.sh

echo "Install specific plugin for modify Info*.plist"
cordova plugin add cordova-plugin-config-ios --searchpath ${projectDir}/localPlugins/cordova-plugin-config-ios

• call the hook via config.xml

config.xml

<hook src="hooks/add-local-plugins.sh" type="before_prepare" />

In my case, the hook was not mandatory but I like the freedom brought by it and to be able to log what the program did (echo part).

Answer 8

Finally I figured out after some digging and with the help of a guy that greatly assisted me in other forum, you have to put this in the project .plist this:

<key>CFBundleLocalizations</key>
<array>
    <string>es</string>
</array>

Each string is the language you want to localize.