# General Translation React SDKs (gt-react, gt-next): React Native のセットアップ
URL: https://generaltranslation.com/ja/docs/react/react-native/setup.mdx
---

title: React Native のセットアップ
description: React Native アプリで General Translation を初期化し、プロバイダー を追加して、Expo と bare React Native CLI の両方で翻訳を読み込みます。

---

`gt-react-native` は、アプリのエントリポイントでセットアップします。モジュールレベルで [`initializeGT`](/docs/node/reference/functions/initialize-gt) を 1 回呼び出し、その後アプリを [`<GTProvider>`](/docs/react/reference/components/gt-provider) でラップします。Web 向けパッケージとは異なり、プロバイダー が翻訳を自動で読み込むため、`translations` prop を渡す必要はありません。また、`locale` はデフォルトでデバイスから取得されます。

このページでは、セットアップのうち React Native 固有の部分を説明します。インストールや CLI を含む一連の手順については、[React Native Quickstart](/docs/react/react-native-quickstart) を参照してください。セットアップが依存する polyfill plugin については、[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` を一度だけ呼び出します。`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` は、他のフレームワークと同じロケールおよび delivery オプションを受け取ります。詳しくは、[設定リファレンス](/docs/react/reference/config#initialization) を参照してください。`gt.config.json` は自動では読み込まれないため、インポートして呼び出し時にスプレッドしてください。

*注: Expo では、公開する環境変数には `EXPO_PUBLIC_` プレフィックスを付ける必要があります。アプリバンドルに本番用の API キーを絶対に含めないでください。*

## プロバイダーを追加する [#provider]

アプリを `<GTProvider>` でラップします。React Native では、プロバイダーがアクティブなロケールの翻訳を内部で読み込み、ロケールの状態を管理するため、`translations` prop は必要ありません。また、デフォルトではデバイスから `locale` を判定します (必要に応じて `locale` を上書きして渡すこともできます。詳しくは下記を参照してください) 。翻訳の読み込み中はローディング用のフォールバックを表示します。これをカスタマイズするには、`fallback` prop を渡してください。

```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` props も受け付けます。

## 翻訳を読み込む [#load-translations]

React Native のバンドラーである Metro は動的インポートをサポートしていないため、各ロケールを静的な `require` 呼び出しで対応する翻訳ファイルにマッピングしてください。これらのファイルは、`npx gt translate` を実行すると CLI によって生成されます。

```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">
    ルートレイアウトのモジュールレベルで初期化し、その後プロバイダーをレンダリングします。

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

どちらのエントリポイントでも、`babel.config.js` で [polyfill plugin](/docs/react/react-native/plugin) を設定する必要があります。そうしないと、`gt-react-native` が依存する `Intl` API が使えません。