{"id":13343910,"url":"https://github.com/sivarajng/zeplin-to-react-native","last_synced_at":"2025-09-10T12:36:00.378Z","repository":{"id":51891304,"uuid":"192221800","full_name":"sivarajng/zeplin-to-react-native","owner":"sivarajng","description":"This is a framework which converts Zeplin designs (json schema)  to React Native Code snippets","archived":false,"fork":false,"pushed_at":"2021-05-09T06:40:41.000Z","size":3627,"stargazers_count":8,"open_issues_count":3,"forks_count":2,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-08-12T04:52:19.278Z","etag":null,"topics":["convert","converter","design","export","extension","react","react-native","reactnative","ui","zeplin","zeplin-extension"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sivarajng.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-06-16T18:05:46.000Z","updated_at":"2024-05-17T16:40:18.000Z","dependencies_parsed_at":"2022-09-17T17:51:27.708Z","dependency_job_id":null,"html_url":"https://github.com/sivarajng/zeplin-to-react-native","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/sivarajng/zeplin-to-react-native","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sivarajng%2Fzeplin-to-react-native","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sivarajng%2Fzeplin-to-react-native/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sivarajng%2Fzeplin-to-react-native/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sivarajng%2Fzeplin-to-react-native/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sivarajng","download_url":"https://codeload.github.com/sivarajng/zeplin-to-react-native/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sivarajng%2Fzeplin-to-react-native/sbom","scorecard":{"id":828293,"data":{"date":"2025-08-11","repo":{"name":"github.com/sivarajng/zeplin-to-react-native","commit":"80c6d14d5ea0bf97388e7953d9a53841e5b54890"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":1.7,"checks":[{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Code-Review","score":0,"reason":"Found 0/3 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"SAST","score":0,"reason":"no SAST tool detected","details":["Warn: no pull requests merged into dev branch"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"Vulnerabilities","score":0,"reason":"12 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-4w2v-q235-vp99","Warn: Project is vulnerable to: GHSA-cph5-m8f7-6c5x","Warn: Project is vulnerable to: GHSA-wf5p-g6vw-rhxx","Warn: Project is vulnerable to: GHSA-jr5f-v2jv-69x6","Warn: Project is vulnerable to: GHSA-74fj-2j2h-c42q","Warn: Project is vulnerable to: GHSA-pw2r-vq6v-hr8c","Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc","Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp","Warn: Project is vulnerable to: GHSA-jf85-cpcp-j695","Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw","Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9","Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-23T17:05:12.082Z","repository_id":51891304,"created_at":"2025-08-23T17:05:12.082Z","updated_at":"2025-08-23T17:05:12.082Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":274463116,"owners_count":25290113,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-10T02:00:12.551Z","response_time":83,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["convert","converter","design","export","extension","react","react-native","reactnative","ui","zeplin","zeplin-extension"],"created_at":"2024-07-29T19:32:05.299Z","updated_at":"2025-09-10T12:36:00.312Z","avatar_url":"https://github.com/sivarajng.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n\n# Convert Zeplin Designs to React Native snippets/components\n\n* Zeplin : https://zeplin.io\n* React Native: https://facebook.github.io/react-native/\n\nDo you have designs in Zeplin, and need to turn those into React Native UI (or even html) codes?  This will take those design's json schema, and automatically create React Native snippets/components or even html tags through template.\n\n\u003e ##  🖐️ **Contributors** and **PR** are welcomed !!! 🖐️\n\n\n![Zeplin to React Native](assets/zeplin_to_react_native.png?raw=true)\n*****\n\n# Getting started\n\n### Prerequisites:\n* Node 8.5.0+ https://nodejs.org/en/\n* Your Zeplin designs links\n\n### Steps to install:\n\n```bash\nnpm i zeplin-to-react-native\n```\nor if you use 'yarn' then\n```bash\nyarn add zeplin-to-react-native\n```\n\n## Example\n#### index.js\n```js\nconst zep2RN = require('zeplin-to-react-native')\n\nzep2RN.config({ dir:'shop', url: 'https://cdn.zeplin.io/5d08b55ad0a4d25d8cb653cc/screens/5d08b60ef033df15f0082080/versions/5d08b7b8d6587e15d8cd70de/snapshot/5d08b7b8d6587e15d8cd70df?Expires=1563445967\u0026Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9jZG4uemVwbGluLmlvLzVkMDhiNTVhZDBhNGQyNWQ4Y2I2NTNjYy9zY3JlZW5zLzVkMDhiNjBlZjAzM2RmMTVmMDA4MjA4MC92ZXJzaW9ucy81ZDA4YjdiOGQ2NTg3ZTE1ZDhjZDcwZGUvc25hcHNob3QvNWQwOGI3YjhkNjU4N2UxNWQ4Y2Q3MGRmIiwiQ29uZGl0aW9uIjp7IkRhdGVMZXNzVGhhbiI6eyJBV1M6RXBvY2hUaW1lIjoxNTYzNDQ1OTY3fX19XX0_\u0026Signature=ftLRI4xMM33kGRTwxUktt4Avvuq7w-SzqhJB8CNUjq3Q2O9WXNOsg40Ek8iE35r8PG4JZNtcVgyCj2WTJf4FcrdnZbaD9oaJSy19nHUX4v5uEjMzompe6mHbKdozvt6bFhnpxvlye0NRfnrOsckM8ScBooXDlvZHrayHrDdGeV8MWJYQ8YVruUYGr3Y~JGPpiQUUif~YF64u3-y2WHGg9xkrsRXpDQa-gqTqV8j4TOPcbV9A2ob-QytukXGbf5UKau2-zsWQcD8SwW4RQBoBQia66eRecK2AWr~6X37dYzCBVdPW4Qk7-n-UYa2ihDMC0j6dF11ncD7ZmzVyzK38Kw__\u0026Key-Pair-Id=APKAJKD6BRIMESUCGIPA' })\nzep2RN.convert().then(res=\u003econsole.log(res))\n                .catch(err=\u003econsole.log(err))\n\n```\n\nAccepted Config params\n\n| Param| Default|Required|Value |\n| :------ | :-------|:-------|:------- |\n| **url** | ` `|Yes|`url of the zeplin design json link` |\n| **dir** | `default`||`dir/folder path to save the output file` ... |\n| **template** |`react-native`|| `react-native` or `html` |\n| **generateText** |`true`|| `true` or `false` |\n| **generateView** |`true`|| `true` or `false` |\n| **generateImage** |`true`|| `true` or `false` |\n| **traceTextTag** |`true`|| `true` or `false` |\n| **traceViewTag** |`false`|| `true` or `false` |\n| **traceImageTag** |`false`|| `true` or `false` |\n\n\n## Here's the generated code:\n#### output file './zep2RN/shop/Text.jsx\n```jsx\n\u003cText  style={{ fontSize :  12 , lineHeight :  0 , color:  '#fff' , fontFamily :  'Montserrat-Regular' }}  \u003e Add to Cart \u003c/Text\u003e\n\u003cText  style={{ fontSize :  1 , lineHeight :  20 , color:  '#050505' , fontFamily :  'Montserrat-Regular' }}  \u003e $160.00\\n $140.00 Member Price \u003c/Text\u003e\n\u003cText  style={{ fontSize :  18 , lineHeight :  0 , color:  '#d4d4d4' , fontFamily :  'Montserrat-Regular' }}  \u003e 0 \u003c/Text\u003e\n\u003cText  style={{ fontSize :  10 , lineHeight :  14 , color:  '#979797' , fontFamily :  'Montserrat-Light' }}  \u003e This Braun watch is a reissue of the original 1970's design from renowned design team Dietrich Lubs and Dieter Rams, both of whom have work featured in the Museum’s collection. The large watch features a numbered face, and the smaller watch has only index lines. Made of a matte stainless-steel case, black dial, mineral glass, a three-hand quartz movement, and a leather band. Water-resistant. \u003c/Text\u003e\n\u003cText  style={{ fontSize :  24 , lineHeight :  0 , color:  '#000' , fontFamily :  'Montserrat-Regular' }}  \u003e Braun Classic Watch \u003c/Text\u003e\n```\n#### output file './zep2RN/shop/View.jsx\n```jsx\n\u003cView  style={{ width:  18, height:  12 , backgroundColor:  '#000' , }}\u003e  \u003c/View\u003e\n\u003cView  style={{ width:  18, height:  2 , backgroundColor:  '#dadada' , }}\u003e  \u003c/View\u003e\n\u003cView  style={{ width:  375, height:  328 , }}\u003e  \u003c/View\u003e\n\u003cView  style={{ width:  6, height:  6 , backgroundColor:  '#dadada' , }}\u003e  \u003c/View\u003e\n\u003cView  style={{ width:  6, height:  6 , backgroundColor:  '#ff473a' , }}\u003e  \u003c/View\u003e\n\u003cView  style={{ width:  248, height:  42 , backgroundColor:  '#ff473a' , }}\u003e  \u003c/View\u003e\n```\n#### output file './zep2RN/shop/Image.jsx\n```jsx\n\u003cImage  source={require('./assets/menu.png')}  style={{ width:  24, height:  24 , }}  /\u003e\n\u003cImage  source={{ uri :  'https://cdn.zeplin.io/5d08b55ad0a4d25d8cb653cc/assets/8a427689-f175-4164-af03-b8c32a0bb96e.png'}}  style={{ width:  24, height:  24 , }}  /\u003e\n\u003cImage  source={require('./assets/Product Image.png')}  style={{ width:  375, height:  328 , }}  /\u003e\n\u003cImage  source={{ uri :  'https://cdn.zeplin.io/5d08b55ad0a4d25d8cb653cc/assets/42802a44-9cec-4efe-916b-96847f018ab3.png'}}  style={{ width:  375, height:  328 , }}  /\u003e\n```\n### Thanks to plugable templates, so you can convert to HTML or even any other UI code through template\n\n#### output file './zep2RN/member/Text.html\n```html\n\u003cdiv  style=\" font-size : 10px ; color: '#979797' ; font-family : 'Montserrat-Light'; \"  \u003e This Braun watch is a reissue of the original 1970's design from renowned design team Dietrich Lubs and Dieter Rams, both of whom have work featured in the Museum’s collection. The large watch features a numbered face, and the smaller watch has only index lines. Made of a matte stainless-steel case, black dial, mineral glass, a three-hand quartz movement, and a leather band. Water-resistant. \u003c/div\u003e\n\u003cdiv  style=\" font-size : 24px ; color: '#000' ; font-family : 'Montserrat-Regular'; \"  \u003e Braun Classic Watch \u003c/div\u003e\n\u003cdiv  style=\" font-size : 10px ; color: '#979797' ; font-family : 'Montserrat-Light'; \"  \u003e Choose the membership that’s the best fit for you. \\n Click on a level to view the full description of benefits. \u003c/div\u003e\n\u003cdiv  style=\" font-size : 1px ; color: '#000' ; font-family : 'Montserrat-Regular'; \"  \u003e Individual—$75\\n $60 tax deductible\\n \\n Dual—$125\\n $60 tax deductible\\n \\n Supporter—$300\\n $60 tax deductible \u003c/div\u003e\n\u003cdiv  style=\" font-size : 18px ; color: '#ff473a' ; font-family : 'Montserrat-Regular'; \"  \u003e Become a Member \u003c/div\u003e\n\u003cdiv  style=\" font-size : 24px ; color: '#fcfcfc' ; font-family : 'Montserrat-Regular'; \"  \u003e Your Museum. \\n Your Bounty of Experience. \u003c/div\u003e\n\u003cdiv  style=\" font-size : 12px ; color: '#fff' ; font-family : 'Montserrat-Regular'; \"  \u003e Join Today \u003c/div\u003e\n```\n\n### Traced nested layer path which can be used to genertae a nested components\n```json\n[\n{\n    \"name\": \"Choose the membership that’s the best fit for you. \\nClick on a level to view the full description of benefits.\",\n    \"path\": [\n      0,\n      0\n    ]\n  },\n  {\n    \"name\": \"Individual—$75\\n$60 tax deductible\\n\\nDual—$125\\n$60 tax deductible\\n\\nSupporter—$300\\n$60 tax deductible\",\n    \"path\": [\n      0,\n      1\n    ]\n  },\n    {\n    \"name\": \"Become a Member\",\n    \"path\": [\n      2,\n      2\n    ]\n  },\n  {\n    \"name\": \"Your Museum. \\nYour Bounty of Experience.\",\n    \"path\": [\n      3,\n      1\n    ]\n  },\n  {\n    \"name\": \"Join Today\",\n    \"path\": [\n      4,\n      0,\n      1\n    ]\n  },\n]\n```\n# Instructions to Copy the Zeplin Design's JSON Schema URL:\n\n![Instruction to Copy Zeplin Design URL](assets/zeplin_get_design_url_instruction.png?raw=true)\n\n - Each Zeplin design is rendered in the browser using the design meta-data / json-schema which we can provide as an input to our design to code conversion\n - Just load the specific design page in the browser and open the dev tools ( [How to open dev tools panel in chrome](https://developers.google.com/web/tools/chrome-devtools/open)) \nreload the page and apply text filter to 'snapshot' and type filter to XHR, you will get a unique url which loads a JSON data. \n- Right click and copy the url as in the screenshot above and keep it as the url param in the module \n```js\nzep2RN.config({\n  dir:'\u003cdir name\u003e',\n  url: '\u003cpaste the copied url here\u003e'\n})\n``` \n\n### Sample urls\n```js\n [\n    { dir: 'shop', url: 'https://cdn.zeplin.io/5d08b55ad0a4d25d8cb653cc/screens/5d08b60ef033df15f0082080/versions/5d08b7b8d6587e15d8cd70de/snapshot/5d08b7b8d6587e15d8cd70df?Expires=1563445967\u0026Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9jZG4uemVwbGluLmlvLzVkMDhiNTVhZDBhNGQyNWQ4Y2I2NTNjYy9zY3JlZW5zLzVkMDhiNjBlZjAzM2RmMTVmMDA4MjA4MC92ZXJzaW9ucy81ZDA4YjdiOGQ2NTg3ZTE1ZDhjZDcwZGUvc25hcHNob3QvNWQwOGI3YjhkNjU4N2UxNWQ4Y2Q3MGRmIiwiQ29uZGl0aW9uIjp7IkRhdGVMZXNzVGhhbiI6eyJBV1M6RXBvY2hUaW1lIjoxNTYzNDQ1OTY3fX19XX0_\u0026Signature=ftLRI4xMM33kGRTwxUktt4Avvuq7w-SzqhJB8CNUjq3Q2O9WXNOsg40Ek8iE35r8PG4JZNtcVgyCj2WTJf4FcrdnZbaD9oaJSy19nHUX4v5uEjMzompe6mHbKdozvt6bFhnpxvlye0NRfnrOsckM8ScBooXDlvZHrayHrDdGeV8MWJYQ8YVruUYGr3Y~JGPpiQUUif~YF64u3-y2WHGg9xkrsRXpDQa-gqTqV8j4TOPcbV9A2ob-QytukXGbf5UKau2-zsWQcD8SwW4RQBoBQia66eRecK2AWr~6X37dYzCBVdPW4Qk7-n-UYa2ihDMC0j6dF11ncD7ZmzVyzK38Kw__\u0026Key-Pair-Id=APKAJKD6BRIMESUCGIPA' },\n    { dir: 'member', url: 'https://cdn.zeplin.io/5d08b55ad0a4d25d8cb653cc/screens/5d08b60e19680119d0ec8514/versions/5d08b7b83faef15d5c332eb9/snapshot/5d08b7b83faef15d5c332eba?Expires=1563446651\u0026Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9jZG4uemVwbGluLmlvLzVkMDhiNTVhZDBhNGQyNWQ4Y2I2NTNjYy9zY3JlZW5zLzVkMDhiNjBlMTk2ODAxMTlkMGVjODUxNC92ZXJzaW9ucy81ZDA4YjdiODNmYWVmMTVkNWMzMzJlYjkvc25hcHNob3QvNWQwOGI3YjgzZmFlZjE1ZDVjMzMyZWJhIiwiQ29uZGl0aW9uIjp7IkRhdGVMZXNzVGhhbiI6eyJBV1M6RXBvY2hUaW1lIjoxNTYzNDQ2NjUxfX19XX0_\u0026Signature=BIHel8hiiancNyrC9XlNP4ThllPGpncc126o1HtRfI5nuXbw2rBk-2F~86MDiyWOo87I2IO8R0akUkF9WIxTmD~fbv~TZ6MzgvGXbE187eWCby6KGGfD4J78VZ727rn9SclSmFcTNsysOWjJl8uJKU-JhgROkalbcLI4juAW8ney6JtEd37SnXkEPkJK6TSHnALXnNbxwKeETdwQh6Kvd7tJWn8q66PSngWD9vU~yQ2zKwMPdaup9ujkB-BT5N-seh8ZBygJ22-we3HUXdnMBiw1cFyT3WxuOSzJwh9RpJMTjDHKqqMTm1O17T-wUeQOK22kSmJPz2pO2dVtHi9fPQ__\u0026Key-Pair-Id=APKAJKD6BRIMESUCGIPA' },\n    { dir: 'home', url: 'https://cdn.zeplin.io/5d08b55ad0a4d25d8cb653cc/screens/5d08b60ef033df15f0082041/versions/5d08b7bf68714a15d2e9fe5e/snapshot/5d08b7bf68714a15d2e9fe5f?Expires=1563444763\u0026Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9jZG4uemVwbGluLmlvLzVkMDhiNTVhZDBhNGQyNWQ4Y2I2NTNjYy9zY3JlZW5zLzVkMDhiNjBlZjAzM2RmMTVmMDA4MjA0MS92ZXJzaW9ucy81ZDA4YjdiZjY4NzE0YTE1ZDJlOWZlNWUvc25hcHNob3QvNWQwOGI3YmY2ODcxNGExNWQyZTlmZTVmIiwiQ29uZGl0aW9uIjp7IkRhdGVMZXNzVGhhbiI6eyJBV1M6RXBvY2hUaW1lIjoxNTYzNDQ0NzYzfX19XX0_\u0026Signature=EdmTI3BHVWBV7PHpNSnCABlog2n7hA8S5ZL~upO3W0yxMI8Nh0zh1Gf1cqb1y0G5cfJ4vmvDHdms35tvgWbfRS3p-ZNlR3Yux6Mo-~YPIOuSMvLdGbnyi3idKgUVaaZf9OSFN7t9i08x8-RoaqnT0SUlGl6FVv9RwJUH71uzhNzz7ZYcw0SLz~AA3qEnKebJbNHdw7ETLL-vFCjZ1HGj4tNIlESgnxRqoY1fdkRgV4AphPKIhysTOthE05xgH1kkBAblgXtSrjBLthD28i5psakVH4tm3LPK9UsQO4eA5ut1lgRLqFVv-bbGvSO9gFcqovoYPSpSRezvdWL077R-aw__\u0026Key-Pair-Id=APKAJKD6BRIMESUCGIPA' },\n    { dir: 'menu', url: 'https://cdn.zeplin.io/5d08b55ad0a4d25d8cb653cc/screens/5d08b60eb2c0555e11af480a/versions/5d08b7b8feb5245daafaf0cf/snapshot/5d08b7b8feb5245daafaf0d0?Expires=1563445857\u0026Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9jZG4uemVwbGluLmlvLzVkMDhiNTVhZDBhNGQyNWQ4Y2I2NTNjYy9zY3JlZW5zLzVkMDhiNjBlYjJjMDU1NWUxMWFmNDgwYS92ZXJzaW9ucy81ZDA4YjdiOGZlYjUyNDVkYWFmYWYwY2Yvc25hcHNob3QvNWQwOGI3YjhmZWI1MjQ1ZGFhZmFmMGQwIiwiQ29uZGl0aW9uIjp7IkRhdGVMZXNzVGhhbiI6eyJBV1M6RXBvY2hUaW1lIjoxNTYzNDQ1ODU3fX19XX0_\u0026Signature=AX6V2tmGSItbalc-AbazjLmaq-OvcgKqZFEq1R063bzz5dRz0wLxCWHu57zAydi~qk1tJpXwN9TMmLgYzE~sEq7SoNBR1FaXsFuB9GaDCp9CQFZTX14ZfrInaX7kJMDk0yBVJ68IMq2GekxI8sGKvj8rPcyIyVORktMrNMvK9OOAaDHC1Oh2xCw8zcnYFsIami2-kZtere2hVocf8LTCLvhU3s1P6Z2RlBF-FaD~DkeQW4bvVcB6EXCjZC3YpoM8S6UluOBr9ADt5h0~hpTyM6g8izdomjdY-tsINIiBvhRHQE5j~V4W3VlJ9vTFrhwtjop~GyFsCS5OHeJzeAjK3w__\u0026Key-Pair-Id=APKAJKD6BRIMESUCGIPA' },\n    { dir: 'exhibition', url: 'https://cdn.zeplin.io/5d08b55ad0a4d25d8cb653cc/screens/5d08b60ed0a4d25d8cb65bd6/versions/5d08b7b8d6587e15d8cd711d/snapshot/5d08b7b8d6587e15d8cd711e?Expires=1563446693\u0026Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9jZG4uemVwbGluLmlvLzVkMDhiNTVhZDBhNGQyNWQ4Y2I2NTNjYy9zY3JlZW5zLzVkMDhiNjBlZDBhNGQyNWQ4Y2I2NWJkNi92ZXJzaW9ucy81ZDA4YjdiOGQ2NTg3ZTE1ZDhjZDcxMWQvc25hcHNob3QvNWQwOGI3YjhkNjU4N2UxNWQ4Y2Q3MTFlIiwiQ29uZGl0aW9uIjp7IkRhdGVMZXNzVGhhbiI6eyJBV1M6RXBvY2hUaW1lIjoxNTYzNDQ2NjkzfX19XX0_\u0026Signature=fnlQWh1SCnBjMRBKbosoVgTrLF1ZOVoQ~iAnkxbiIWm-qK1K6aVd3ufqCSMvCjWJ8ZSSioendGQpa4ohLSRZF5qLgq-z-tsknwEGe3UKY-psxNA~H3zDa4nrXfvxmv6RHdevm-PA4tWsVV~cmVq78MkLQHanlRFfnr9ERk3VU1HsJzTyNgJCpuwyiZIKCBj6FyxMvllxKQvPPoEFiC49W~Wm9coalG5f~LaFl115eeNXd4X3NAh8MUwTAVN1vEBQDJDywbGcJ3eUlsbWYOb9v4WtKc~qyl15zDpLW~UjWgTWI-4UESTPkWXqmACA9Jomiwx43L4T2tF0o9rQRvppgw__\u0026Key-Pair-Id=APKAJKD6BRIMESUCGIPA' },\n    { dir: 'collections', url: 'https://cdn.zeplin.io/5d08b55ad0a4d25d8cb653cc/screens/5d08b60e6992365e04bbc4cd/versions/5d08b7b8d6587e15d8cd7093/snapshot/5d08b7b8d6587e15d8cd7094?Expires=1563445739\u0026Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9jZG4uemVwbGluLmlvLzVkMDhiNTVhZDBhNGQyNWQ4Y2I2NTNjYy9zY3JlZW5zLzVkMDhiNjBlNjk5MjM2NWUwNGJiYzRjZC92ZXJzaW9ucy81ZDA4YjdiOGQ2NTg3ZTE1ZDhjZDcwOTMvc25hcHNob3QvNWQwOGI3YjhkNjU4N2UxNWQ4Y2Q3MDk0IiwiQ29uZGl0aW9uIjp7IkRhdGVMZXNzVGhhbiI6eyJBV1M6RXBvY2hUaW1lIjoxNTYzNDQ1NzM5fX19XX0_\u0026Signature=JuPwDjFGRj-GbYxEOXe3weFu-YN5iI1cIqmnoPZO0-~7JymC0iuO9E7jT31gbO~XLKlnHPjW4WnValzxq4LbQp6K0o9B9RGj9rU9koXHPDJY7X3y94f3ird~~hQE4NVR0Xv0jGsPCmrIM5aIG3TqnyvPxUBduH7jvEFozVfxuTvAtA3shv1rVuR9B5DS00SccqunoSkJnSxDdUrRIMfEu9q9fHU86dZ4xe8g253qIS89raaV5pOb5Dy4vKAhe87NsAgotuymVvQ3AuX3JvXcBQo4-KqWVazgF0JwTfH-u796lhzMOFz7-j-KIDGuUANlIEx5k~bnUtkawBeLrwTBwA__\u0026Key-Pair-Id=APKAJKD6BRIMESUCGIPA' },\n    { dir: 'plan', url: 'https://cdn.zeplin.io/5d08b55ad0a4d25d8cb653cc/screens/5d08b60ee4149016021e46d4/versions/5d08b7b84d9f605dce8d6de5/snapshot/5d08b7b84d9f605dce8d6de6?Expires=1563446711\u0026Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9jZG4uemVwbGluLmlvLzVkMDhiNTVhZDBhNGQyNWQ4Y2I2NTNjYy9zY3JlZW5zLzVkMDhiNjBlZTQxNDkwMTYwMjFlNDZkNC92ZXJzaW9ucy81ZDA4YjdiODRkOWY2MDVkY2U4ZDZkZTUvc25hcHNob3QvNWQwOGI3Yjg0ZDlmNjA1ZGNlOGQ2ZGU2IiwiQ29uZGl0aW9uIjp7IkRhdGVMZXNzVGhhbiI6eyJBV1M6RXBvY2hUaW1lIjoxNTYzNDQ2NzExfX19XX0_\u0026Signature=C7KMTzk5cex6RJQCLVNMa1Ve5LJXvF3ToQbCPi7uH4Y7meG9b03oTtruCtKyF-XucX9O7zt9ebjBwSaaAITFLocj7p98wgRd4lNjJnHlyRpeOr7Kf8HYYlekAnraprF6TWVSHJddZw7E9RgNztBz2CvLOtGTCRCOXPaR8nswsZm-bL8meisAY~2ZBlsYoC8ZThQDRm4gq6Z-zcShn6irNn1OYki5Q9wxfLRLJZtvr3cWzRcp7-1jBhZjGcupk0374dRTd6r0XZ1dnbt0Qfxu~QxgGNvLqSjfe2txETvtFdtQp41dKHRm0X7t3mTXHSgliFBRPVOo4cDn6Mqw9SD2rA__\u0026Key-Pair-Id=APKAJKD6BRIMESUCGIPA' }\n\n]\n```\n| \u003cimg src=\"assets/zeplin_design_json.png?raw=true\" height=\"550\"\u003e  | \u003cimg src=\"assets/shop.png?raw=true\" width=\"300\"\u003e |\n# Conversion process\n\nZeplin Design page provides a fairly clean json data that structures the layers of the design, which makes the process easier, but there is still a lot of processing involved.  Here's the basic steps:\n\n1. Get the design json url link\n2. parse the data recursively to dive into the nested layers and flatten them\n3. from the flattened layers generate code snippets/components\n4. Trace the end layer from parent layer to form a path array to traverse back the root layer\n5. using the path array we can create the nested Ui codes/components \n6. Apply different UI templates to generate respective UI frameworks code syntax\n9. Export to an output file\n\n\n## How much time does this save?\n\nI've found that screens that would normally take a long time would reduced to less time, as it provides you the snippet/code automatically that you can simply use or copy/paste.\n\n## What can't it do yet?\n\nThis is a work in progress, so there are a few things that might not do well, in that case please raise issues or if you would like to contribute, PR or fix , it would be really great-full!\n\n## How can I help?\n\nIf you'd like to help, I'd love to have you involved!  Feel free to file issues, or send me an email with any Zeplin Design / schema file URL that doesn't work quite right, and I'll also review and merge pull requests as well.\n\n\n\n# Sample / Test\n\nYou can run the test or see a sample by running the \n```bash\nnode ./test/index.js\n```\nor\n```bash\nnpm run test\n```\n## Test result\n### The code files will be generated in the respective paths\n#### console logs\n```bash\n\u003e node ./test/index.js\n\n// TEST 1 --------------------------------------------\nTotal Layers Count:  59\nTotal Types      :  [ 'group', 'shape', 'text' ]\nTotal Types Count:  3\nZeplin Design schema successfully converted to React Native code snippets for \u003cText/\u003e , \u003cView/\u003e , \u003cImage/\u003e\n// TEST 2 --------------------------------------------\n./zep2RN/shop/text.jsx File Write success\n./zep2RN/shop/image.jsx File Write success\n./zep2RN/shop/view.jsx File Write success\nTotal Layers Count:  109\nTotal Types      :  [ 'group', 'shape', 'text', 'image' ]\nTotal Types Count:  4\nZeplin Design schema successfully converted to React Native code snippets for \u003cText/\u003e , \u003cView/\u003e , \u003cImage/\u003e\n// TEST 3 --------------------------------------------\n./zep2RN/member/view.html File Write success\n./zep2RN/member/text.html File Write success\n./zep2RN/member/image.html File Write success\nTotal Layers Count:  169\nTotal Types      :  [ 'group', 'shape', 'text', 'image' ]\nTotal Types Count:  4\nZeplin Design schema successfully converted to React Native code snippets for \u003cText/\u003e , \u003cView/\u003e , \u003cImage/\u003e\n// TEST 4 --------------------------------------------\n./zep2RN/home/view.jsx File Write success\n./zep2RN/home/image.jsx File Write success\n./zep2RN/home/text.jsx File Write success\nTotal Layers Count:  234\nTotal Types      :  [ 'group', 'image', 'shape', 'text' ]\nTotal Types Count:  4\nZeplin Design schema successfully converted to React Native code snippets for \u003cText/\u003e , \u003cView/\u003e , \u003cImage/\u003e\n// TEST 5 --------------------------------------------\n./zep2RN/menu/image.jsx File Write success\n./zep2RN/menu/text.jsx File Write success\n./zep2RN/menu/view.jsx File Write success\nTotal Layers Count:  297\nTotal Types      :  [ 'image', 'group', 'shape', 'text' ]\nTotal Types Count:  4\nZeplin Design schema successfully converted to React Native code snippets for \u003cText/\u003e , \u003cView/\u003e , \u003cImage/\u003e\n// TEST 6 --------------------------------------------\n./zep2RN/exhibition/view.jsx File Write success\n./zep2RN/exhibition/text.jsx File Write success\n./zep2RN/exhibition/image.jsx File Write success\nTotal Layers Count:  358\nTotal Types      :  [ 'image', 'group', 'shape', 'text' ]\nTotal Types Count:  4\nZeplin Design schema successfully converted to React Native code snippets for \u003cText/\u003e , \u003cView/\u003e , \u003cImage/\u003e\n// TEST 7 --------------------------------------------\n./zep2RN/collections/view.jsx File Write success\n./zep2RN/collections/image.jsx File Write success\n./zep2RN/collections/text.jsx File Write success\nTotal Layers Count:  430\nTotal Types      :  [ 'image', 'group', 'shape', 'text' ]\nTotal Types Count:  4\nZeplin Design schema successfully converted to React Native code snippets for \u003cText/\u003e , \u003cView/\u003e , \u003cImage/\u003e\n./zep2RN/plan/text.jsx File Write success\n./zep2RN/plan/view.jsx File Write success\n./zep2RN/plan/image.jsx File Write success\n\n```\n\nYou can see that it might not perfect - but it provides a really good starting point, and it's getting better all the time!\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsivarajng%2Fzeplin-to-react-native","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsivarajng%2Fzeplin-to-react-native","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsivarajng%2Fzeplin-to-react-native/lists"}