# react-native: DictionaryTranslationOptions
URL: https://generaltranslation.com/en-US/docs/react-native/api/types/dictionary-translation-options.mdx
---
title: DictionaryTranslationOptions
description: API reference for the DictionaryTranslationOptions type
---
{/* AUTO-GENERATED: Do not edit directly. Edit the template in content/docs-templates/ instead. */}


## Overview

The `DictionaryTranslationOptions` type is used to pass variables to dictionary entries and specify their render behavior.
It is used with [`useTranslations`](/docs/react-native/api/dictionary/use-translations) to pass variables to dictionary entries.


<Callout>
  **Buildtime Translation:**
  `useTranslations` translations occur at buildtime; however, variables are never translated.
  Instead, they are inserted into the translation with formatting.
  Make sure to follow the [deployment guide here](/docs/react-native/tutorials/quickdeploy).
</Callout>


## Reference


### Parameters

<TypeTable
  type={{
    "variables?": {
        type: 'Record<string, any>',
        optional: true,
        default: 'undefined',
    },
  }}
/>

### Description

| Prop | Description |
| ---- | ----------- |
| `variables` | An object where the keys identify where each value is mapped to in the dictionary entry.|


---

## Examples

### Passing variables

In order to pass a variable to the dictionary entry, we need to do two things: (1) add a variable to the entry and (2) reference said variable in the [`d`](/docs/react-native/api/dictionary/use-gt) invocation.

First, we add a variable to the dictionary entry with the following syntax: `{username}`.
`username` is the name of the variable.
```jsx title="dictionary.ts"
// [!code word:username]
const dictionary = {
  greeting: {
    hello: 'Hello, {username}!',
  },
};

export default dictionary;
```

Next, we reference the variable:
```jsx title="Component.tsx"
// [!code word:username]
import { useTranslations } from 'gt-react-native';

const Component = () => {
  const t = useTranslations();
  return <div>{t('greeting.hello', { username : 'Brian123' })}</div>;
};
```

### Using ICU message format

`gt-react-native` supports ICU message format, which allows you to also format your variables.

```jsx title="dictionary.ts"
// [!code word:account-balance]
const dictionary = {
  account: {
    balance: 'Your account balance: {dollars, number, ::currency/USD}!',
  },
};

export default dictionary;
```

Next, we reference the variable:
```jsx title="Component.tsx"
// [!code word:account-balance]
import { useTranslations } from 'gt-react-native';

const Component = () => {
  const t = useTranslations();
  return <div>
    { t(
      'account.balance',
      {
        "dollars" : 1000000,
      }
    ) }
  </div>;
};
```



---

## Notes
 * The `variables` object passes values to a dictionary entry.
 * The `variablesOptions` object defines the behavior of the variables.

## Next steps
 * See [dictionaries](/docs/react-native/guides/dictionaries) for more information on dictionaries and common practices.
 * See [`useTranslations`](/docs/react-native/api/dictionary/use-translations) for more information on dictionaries interface.
 * See [`ICU message format`](https://unicode-org.github.io/icu/userguide/format_parse/messages/) for more information on formatting options.