> ## 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](https://primer.io/docs/checkout/headless.md).

## 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.

### 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. |


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.