# react-native: Cambiar de idioma
URL: https://generaltranslation.com/es/docs/react-native/guides/languages.mdx
---
title: Cambiar de idioma
description: Cómo configurar y cambiar de idioma en tu aplicación de React Native
---

{/* GENERADO AUTOMÁTICAMENTE: No edites directamente. Edita la plantilla en content/docs-templates/. */}

El cambio de idioma permite a los usuarios cambiar su configuración regional preferida del contenido de tu aplicación. GT React Native ofrece varios enfoques, desde un cambio programático sencillo hasta componentes de interfaz de usuario ya preparados para selectores de idioma personalizados.


## Métodos disponibles

* **Programático**: hook [`useSetLocale`](/docs/react-native/api/helpers/use-set-locale) para controles personalizados
* **IU predefinida**: componente [`<LocaleSelector>`](/docs/react-native/api/components/locale-selector) con lista desplegable
* **IU personalizada**: hook [`useLocaleSelector`](/docs/react-native/api/helpers/use-locale-selector) para crear selectores personalizados

## Uso del hook `useSetLocale`

El hook [`useSetLocale`](/docs/react-native/api/helpers/use-set-locale) te permite cambiar el idioma de tu app:

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

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

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

Simplemente pasa como argumento a la función que devuelve el hook la configuración regional a la que quieres cambiar.


## Uso del componente `<LocaleSelector>`

El componente [`<LocaleSelector>`](/docs/react-native/api/components/locale-selector) ofrece una lista desplegable lista para usar que muestra automáticamente todas las configuraciones regionales definidas:

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

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

Este componente automáticamente:

* Muestra todas las configuraciones regionales configuradas para tu proyecto
* Muestra las configuraciones regionales con sus nombres en su idioma nativo
* Gestiona la lógica de cambio
* Mantiene el estado de la selección actual


## Uso del hook `useLocaleSelector`

Si quieres crear tu propio componente personalizado para seleccionar la configuración regional, usa [`useLocaleSelector`](/docs/react-native/api/helpers/use-locale-selector):

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

function CustomLocaleSelector() {
  const { 
    locale,              // Configuración regional activa actual (p. ej., 'en', 'es')
    locales,             // Array de configuraciones regionales que admite tu proyecto ['en', 'es', 'fr']
    setLocale,           // Función para cambiar la configuración regional: setLocale('es')
    getLocaleProperties  // Función para obtener información de visualización de una configuración regional
  } = 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} {/* e.g., "English (US)", "Español (ES)" */}
          </option>
        );
      })}
    </select>
  );
}
```

## Notas importantes

### Requisito de GTProvider

Los componentes para cambiar el idioma deben usarse dentro de un [`<GTProvider>`](/docs/react-native/api/components/gtprovider):

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

// ❌ Incorrecto - fuera del proveedor
<LanguageSwitcher />
```


## Siguientes pasos

* [Guía de contenido dinámico](/docs/key-concepts/dynamic-content) - Traducción de contenido en runtime
* Referencias de API:
  * [Hook `useSetLocale`](/docs/react-native/api/helpers/use-set-locale)
  * [Componente `<LocaleSelector>`](/docs/react-native/api/components/locale-selector)
  * [Hook `useLocaleSelector`](/docs/react-native/api/helpers/use-locale-selector)