Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to localize Cordova iOS projects?

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.

context menu

like image 334
xmarston Avatar asked Oct 12 '14 11:10

xmarston


5 Answers

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.

like image 69
xmarston Avatar answered Oct 13 '22 07:10

xmarston


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.

like image 44
Dexter Avatar answered Oct 13 '22 07:10

Dexter


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).

like image 43
pom421 Avatar answered Oct 13 '22 09:10

pom421


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.

like image 41
Maximillion Bartango Avatar answered Oct 13 '22 07:10

Maximillion Bartango


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

like image 1
maxfloden Avatar answered Oct 13 '22 08:10

maxfloden