Links

React Native

This template helps you generate your design tokens as a React Native theme and icons as JSX components
This example uses the following parsers:
CLI configuration
GitHub 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
  • rules are where you provide parsers and compatible options
{
"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"
}
}
]
}
]
}
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
Make sure you have connected your GitHub account with your Specify account. Head toward this article to learn more.
{
"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"
}
}
]
}
]
}
Last modified 18d ago