> ## Documentation Index
> Fetch the complete documentation index at: https://primer.io/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# React Native

This guide is designed to help you style our default Universal Checkout UI. If you would like to build your own UI from scratch then check out our [Headless Universal Checkout guide](/checkout/headless/).

## Localization and languages

Universal Checkout supports multiple languages out of the box, enabling you to adapt its UI to the relevant market.

<Note>
  Universal Checkout uses the device language by default. If this language is not supported, Universal Checkout automatically falls back to English.
</Note>

### Supported locales

| Language                                             | Minimum versions |
| ---------------------------------------------------- | ---------------- |
| Arabic                                               | v2.30.0          |
| Bulgarian                                            | v2.30.0          |
| Catalan                                              | v2.27.0          |
| Czech                                                | v2.30.0          |
| Danish                                               | v0.15.5          |
| German                                               | v0.15.5          |
| Greek                                                | v0.15.5          |
| English                                              | v0.1.0           |
| Spanish                                              | v0.15.5          |
| Spanish (Argentina)                                  | v2.30.0          |
| Spanish (Mexico)                                     | v2.30.0          |
| Estonian                                             | v2.30.0          |
| Finnish                                              | v2.27.0          |
| French                                               | v0.15.5          |
| Hebrew                                               | v2.27.0          |
| Croatian                                             | v2.30.0          |
| Hungarian                                            | v2.30.0          |
| Indonesian                                           | v2.27.0          |
| Italian                                              | v0.15.5          |
| Japanese                                             | v2.30.0          |
| Korean                                               | v2.27.0          |
| Lithuanian                                           | v2.27.0          |
| Latvian                                              | v2.30.0          |
| Malay                                                | v2.19.2          |
| Norwegian                                            | v0.15.5          |
| Dutch                                                | v0.15.5          |
| Polish                                               | v0.15.5          |
| Portuguese                                           | v0.15.5          |
| Portuguese (Brazil)                                  | v2.30.0          |
| Romanian                                             | v2.30.0          |
| Russian                                              | v2.30.0          |
| Slovak                                               | v2.30.0          |
| Slovenian                                            | v2.27.0          |
| Serbian                                              | v2.27.0          |
| Swedish                                              | v1.15.5          |
| Thai                                                 | v2.19.2          |
| Turkish                                              | v0.15.5          |
| Ukrainian                                            | v2.27.0          |
| Vietnamese                                           | v2.30.0          |
| Chinese (Mainland China - Simplified characters)     | v2.19.2          |
| \[BETA] Chinese (Hong-Kong - Traditional characters) | v2.19.2          |
| \[BETA] Chinese (Taiwan - Traditional characters)    | v2.19.2          |

### Right-to-left

Universal Checkout automatically switches to a right-to-left layout when necessary.

## Theme

To customize the appearance of the SDK, pass a `theme` mapping under `uiOptions` in `PrimerSettings`, for example:

```json JSON theme={"dark"}
uiOptions: {
  /* ... other options ... */
  theme: {
      colors: {
          mainColor: {
              red: 7,
              green: 138,
              blue: 88,
              alpha: 255
          },
          background: {
              red: 216,
              green: 242,
              blue: 240,
              alpha: 255
          },
          text: {
              red: 7,
              green: 138,
              blue: 88,
              alpha: 255
          },
          disabled: {
              red: 100,
              green: 100,
              blue: 100,
              alpha: 255
          },
          error: {
              red: 235,
              green: 126,
              blue: 16,
              alpha: 255
          },
          borders: {
              red: 209,
              green: 96,
              blue: 209,
              alpha: 255
          }
      },
      darkModeColors: {
          mainColor: {
              red: 1,
              green: 255,
              blue: 1,
              alpha: 255
          },
          background: {
              red: 255,
              green: 1,
              blue: 255,
              alpha: 255
          },
          text: {
              red: 1,
              green: 255,
              blue: 1,
              alpha: 255
          },
          disabled: {
              red: 100,
              green: 100,
              blue: 100,
              alpha: 255
          },
          error: {
              red: 173,
              green: 10,
              blue: 10,
              alpha: 255
          },
          borders: {
              red: 209,
              green: 96,
              blue: 209,
              alpha: 255
          }
      }
  }
},
```

Minimally, you can set only `mainColor` and `background` to achieve a basic two-tone theme. Other properties can be used to override specific styles:

| Property     | Description                                                       |
| :----------- | :---------------------------------------------------------------- |
| `mainColor`  | The default primary color used to theme text and accents.         |
| `background` | The default background color for views.                           |
| `text`       | Overrides `mainColor` with a specific color for text labels.      |
| `disabled`   | Overrides `mainColor` with a specific color for disabled buttons. |
| `error`      | A specific color for validation error label text. Red by default. |
| `borders`    | Overrides `mainColor` for button borders and view borders.        |