# react-native: Cambiare lingua
URL: https://generaltranslation.com/it/docs/react-native/guides/languages.mdx
---
title: Cambiare lingua
description: Come configurare e cambiare lingua nella tua app React Native
---

{/* GENERATO AUTOMATICAMENTE: non modificare direttamente. Modifica invece il template in content/docs-templates/. */}

Il cambio di lingua consente agli utenti di modificare l'impostazione regionale preferita per i contenuti della tua applicazione. GT React Native offre diversi approcci, dal semplice cambio programmatico ai componenti UI predefiniti per creare selettori di lingua personalizzati.


## Metodi disponibili

* **Programmatico**: Hook [`useSetLocale`](/docs/react-native/api/helpers/use-set-locale) per controlli personalizzati
* **UI predefinita**: componente [`<LocaleSelector>`](/docs/react-native/api/components/locale-selector) con menu a discesa
* **UI personalizzata**: Hook [`useLocaleSelector`](/docs/react-native/api/helpers/use-locale-selector) per creare selettori personalizzati

## Uso dell&#39;Hook `useSetLocale`

L&#39;Hook [`useSetLocale`](/docs/react-native/api/helpers/use-set-locale) ti consente di cambiare la lingua dell&#39;app:

```tsx
import { useSetLocale } from 'gt-react-native';

export default function MyComponent() {
  const setLocale = useSetLocale();

  return <button onClick={() => setLocale('en')}>Set Locale</button>;
}
```

Ti basta passare, come argomento della funzione restituita dall’Hook, l’impostazione regionale a cui vuoi passare.


## Utilizzare il componente `<LocaleSelector>`

Il componente [`<LocaleSelector>`](/docs/react-native/api/components/locale-selector) offre un menu a discesa pronto all&#39;uso che mostra automaticamente tutte le impostazioni regionali configurate:

```tsx
import { LocaleSelector } from 'gt-react-native';

export default function MyComponent() {
  return <LocaleSelector />;
}
```

Questo componente:

* Mostra tutte le impostazioni regionali configurate per il tuo progetto
* Visualizza le impostazioni regionali con i nomi delle lingue nella loro forma nativa
* Gestisce la logica di cambio
* Mantiene lo stato della selezione corrente


## Utilizzo dell&#39;Hook `useLocaleSelector`

Se vuoi creare un selettore di impostazione regionale personalizzato, usa [`useLocaleSelector`](/docs/react-native/api/helpers/use-locale-selector):

```tsx
import { useLocaleSelector } from 'gt-react-native';

function CustomLocaleSelector() {
  const { 
    locale,              // Impostazione regionale attiva corrente (es. 'en', 'es')
    locales,             // Array delle impostazioni regionali supportate dal progetto ['en', 'es', 'fr']
    setLocale,           // Funzione per cambiare l'impostazione regionale: setLocale('es')
    getLocaleProperties  // Funzione per ottenere le informazioni di visualizzazione di un'impostazione regionale
  } = useLocaleSelector();
  
  if (!locales?.length) return null;
  
  return (
    <select 
      value={locale || ''} 
      onChange={(e) => setLocale(e.target.value)}
    >
      {locales.map((loc) => {
        const props = getLocaleProperties(loc);
        return (
          <option key={loc} value={loc}>
            {props.nativeNameWithRegionCode} {/* es. "English (US)", "Español (ES)" */}
          </option>
        );
      })}
    </select>
  );
}
```


## Note importanti

### Requisito di GTProvider

I componenti per il cambio di lingua devono essere utilizzati all&#39;interno di un [`<GTProvider>`](/docs/react-native/api/components/gtprovider):

```tsx
// ✅ Corretto
<GTProvider>
  <LanguageSwitcher />
</GTProvider>

// ❌ Errato - fuori dal provider
<LanguageSwitcher />
```


## Prossimi passaggi

* [Guida ai contenuti dinamici](/docs/key-concepts/dynamic-content) - Traduzione dei contenuti a runtime
* Riferimenti API:
  * [`useSetLocale` Hook](/docs/react-native/api/helpers/use-set-locale)
  * [Componente `<LocaleSelector>`](/docs/react-native/api/components/locale-selector)
  * [`useLocaleSelector` Hook](/docs/react-native/api/helpers/use-locale-selector)