Setting up FBT in React Native

[kosalamoon]

Hey everyone.

I have some questions regarding this library. I tried to setup this on a react native project and after setting it up I faced some issues. here's the steps that I have followed.

I followed this guideline - https://facebook.github.io/fbt/docs/getting_started_react_native

• I installed all the necessary npm packages

• I created the .babelrc file with that mentioned content

• I updated the MainActivity.java and AndroidManifest.xml files in android folder as mentioned in the docs

• then I copied the i18n folder to the project root

• I haven't touched the IOS part yet.

• also I added those npm scripts to the package.json file. in addition to these scripts

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

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

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

  I added this script according the sample app as well
  "generate-android-fbt": "babel-node i18n/scripts/generate-android-localizables-executor.js"

after everything has done I updated one of my component to use this library like this

import fbt from 'fbt';

<Text>
   <fbt desc="Title">A List of Items</fbt>
</Text>

<Text>
   { fbt('Hello there', 'Greeting text') }
</Text>

After that I ran the scripts 1 by 1 sequentially to generate the translation files.

However when I take the translated files there wasn't any translation but the same language as I used in the component.
here's the file outputs after I ran those scripts with above texts

i18n/fbt/.source_strings.json

{
  "phrases": [
    {
      "hashToText": {"7a02e13937e70d0515864004d2ee54ee": "A List of Items"},
      "filepath": "src/components/primitive/SocialButton.tsx",
      "desc": "Title",
      "type": "text",
      "jsfbt": "A List of Items",
     ..............
    },
    {
      "hashToText": {"91cde9667344852d5a963fe2d7020152": "Hello there"},
      "filepath": "src/components/primitive/SocialButton.tsx",
      "desc": "Greeting text",
      "type": "text",
      "jsfbt": "Hello there",
     .................
    }
  ],
  "childParentMappings": {}
}

i18n/fbt/.src_manifest.json

{"i18n/fbt/.enum_manifest.json": ["src/components/primitive/SocialButton.tsx"]}

i18n/fbt/translatedFbts.json

{
  "es_ES": {"4jQu0": "A List of Items", "FpWpR": "Hello there"}
}

android/app/src/main/res/raw-es-rES/localizable.json

{"4jQu0":"\"A List of Items\"","FpWpR":"\"Hello there\""}

but when I run with the texts that are in the demo app like mentioned in below it translates correctly

<Text style={styles.sectionTitle}>
   <fbt desc="Section title">Step One</fbt>
</Text>
<Text style={styles.sectionDescription}>
   <fbt desc="Section Description">
      Edit App.js to change this screen and then come back to see your edits.
   </fbt>
</Text>

after that I looked at this i18n/fbt/translationScriptInput/es_es.json file and it contains some kind of translation. so my question is do we have to provide the translations like that or it is automatically getting translation from somewhere?

and also if we want to support multiple languages how do we proceed with the current scenario ?

sorry for this big Q&A but I wanted to mention the steps that I followed to get here

Thanks !

[jrwats]

Hi @kosalamoon,
fbt doesn't provide translations, but merely a means of extracting your translatable texts, processing translations (that YOU provide to it somehow) and creating translated payloads for the UI. Let me know if you need any clarifications on that.

The translations provided in the demo represent input you need to provide: https://github.com/facebook/fbt/blob/main/demo-app/translations/es_la.json

When you run the translation script, the output is the generated tables.