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.

import i18n from 'i18n-js';
import memoize from 'lodash.memoize';

export const translate = memoize(
  (key, config) => i18n.t(key, config),
  (key, config?) =>
    config ? key + JSON.stringify(config) : key,
);

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.

import i18n from 'i18n-js';
import memoize from 'lodash.memoize';
import * as RNLocalize from 'react-native-localize';
import { useText } from 'editmode-react-native';

export const translate = memoize(
  (key, config) => i18n.t(key, config),
  (key, config?) =>
    config ? key + JSON.stringify(config) : key,
);

export const useI18nConfig = () => {
  const editmodeProjectID = 'prj_YYIeXisL...';
  const en_chunks = useText(editmodeProjectID);
  const fallback = { languageTag: 'en' };
  const translationGetters = {
    en: () => en_chunks,
  };
  const { languageTag } =
    RNLocalize.findBestAvailableLanguage(Object.keys(translationGetters)) || fallback;
  str.cache.clear();
  i18n.translations = { [languageTag]: translationGetters[languageTag]() };
  i18n.locale = languageTag;
  return;
};

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:

en: () => en_chunks || fallback_content_object

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.

import { Editmode } from "editmode-react-native";
import { useI18nConfig } from ...

export default function App() {
  useI18nConfig()
  
    return (
      <Editmode projectId={project_id}>
        <App />
      </Editmode>
     )
   }  
);

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.

  <GenericComponentList
      type={listType}
      data={data}
      cardLabel={translate('cardName')}
      onRefresh={onRefresh}
    />

Note: This assumes that you've created a text content piece with cardName as a content key.