Using Editmode for React Native and i18n
Working with Editmode React Native and i18n
Our Editmode React Native library lets you easily set up internalization and localization (i18n) for the Editmode text content pieces within your React Native app with minimal configuration out of the gate.
We will explore a use case with i18n-js and react-native-localize to shed more light on this.
Step 1
Create a Javascript file (with any name) in the src directory of your project - this is where all of your i18n configuration will reside. For the sake of this guide, we will call this file i18n.js.
Step 2
Create a translate
function within the i18n.js file - translate
will handle all of your text translations using the i18n-js package method, t
. For performance purposes, this will be a memoized function.
Step 3
Create a hook (we will call it usei18nConfig
within the same file) that will retrieve your text content pieces in one fetch request behind the scenes using our useText
hook, and then sets them to the translation options for the i18n-js package.
useText
is a hook from our React Native library that fetches the text chunks in your project for your i18n computation - it takes your Editmode project ID as a parameter and returns a JSON object with keys mapped to your Editmode text content keys and their corresponding values as the actual content pieces (short text or long text).
Optional: You may also define an object - with the same key-value format as what is returned by useTextHook
- for your fallback content and conditionally render it on line 17 above this way:
Step 4
Once this is done, go to the top-level component file (this is typically App.js), install and import editmode-react-native, import the useI18nConfig
hook you created earlier, and initialize it before render. This will inject the translation options and i18n configurations into your app's global environment.
Step 5: The Final Piece
With all the steps above completed, you can now import and call the translate
function (with any of your text content keys as a parameter) within any component or screen in your app to get the computed string.
Note: This assumes that you've created a text content piece with cardName as a content key.
Last updated