# General Translation React SDKs (gt-react, gt-next): Настройка React Native
URL: https://generaltranslation.com/ru/docs/react/react-native/setup.mdx
---

title: Настройка React Native
description: Инициализируйте General Translation в приложении React Native, добавьте провайдер и загружайте переводы как в Expo, так и в bare React Native CLI.

---

`gt-react-native` настраивается в entry point вашего приложения: один раз вызовите [`initializeGT`](/docs/node/reference/functions/initialize-gt) на уровне модуля, а затем оберните приложение в [`<GTProvider>`](/docs/react/reference/components/gt-provider). В отличие от веб-пакетов, провайдер сам загружает переводы, поэтому передавать ему prop `translations` не нужно, а `locale` по умолчанию определяется по устройству.

На этой странице рассматриваются части setup, относящиеся именно к React Native. Полное пошаговое руководство, включая установку и CLI, см. в [React Native Quickstart](/docs/react/react-native-quickstart). О polyfill-плагине, от которого зависит setup, см. в разделе [Plugin](/docs/react/react-native/plugin).

*Предупреждение: `gt-react-native` включает нативный модуль, поэтому Expo Go не поддерживается — используйте development build (`npx expo run:ios` / `run:android`). В bare React Native CLI после установки выполните `cd ios && pod install`.*

## Инициализируйте General Translation [#initialize]

Вызовите `initializeGT` один раз на уровне модуля в вашем entry file, до рендеринга приложения. Разверните содержимое `gt.config.json` и передайте функцию [`loadTranslations`](/docs/react/reference/functions/load-translations). Добавьте `projectId` и `devApiKey`, чтобы включить перевод по запросу в процессе разработки.

```tsx
import { initializeGT } from 'gt-react-native';
import gtConfig from './gt.config.json';
import { loadTranslations } from './loadTranslations';

// Инициализируется один раз, на уровне модуля
initializeGT({
  ...gtConfig,
  loadTranslations,
  projectId: process.env.EXPO_PUBLIC_GT_PROJECT_ID,
  devApiKey: process.env.EXPO_PUBLIC_GT_DEV_API_KEY,
});
```

`initializeGT` принимает те же параметры `locale` и `delivery`, что и другие фреймворки — см. [справочник по конфигурации](/docs/react/reference/config#initialization). `gt.config.json` не считывается автоматически, поэтому импортируйте его и передайте в вызов через оператор расширения.

*Примечание: в Expo публичные переменные окружения должны иметь префикс `EXPO_PUBLIC_`. Никогда не включайте production API key в бандл приложения.*

## Добавьте провайдер [#provider]

Оберните приложение в `<GTProvider>`. В React Native провайдер сам загружает переводы для активной локали и управляет состоянием локали, поэтому проп `translations` ему не нужен, а значение `locale` по умолчанию определяется по устройству (при этом вы всё равно можете передать необязательное переопределение `locale` — см. ниже). Пока переводы загружаются, он отображает резервный контент; чтобы настроить его, передайте проп `fallback`.

```tsx title="App.tsx"
import { GTProvider } from 'gt-react-native';
import Home from './src/Home';

export default function App() {
  return (
    <GTProvider>
      <Home />
    </GTProvider>
  );
}
```

Провайдер также принимает необязательные пропсы `locale`, `region` и `enableI18n`, чтобы переопределить значения, которые в противном случае определялись бы по данным устройства.

## Загрузка переводов [#load-translations]

Metro, сборщик React Native, не поддерживает динамические импорты, поэтому свяжите каждую локаль с соответствующим файлом перевода с помощью статических вызовов `require`. CLI генерирует эти файлы при запуске `npx gt translate`.

```ts title="loadTranslations.ts"
const translations: Record<string, unknown> = {
  es: require('./src/_gt/es.json'),
  fr: require('./src/_gt/fr.json'),
  ja: require('./src/_gt/ja.json'),
};

export function loadTranslations(locale: string) {
  return translations[locale] ?? {};
}
```

## Точки входа [#entry-points]

Где именно вы вызываете `initializeGT`, зависит от типа проекта.

<Tabs items={['Expo', 'React Native CLI']}>
  <Tab value="Expo">
    Выполните инициализацию в корневом layout на уровне модуля, а затем отрисуйте провайдер.

    ```tsx title="app/_layout.tsx"
    import { Slot } from 'expo-router';
    import { GTProvider, initializeGT } from 'gt-react-native';
    import gtConfig from '../gt.config.json';
    import { loadTranslations } from '../loadTranslations';

    initializeGT({
      ...gtConfig,
      loadTranslations,
      projectId: process.env.EXPO_PUBLIC_GT_PROJECT_ID,
      devApiKey: process.env.EXPO_PUBLIC_GT_DEV_API_KEY,
    });

    export default function RootLayout() {
      return (
        <GTProvider>
          <Slot />
        </GTProvider>
      );
    }
    ```
  </Tab>

  <Tab value="React Native CLI">
    Выполните инициализацию в `index.js` до регистрации приложения, а провайдер добавьте в `App.tsx`.

    ```js title="index.js"
    import { AppRegistry } from 'react-native';
    import { initializeGT } from 'gt-react-native';
    import App from './App';
    import { name as appName } from './app.json';
    import gtConfig from './gt.config.json';
    import { loadTranslations } from './loadTranslations';

    initializeGT({ ...gtConfig, loadTranslations });

    AppRegistry.registerComponent(appName, () => App);
    ```

    ```tsx title="App.tsx"
    import { GTProvider } from 'gt-react-native';
    import Home from './src/Home';

    export default function App() {
      return (
        <GTProvider>
          <Home />
        </GTProvider>
      );
    }
    ```
  </Tab>
</Tabs>

Для обеих точек входа также нужно настроить [polyfill-плагин](/docs/react/react-native/plugin) в `babel.config.js`, иначе API `Intl`, от которых зависит `gt-react-native`, будут недоступны.