Getting Started with React Native

Try the Demo

Check out our React Native Demo app. Check out our FBT Native Module on NPM.

Adding FBT and its dependencies

• Dependencies

  • yarn add babel-plugin-fbt babel-plugin-fbt-runtime fbt react-native-fbt '@fbtjs/default-collection-transform'

  • yarn add babel-preset-react-native shelljs fb-tiger-hash --dev

  • Make sure your fbt has a version greater than "^0.10.0"

• Create a .babelrc or babel.config.js file to add the transformation plugins with the following content:

{

"plugins": ["babel-plugin-fbt", "babel-plugin-fbt-runtime"],

"presets": ["module:metro-react-native-babel-preset"]

}

Android

• Update your Android main activity so that the app reloads whenever the user changes the locale
  • You can find an example in the rn-demo-app
• Add "locale|layoutDirection" in android:configChanges in the AndroidManifest.xml. This will restart the app whenever the language of the device changes and will load the correct translations.

android:configChanges="keyboard|keyboardHidden|orientation|screenSize|screenLayout|layoutDirection|locale"

• Copy the files in the i18n folder of the demo app into your app. Find an explanation of each file below:

NativeFbtModule.js

• TurboModule specification enabling usage in JavaScript of the Android Native Module

FbtI18nNativeAssets.js

• JavaScript wrapper around the native module
• Implements a local cache for translations to avoid unnecessary trips to the native side
• The Android Native Module in the react-native-fbt package, is used to read translations from Android resources. This module reads translations from android/raw-xx-rXX/localizable.json files where xx/XX are the languageCode-countryCode respectively (more on Android resources naming here) with the following structure:

{ "2keTtB": "\"Escanear código QR\"", "24DJ19": "\"Subir\"", }

The hash values are the jenkins' hashes generated by the collectFbt script. Notice the escaped quotes in the translated string since this file will be converted into JSON by your app.

getTranslatedInput.js

• React Native specific hook to tell the FBT package how to load strings in your application

fbtInit.js

• Injects the getTranslatedInput hook into FBT
• This file must be imported in your app's entry file, before any other imports, to make FBT available for any static strings you may need to translate in your app. See an example in our index.js

iOS

• After adding the native module, run cd ios/ && pod install to add the new module to your app
• Add the languages you want your app to support
  • Name the files Localizable.strings as this is what the native module will look for when looking for translations

Note: Please, remember you need to escape your quotes when writing your translation strings on iOS. See an example in our test app.

Add the FBT scripts in your package.json file

• Add the manifest script call in package.json. This script looks for all the files that import fbt and creates the input for the collectFbt script below:

"manifest": "fbt-manifest --src src/ --enum-manifest i18n/fbt/.enum_manifest.json --src-manifest i18n/fbt/.src_manifest.json"

• Add the collectFbt script call in package.json. This script collects all fbt-wrapped strings into a file for you to translate.

"collect-fbts": "fbt-collect --hash-module fb-tiger-hash --react-native-mode --manifest < i18n/fbt/.src_manifest.json > i18n/fbt/.source_strings.json"

• Add the translate script call in package.json. This script should be used after all strings are translated. It'll generate a single file with all translations that we then need to translate into Android specific localizable.json files. See the input format here.

"translate-fbts": "fbt-translate --jenkins --source-strings i18n/fbt/.source_strings.json --translations i18n/fbt/translationScriptInput/*.json > i18n/fbt/translatedFbts.json"

• Generate localizable.json files for each language and add them to the corresponding res/raw-xx-rXX folder (xx is the ISO 2 Letter Language Codes and XX is the ISO 2 Letter Country Code). You can find a helper script in our test app: generate-android-localizables.js. This script takes in the translation script output and generates localizable.json files in the android/res folder:

res

├── raw

│ └── localizable.json

├── raw-es-rES

│ └── localizable.json

└── values

├── strings.xml

└── styles.xml

Notes

• The generate-android-localizable.js script creates the main res/raw/localizable.json with the content: {}. This empty file is necessary so that Android generates the R.raw.localizable resource. If you don’t use the script, please, create the file res/raw/localizable.json manually with an empty json as mentioned before. You can add this as part of your scripts thanks to a GitHub collaboration using the generate-android-localizables-executor.js
• There's a known bug when using fbt in React Native components' properties. The solution is to call .toString() after the fbt() call:

<TextInput placeholder={fbt("Text", "Description").toString()} />