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

{/* GENERADO AUTOMÁTICAMENTE: No edites esto directamente. En su lugar, edita la plantilla en content/docs-templates/. */}

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


## Métodos disponibles

* **Programático**: hook [`useSetLocale`](/docs/react-native/api/helpers/use-set-locale) para controles personalizados
* **UI predefinida**: componente [`<LocaleSelector>`](/docs/react-native/api/components/locale-selector) con menú desplegable
* **UI 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 aplicación:

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

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

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

Solo tienes que pasar la configuración regional a la que quieres cambiar como argumento de la función que devuelve el hook.


## Uso del componente `<LocaleSelector>`

El componente [`<LocaleSelector>`](/docs/react-native/api/components/locale-selector) proporciona un menú desplegable listo para usar que muestra automáticamente todas las locales configuradas:

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

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

Este componente hace lo siguiente automáticamente:

* Muestra todos los locales configurados para tu proyecto
* Muestra los locales con el nombre nativo de cada idioma
* Gestiona la lógica de cambio
* Mantiene el estado de la selección actual


## Uso del hook `useLocaleSelector`

Si quieres crear tu propio componente selector personalizado de 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 locales 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} {/* p. ej., "English (US)", "Español (ES)" */}
          </option>
        );
      })}
    </select>
  );
}
```

## Notas importantes

### Requisito de GTProvider

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

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

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


## Próximos pasos

* [Guía de contenido dinámico](/docs/key-concepts/dynamic-content) - traducción de contenido en tiempo de ejecución
* Referencias de la 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)