If you are a React Native developer, you're probably used to handle translations in your app through useful libraries such as i18n-js or react-native-localize. Those two tools will take care of providing your core app with translations.

However, you will reach a pain point the day you want to modify some native messages, which are not customizable through javascript code.

For instance, if your app is using the camera, you will have to show your users a permission pop-up to allow the app accessing the camera:

• On Android, the answer is somehow simple: You don't have the ability to customize the permission message. The phone language will be used to display a default message.
• On iOS, you will have to provide your app with a custom explanation message.

Set-up languages in your Xcode project

This is a key step in the process, as iOS won't be aware of your current languages if you do not let it know which languages you plan to use.

Click on the root directory of your project explorer, and go into the "info" tab of the project.

Warning: In XCode, by default, you are in the target view of the project. You need to select the project view by using the following menu:

And make sure to select the "Project" view:

Then, you can easily add your languages by going into the "info" tab and using the + button under "Localizations":

Create and localize your InfoPlist.strings file

Now that Xcode is aware of the languages we want to use, it is a good time to create our translations files. We will localize the information property list file (Info.plist) which contains, among other things, the custom messages we want to use.

This step aims at providing the iOS app with Info.plist key/values that will be used to overwrite the default values defined in the Info.plist.

Create a new strings file in the "MyProject" main folder (this folder also contains the original Info.plist) : File > New > File > Resource > Strings File

Once your file is created, click on localize to generate one file per language your app will use:

You may need to manually check all the languages you want to use:

Now you can fill one Infoplist.strings per language, using the keys you would use in the Info.plist file. For example, below, we use a translation for the key NSCameraUsageDescription which is used to display a custom permission message to the user when the app first wants to access the camera:

You're now all set to export your international react-native app, including the native messages translated!