# General Translation React SDKs (gt-react, gt-next): Configura React Native
URL: https://generaltranslation.com/it/docs/react/react-native/setup.mdx
---
title: Configura React Native
description: Inizializza General Translation in un'app React Native, aggiungi il provider e carica le traduzioni, sia per Expo sia per la versione bare della React Native CLI.

---

`gt-react-native` si configura nel punto di ingresso della tua app: chiami [`initializeGT`](/docs/node/reference/functions/initialize-gt) una volta a livello di modulo, quindi racchiudi la tua app in [`<GTProvider>`](/docs/react/reference/components/gt-provider). A differenza dei pacchetti web, il provider carica direttamente le traduzioni, quindi non devi passargli una prop `translations` e usa per impostazione predefinita l&#39;`impostazione regionale` del dispositivo.

Questa pagina copre gli aspetti della configurazione specifici di React Native. Per la procedura completa passo dopo passo, inclusi installazione e CLI, segui la [Quickstart di React Native](/docs/react/react-native-quickstart). Per il plugin polyfill da cui dipende la configurazione, vedi [Plugin](/docs/react/react-native/plugin).

*Avvertenza: `gt-react-native` include un modulo nativo, quindi Expo Go non è supportato: esegui una development build (`npx expo run:ios` / `run:android`). Con la versione bare della React Native CLI, esegui `cd ios && pod install` dopo l&#39;installazione.*

## Inizializza General Translation [#initialize]

Chiama `initializeGT` una sola volta, a livello di modulo del file di ingresso, prima del rendering dell&#39;app. Espandi `gt.config.json` e passa una funzione [`loadTranslations`](/docs/react/reference/functions/load-translations). Aggiungi `projectId` e `devApiKey` per abilitare la traduzione su richiesta durante lo sviluppo.

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

// Inizializza una volta sola, a livello di modulo
initializeGT({
  ...gtConfig,
  loadTranslations,
  projectId: process.env.EXPO_PUBLIC_GT_PROJECT_ID,
  devApiKey: process.env.EXPO_PUBLIC_GT_DEV_API_KEY,
});
```

`initializeGT` accetta le stesse opzioni di impostazione regionale e di delivery degli altri framework: vedi il [riferimento alla configurazione](/docs/react/reference/config#initialization). `gt.config.json` non viene letto automaticamente, quindi importalo e includilo nella chiamata con lo spread.

*Nota: in Expo, le variabili d&#39;ambiente pubbliche devono avere il prefisso `EXPO_PUBLIC_`. Non esporre mai una chiave API di produzione nel bundle dell&#39;app.*

## Aggiungi il provider [#provider]

Avvolgi la tua app in `<GTProvider>`. In React Native, il provider carica internamente le traduzioni dell&#39;impostazione regionale attiva e gestisce lo stato dell&#39;impostazione regionale, quindi non richiede una prop `translations` e, per impostazione predefinita, determina `locale` dal dispositivo (puoi comunque passare un override facoltativo di `locale` — vedi sotto). Mostra un fallback durante il caricamento delle traduzioni; passa una prop `fallback` per personalizzarlo.

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

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

Il provider accetta anche i props facoltativi `locale`, `region` e `enableI18n` per sovrascrivere i valori che altrimenti ricaverebbe dal dispositivo.

## Caricare le traduzioni [#load-translations]

Metro, il bundler di React Native, non supporta gli import dinamici, quindi devi associare ogni impostazione regionale al relativo file di traduzione con chiamate `require` statiche. La CLI genera questi file quando esegui `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] ?? {};
}
```

## Punti di ingresso [#entry-points]

Il punto in cui chiami `initializeGT` dipende dal tipo di progetto.

<Tabs items={['Expo', 'React Native CLI']}>
  <Tab value="Expo">
    Inizializza nel root layout, a livello di modulo, quindi renderizza il provider.

    ```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">
    Inizializza in `index.js`, prima che l&#39;app venga registrata, e aggiungi il provider in `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>

Entrambi i punti di ingresso richiedono anche la configurazione del [plugin polyfill](/docs/react/react-native/plugin) in `babel.config.js`, altrimenti mancheranno le API `Intl` da cui `gt-react-native` dipende.