# React Native

This example uses the following parsers:

* [to-react-native](https://docs.specifyapp.com/reference/parsers/to-react-native) to generate your design tokens as a React Native theme
* [convert-dimension](https://docs.specifyapp.com/reference/parsers/convert-dimension) to convert dimensions token from px to unitless values
* [svg-to-jsx](https://docs.specifyapp.com/reference/parsers/svg-to-jsx) to generate icons as JSX components

{% tabs %}
{% tab title="CLI configuration" %}
If you use the CLI, you need to fill three properties:

* `repository`  is `@organization/repository`
* `personalAccessToken` which you can generate [in your account settings](https://specifyapp.com/user/personal-access-tokens) 
* `rules` are where you provide parsers and compatible options

```json
{
  "version": "2",
  "repository": "@organization/repository",
  // Only use the personalAccessToken when working with the CLI
  "personalAccessToken": "<your-personal-access-token>",
  "rules": [
    {
      "name": "Generate tokens as a React Native theme",
      "parsers": [
        {
          "name": "convert-dimension",
          "options": {
            "toFormat": null
          }
        },
        {
          "name": "to-react-native",
          "output": {
            "type": "file",
            "filePath": "theme.js"
          }
        }
      ]
    },
    {
      "name": "Optimize and transform vectors with svgo + Generate JSX components",
      "parsers": [
        {
          "name": "svgo",
          "options": {
            "svgo": {
              "plugins": [
                {
                  "name": "removeDimensions"
                },
                {
                  "name": "convertColors",
                  "params": {
                    "currentColor": true
                  }
                }
              ]
            }
          }
        },
        {
          "name": "svg-to-jsx",
          "output": {
            "type": "directory",
            "directoryPath": "output/assets"
          }
        }
      ]
    }
  ]
}
```

{% endtab %}

{% tab title="GitHub Configuration" %}
If you use the GitHub, you need to fill 4 properties:

* `repository`  is `@organization/repository`
* `head` lets you set the branch your PR will be created on
* `base` lets you set the branch your PR will be merged on
* `rules` lets you transform tokens by chaining parsers

{% hint style="info" %}
Make sure you have connected your GitHub account with your Specify account. Head toward [this article](https://help.specifyapp.com/en/articles/4722440-add-github-as-a-destination) to learn more.
{% endhint %}

```json
{
  "version": "2",
  "head": "specifyrc-json",
  "base": "main",
  "repository": "@organization/repository",
  "rules": [
    {
      "name": "Generate tokens as a React Native theme",
      "parsers": [
        {
          "name": "convert-dimension",
          "options": {
            "toFormat": null
          }
        },
        {
          "name": "to-react-native",
          "output": {
            "type": "file",
            "filePath": "theme.js"
          }
        }
      ]
    },
    {
      "name": "Optimize and transform vectors with svgo + Generate JSX components",
      "parsers": [
        {
          "name": "svgo",
          "options": {
            "svgo": {
              "plugins": [
                {
                  "name": "removeDimensions"
                },
                {
                  "name": "convertColors",
                  "params": {
                    "currentColor": true
                  }
                }
              ]
            }
          }
        },
        {
          "name": "svg-to-jsx",
          "output": {
            "type": "directory",
            "directoryPath": "output/assets"
          }
        }
      ]
    }
  ]
}
```

{% endtab %}
{% endtabs %}