# Using Editmode for React Native and i18n

{% embed url="<https://snack.expo.io/@editmode/i18n-demo>" %}

## **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.&#x20;

We will explore a use case with [i18n-js](https://www.npmjs.com/package/i18n-js) and [react-native-localize](https://www.npmjs.com/package/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.

{% code title="i18n.js" %}

```javascript
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,
);
```

{% endcode %}

**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](https://www.npmjs.com/package/i18n-js) package.

{% code title="i18n.js" %}

```javascript
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;
};

```

{% endcode %}

`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).&#x20;

**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:&#x20;

```javascript
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.&#x20;

{% code title="App.js" %}

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

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

{% endcode %}

**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.&#x20;

```javascript
  <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.