# react-native: Changer de langue
URL: https://generaltranslation.com/fr/docs/react-native/guides/languages.mdx
---
title: Changer de langue
description: Comment configurer et changer de langue dans votre application React Native
---

{/* GÉNÉRÉ AUTOMATIQUEMENT : ne modifiez pas ce fichier directement. Modifiez plutôt le modèle dans content/docs-templates/. */}

Le changement de langue permet aux utilisateurs de modifier le paramètre régional préféré du contenu de votre application. GT React Native propose plusieurs approches, du simple changement programmatique aux composants d’interface prêts à l’emploi pour créer des sélecteurs de langue personnalisés.


## Méthodes disponibles

* **Par code** : hook [`useSetLocale`](/docs/react-native/api/helpers/use-set-locale) pour des contrôles personnalisés
* **Interface prête à l’emploi** : composant [`<LocaleSelector>`](/docs/react-native/api/components/locale-selector) avec liste déroulante
* **Interface personnalisée** : hook [`useLocaleSelector`](/docs/react-native/api/helpers/use-locale-selector) pour créer des sélecteurs personnalisés

## Utilisation du hook `useSetLocale`

Le hook [`useSetLocale`](/docs/react-native/api/helpers/use-set-locale) vous permet de changer la langue de votre application :

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

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

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

Il suffit de passer en argument à la fonction renvoyée par le hook le paramètre régional vers lequel vous souhaitez basculer.


## Utiliser le composant `<LocaleSelector>`

Le composant [`<LocaleSelector>`](/docs/react-native/api/components/locale-selector) fournit une liste déroulante prête à l’emploi qui affiche automatiquement tous les paramètres régionaux configurés :

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

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

Ce composant effectue automatiquement les opérations suivantes :

* Affiche tous les paramètres régionaux configurés pour votre projet
* Affiche les paramètres régionaux dans le nom natif de leur langue
* Gère la logique de changement
* Conserve l’état de la sélection actuelle


## Utiliser le hook `useLocaleSelector`

Si vous souhaitez créer votre propre sélecteur de paramètre régional personnalisé, utilisez [`useLocaleSelector`](/docs/react-native/api/helpers/use-locale-selector) :

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

function CustomLocaleSelector() {
  const { 
    locale,              // Paramètre régional actif (ex. : 'en', 'es')
    locales,             // Tableau des paramètres régionaux supportés par votre projet ['en', 'es', 'fr']
    setLocale,           // Fonction pour changer le paramètre régional : setLocale('es')
    getLocaleProperties  // Fonction pour obtenir les informations d'affichage d'un paramètre régional
  } = 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} {/* ex. : "English (US)", "Español (ES)" */}
          </option>
        );
      })}
    </select>
  );
}
```


## Remarques importantes

### Prérequis : GTProvider

Les composants de changement de langue doivent être utilisés au sein d’un [`<GTProvider>`](/docs/react-native/api/components/gtprovider) :

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

// ❌ Incorrect - en dehors du provider
<LanguageSwitcher />
```


## Étapes suivantes

* [Guide sur le contenu dynamique](/docs/key-concepts/dynamic-content) - Traduction du contenu en exécution
* Références de l’API :
  * [Hook `useSetLocale`](/docs/react-native/api/helpers/use-set-locale)
  * [Composant `<LocaleSelector>`](/docs/react-native/api/components/locale-selector)
  * [Hook `useLocaleSelector`](/docs/react-native/api/helpers/use-locale-selector)