> ## Documentation Index
> Fetch the complete documentation index at: https://docs.shipmobilefast.com/llms.txt
> Use this file to discover all available pages before exploring further.

# i18n

> Internationalize your app

<Frame>
  <img src="https://mintcdn.com/shipmobilefast-51a499dc/rNBXOQ08cKXtmr3A/images/header/i18n.png?fit=max&auto=format&n=rNBXOQ08cKXtmr3A&q=85&s=65f2527759b992ad7a744fa33694528a" alt="i18n" className="w-full h-full rounded-xl" width="700" height="320" data-path="images/header/i18n.png" />
</Frame>

<Tip>
  I am using `i18next` and `react-i18next` to internationalize my app.
</Tip>

### Simple explanation:

<Info>
  If you device language is Turkish and your app has Turkish translations, it will show the translations for the Turkish. Otherwise, it will show the translations for English.
</Info>

I mean, default version is English.

<Steps>
  <Step>
    First, go to the `i18n` folder. Then, open the `i18n/index.ts` file.
  </Step>

  <Step>
    Make sure you have the translations for the languages you are using.
    Like below:

    ```javascript i18n/index.ts theme={null}
    const resources = {
    tr: { translation: translationTr },
    en: { translation: translationEn },
    de: { translation: translationDe },
    es: { translation: translationEs },
    };
    ```
  </Step>

  <Step>
    Important thing is you should have the translations for the languages you are using.
  </Step>

  <Step>
    Define your translations for the languages you are using. Like below:

    ```javascript i18n/locales/en-US.ts {3} theme={null}
    {
    "language": "...",
     "success": "Success",
    ... 
    }
    ```
  </Step>

  <Step>
    Finally, you can use the `t` function to get the translations. Like below:

    ```javascript component.tsx {1} theme={null}
    const { t } = useTranslation();

    return <Text>{t('success')}</Text>
    ```
  </Step>
</Steps>