{"id":20325707,"url":"https://github.com/bloycey/react-native-simple-styles","last_synced_at":"2025-04-11T20:03:48.309Z","repository":{"id":57148837,"uuid":"287634771","full_name":"bloycey/react-native-simple-styles","owner":"bloycey","description":"Let's not reinvent the wheel. A stylesheet based CSS solution for React Native.","archived":false,"fork":false,"pushed_at":"2020-08-16T01:13:31.000Z","size":78,"stargazers_count":6,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-11T20:03:02.544Z","etag":null,"topics":["css","react-native","stylesheets"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-native-simple-styles","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bloycey.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-08-14T22:22:55.000Z","updated_at":"2024-02-07T01:09:01.000Z","dependencies_parsed_at":"2022-08-31T20:02:39.617Z","dependency_job_id":null,"html_url":"https://github.com/bloycey/react-native-simple-styles","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bloycey%2Freact-native-simple-styles","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bloycey%2Freact-native-simple-styles/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bloycey%2Freact-native-simple-styles/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bloycey%2Freact-native-simple-styles/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bloycey","download_url":"https://codeload.github.com/bloycey/react-native-simple-styles/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248473131,"owners_count":21109628,"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","react-native","stylesheets"],"created_at":"2024-11-14T19:41:16.125Z","updated_at":"2025-04-11T20:03:48.270Z","avatar_url":"https://github.com/bloycey.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Native Simple Styles [![npm version](http://img.shields.io/npm/v/react-native-simple-styles.svg?style=flat)](https://npmjs.org/package/react-native-simple-styles \"View this project on npm\") [![npm version](http://img.shields.io/npm/l/react-native-simple-styles.svg?style=flat)](https://npmjs.org/package/react-native-simple-styles \"View this project on npm\")\n\n\nNot everyone wants to write scoped CSS. This package allows you to write CSS that:\n\n-   All lives in the one file;\n-   Is applied using a classNames prop (similar to React);\n-   Is compatible with an atomic CSS approach;\n-   Doesn't need to be repeated for every component;\n-   Doesn't require you to import and use `StyleSheet.create()` in every component\n\n## Usage\n\nWrite your CSS in a single `style.js` file and also import the `react-native-simple-styles` npm package here. You should also make sure to export the `react-native-simple-styles` package from here using whatever name you like (this will make your life easier with importing later!). Use standard CSS-in-JS object format. You can organise your CSS however you like. E.g.\n\n```\n// styles.js\n\nimport reactNativeSimpleStyles from \"react-native-simple-styles\";\n\nconst headings = {\n\th1: { fontSize: 56 },\n\th2: { fontSize: 36 },\n\th3: { fontSize: 24 },\n}\n\nconst textUtilities = {\n\tuppercase: { textTransform: 'uppercase'},\n\titalic: { fontStyles: 'italic'}\n}\n\nexport const styles = {\n\tcenterAll: {\n\t\tdisplay: 'flex',\n\t\talignItems: 'center',\n\t\tjustifyContent: 'center'\n\t},\n\thScreen: {\n\t\theight: '100vh'\n\t}\n\t...headings,\n\t...textUtilities,\n}\n\nexport const simpleStyles = reactNativeSimpleStyles;\n```\n\nIn your components pass in your stylesheet to the `react-native-simple-styles` function you exported from `style.js`.  All of the [standard React Native core components](https://reactnative.dev/docs/components-and-apis) will be returned that you can use as normal. The only difference is that they now accept a `className` prop that you can pass your classNames to.\n\n```\nimport { styles, simpleStyles) from \"./styles/style\";\nconst { View, Text } = simpleStyles(styles);\n\nconst Example = () =\u003e (\n\t\u003cView className=\"centerAll hScreen\"\u003e\n\t\t\u003cText className=\"h1 uppercase italic\"\u003e\n\t\t\tJust like native CSS (almost!)\n\t\t\u003c/Text\u003e\n\t\u003c/View\u003e\n);\n\nexport default Example;\n```\n\nYou can also mix and match classNames and inline styles and it will work fine.\n\n```\n\u003cText className='uppercase' style={{ fontWeight: bold }\u003e This works fine too. \u003c/Text\u003e\n```\n\n## Under the hood\n\nUnder the hood reactNativeSimpleStyles is simply a higher order compnent that wraps the regular react native components.\n\nThis HOC uses React Native's `StyleSheet` component along with your stylesheet to find your styles and abstracts away the manual process of creating a `StyleSheet` for each component. Since the `StyleSheet` component is used under the hood you still get the same performance benefits (as compared to simply using inline styles, for example)\n\n## Disclaimers \u0026 Contributions\n\nFull disclosure that I am **not** primarily a React Native developer and I may have overlooked certain issues that may exist with this library.\n\nIf you would like to enhance this library, fix bugs, add typescript support, add tests, or otherwise contribute in any other way you are more than welcome to raise an issue or make a PR.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbloycey%2Freact-native-simple-styles","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbloycey%2Freact-native-simple-styles","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbloycey%2Freact-native-simple-styles/lists"}