# react-native: Changing Languages
URL: https://generaltranslation.com/en-GB/docs/react-native/guides/languages.mdx
---
title: Changing Languages
description: How to configure and switch between languages in your React Native app
---

{/* AUTO-GENERATED: Do not edit directly. Edit the template in content/docs-templates/ instead. */}

Language switching allows users to change their preferred locale for your application's content. GT React Native provides several approaches, from simple programmatic switching to pre-built UI components for custom language selectors.


## Available methods

* **Programmatic**: [`useSetLocale`](/docs/react-native/api/helpers/use-set-locale) hook for custom controls
* **Pre-built UI**: [`<LocaleSelector>`](/docs/react-native/api/components/locale-selector) component with drop-down
* **Custom UI**: [`useLocaleSelector`](/docs/react-native/api/helpers/use-locale-selector) hook for building custom selectors

## Using the `useSetLocale` hook

The [`useSetLocale`](/docs/react-native/api/helpers/use-set-locale) hook allows you to change the language of your app:

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

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

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

Simply pass the locale you want to switch to as the argument to the function returned by the hook.


## Using the `<LocaleSelector>` component

The [`<LocaleSelector>`](/docs/react-native/api/components/locale-selector) component provides a ready-to-use drop-down that automatically shows all configured locales:

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

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

This component automatically:

* Shows all configured locales for your project
* Displays locales in their native language names
* Handles the switching logic
* Maintains the current selection state


## Using the `useLocaleSelector` hook

If you want to build your own custom locale selector component, use [`useLocaleSelector`](/docs/react-native/api/helpers/use-locale-selector):

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

function CustomLocaleSelector() {
  const { 
    locale,              // Current active locale (e.g., 'en', 'es')
    locales,             // Array of locales your project supports ['en', 'es', 'fr']
    setLocale,           // Function to change the locale: setLocale('es')
    getLocaleProperties  // Function to get display info for a locale
  } = 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>
  );
}
```


## Important notes

### GTProvider requirement

Language-switching components must be used inside a [`<GTProvider>`](/docs/react-native/api/components/gtprovider):

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

// ❌ Wrong - outside provider
<LanguageSwitcher />
```


## Next steps

* [Dynamic Content Guide](/docs/key-concepts/dynamic-content) - Runtime content translation
* API References:
  * [`useSetLocale` Hook](/docs/react-native/api/helpers/use-set-locale)
  * [`<LocaleSelector>` Component](/docs/react-native/api/components/locale-selector)
  * [`useLocaleSelector` Hook](/docs/react-native/api/helpers/use-locale-selector)