{"id":18677575,"url":"https://github.com/laynef/web-css-to-react-native-styles-convertor","last_synced_at":"2025-07-06T04:32:56.519Z","repository":{"id":98815874,"uuid":"140663319","full_name":"laynef/Web-CSS-to-React-Native-Styles-Convertor","owner":"laynef","description":"Convert your web CSS into JSON for mobile in React Native styles","archived":false,"fork":false,"pushed_at":"2018-08-01T21:28:51.000Z","size":478,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-01T17:04:13.604Z","etag":null,"topics":["css","json","react-native"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@lfaler/retro-react-native","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/laynef.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,"governance":null}},"created_at":"2018-07-12T05:03:34.000Z","updated_at":"2018-10-10T17:10:13.000Z","dependencies_parsed_at":"2023-06-19T08:20:14.941Z","dependency_job_id":null,"html_url":"https://github.com/laynef/Web-CSS-to-React-Native-Styles-Convertor","commit_stats":null,"previous_names":["laynef/retro-cli"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/laynef%2FWeb-CSS-to-React-Native-Styles-Convertor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/laynef%2FWeb-CSS-to-React-Native-Styles-Convertor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/laynef%2FWeb-CSS-to-React-Native-Styles-Convertor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/laynef%2FWeb-CSS-to-React-Native-Styles-Convertor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/laynef","download_url":"https://codeload.github.com/laynef/Web-CSS-to-React-Native-Styles-Convertor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239525181,"owners_count":19653285,"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","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":["css","json","react-native"],"created_at":"2024-11-07T09:34:24.133Z","updated_at":"2025-02-18T18:25:10.548Z","avatar_url":"https://github.com/laynef.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Retro React Native\n\nRetro React Native is a quick easy way to have structured styling in your React Native code base.\nIt will convert web CSS to React Native styles in JSON. You can generate a structured directory for yourself\nthrough 'retro-react-native create'\n\nOnce this is done you can generate files into the structured styling folder with auto-imports for your file names.\nThese must be files that will enter your stylesheet creators while the other files that you use can be used to \nadd mixin functions for your styling like SASS frameworks do. Those files can be imported into your styling files to\nwrap your values to change and morph. The freedom is yourself to do what you will with this file structure. However\ntheir are tools that may help.\n\n## Structured Styles\n\n### Create your style folder\n```\nretro-react-native create\n```\n\n### Generate a file with auto-imports\n```\nretro-react-native generate \u003cfolder-in-styles\u003e \u003cnew-file-name\u003e\n```\n\nIf you don't want to import a path to this file into your style creator don't use 'generate'\n\n\n## Convert CSS styles into React native styles\n\nRetro will turn your css into json then filter the json for React native styles only\n\n### How is that possible\n\n![YAP](https://i.kym-cdn.com/entries/icons/original/000/023/967/obiwan.jpg)\n\n- Well slightly Oboe Wan, any styles that do not fit React Native will be deleted\n- Check out Bootstrap 4 conversion into React Native Styles\n\nCheck React Native Styling\n- https://github.com/vhpoet/react-native-styling-cheat-sheet\n\n### To Install\n```\nnpm install -g @lfaler/retro-react-native@latest\n```\n\n## Documentation\n```\nretro-react-native\n```\n\n## To Run\n\n- You can choose to use JSON format or a JS exported Object\n```\n// JSON to JS\nretro-react-native js-to-json \u003cfull-created-js-path\u003e \u003cfull-destintation-path-json\u003e\n\n// JS to JSON\nretro-react-native json-to-js \u003cfull-created-json-path\u003e \u003cfull-destintation-path-js\u003e\n```\n\n### CSS to JS\n```\nretro-react-native css-to-js \u003cfull-path-to-css\u003e \u003cfull-destintation-path-js\u003e\n\n// Then import your js json object in your Stylesheet creator\nimport retro from '\u003cYOUR-FILE-PATH\u003e';\nimport {StyleSheet} from 'react-native';\n\nconst styles = StyleSheet.create(retro);\n\n```\n\n### JS to CSS\n```\nretro-react-native js-to-css \u003cfull-path-to-js\u003e \u003cfull-destintation-path-css\u003e\n```\n\n## What do I do with this huge file?\n\nI had this same problem. I generated a new file using 'generate' then filtered out styles\nfrom the large conversion into the new small file I generated from one single styling purpose.\nYou can pull out the styles from that large file with keywords in that file into their new destintion file.\n\n### Sort Out Big Style Files By Keyword\n```\nretro-react-native keyword-sort \u003ckeyword\u003e \u003cbig-source-file-of-react-native-styles\u003e \u003calready-created-destitination-file-name\u003e\n```\n\n## Examples\n\n### Bootstrap 4\n\n- Bootstrap 4 CSS File: https://github.com/laynef/Retro-CLI/blob/master/test/bootstrap4.css\n- Retro JSON File: https://github.com/laynef/Retro-CLI/blob/master/test/retro-bootstrap.json\n\nTo test it on an existing example\n```\ngit clone https://github.com/laynef/Retro-CLI.git\ncd example\nyarn install\nreact-native run-ios\n```\n\nThe bootstrap library is now used on React Native\nHappy coding!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flaynef%2Fweb-css-to-react-native-styles-convertor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flaynef%2Fweb-css-to-react-native-styles-convertor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flaynef%2Fweb-css-to-react-native-styles-convertor/lists"}