{"id":18587387,"url":"https://github.com/s-acss/react-native","last_synced_at":"2025-11-01T23:30:29.775Z","repository":{"id":57093877,"uuid":"193650913","full_name":"s-acss/react-native","owner":"s-acss","description":"Static Atomic CSS React Native Version","archived":false,"fork":false,"pushed_at":"2021-05-27T13:27:38.000Z","size":251,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-27T04:48:04.401Z","etag":null,"topics":["acss","react-native","s-acss","sacss"],"latest_commit_sha":null,"homepage":"","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/s-acss.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2019-06-25T06:47:40.000Z","updated_at":"2023-12-07T15:44:35.000Z","dependencies_parsed_at":"2022-08-22T21:40:38.570Z","dependency_job_id":null,"html_url":"https://github.com/s-acss/react-native","commit_stats":null,"previous_names":["nu-system/react-native-acss"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/s-acss%2Freact-native","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/s-acss%2Freact-native/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/s-acss%2Freact-native/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/s-acss%2Freact-native/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/s-acss","download_url":"https://codeload.github.com/s-acss/react-native/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239340504,"owners_count":19622704,"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":["acss","react-native","s-acss","sacss"],"created_at":"2024-11-07T00:38:52.580Z","updated_at":"2025-11-01T23:30:29.731Z","avatar_url":"https://github.com/s-acss.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @sacss/react-native\n\n[![npm package][npm-badge]][npm]\n\n[npm-badge]: https://img.shields.io/npm/v/npm-package.png?style=flat-square\n[npm]: https://www.npmjs.org/package/@sacss/react-native\n\nQuick way to write style in react native.\n\nIdea from Atomic CSS Design system.\n\n```\n$ yarn add @sacss/react-native\n```\n\n## How to use?\n\n```JSX\nimport React from 'react';\nimport {Text, View, ImageBackground, Image} from '@sacss/react-native';\nimport mImg1 from \"./assets/1.jpg\";\nimport mImg2 from \"./assets/2.jpg\";\n\nexport default function App() {\n    return (\n        \u003cView bc=\"#f5f5f5\" pt={100} ph={30} h=\"100%\"\u003e\n            \u003cView mb={16} aic\u003e\n                \u003cImage br={32} w={64} h={64} source={mImg1}/\u003e\n            \u003c/View\u003e\n            \u003cText c=\"#ffffff\" p={16} bc=\"#4c5fe2\" tac mb={16}\u003eHello world!\u003c/Text\u003e\n            \u003cImageBackground source={mImg2} mb={40}\u003e\n                \u003cView bc=\"rgba(255,255,255,.8)\"\u003e\n                    \u003cText fs={40} lh={100} tac fwb c=\"#4c5fe2\"\u003eHello Again!\u003c/Text\u003e\n                \u003c/View\u003e\n            \u003c/ImageBackground\u003e\n        \u003c/View\u003e\n    );\n};\n```\n\n## How to bind to custom component?\n\n```JSX\nimport React from 'react';\nimport {Text, View} from 'react-native';\nimport withAcss from '@sacss/react-native';\n\nconst CusText = widthAcss(Text);\nconst CusView = widthAcss(View);\n\nexport default function App() {\n    return (\n        \u003cCusView bc=\"#4c5fe2\" p={16}\u003e\n            \u003cCusText tac c=\"#ffffff\"\u003eCustom text\u003c/CusText\u003e\n        \u003c/CusView\u003e\n    );\n};\n```\n\n![demo](./demo.png)\n\n## Name rules\n\nIt looks wired in first sight what we use abbreviation instead of the full name. Cause we want user just remember the rules below rather than all the props.\n\n1. Only Initials: `aic` means `alignItems: center`;\n2. Direct digital connection: `fw700` means `fontWidth:700`;\n4. `p` means `percent`: `w100p` means `width:'100%'`;\n\n```JSX\n\u003cView mb={16} bc=\"#4c5fe2\" aic\u003e\n    \u003cText c=\"#ffffff\" pt={16} pb={16} tac\u003eHello world!\u003c/Text\u003e\n\u003c/View\u003e\n```\n\nequal to\n\n```JSX\n\u003cView style={{\n    marginBottom:16,\n    backgroundColor:'#4c5fe2',\n    alignItem:'center'\n}}\u003e\n    \u003cText style={{\n      color:'#ffffff',\n      paddingTop: 16,\n      paddingBottom: 16,\n      alignItem:'center'\n    }}\u003eHello world!\u003c/Text\u003e\n\u003c/View\u003e\n```\n\n## API\n\n```JSX\nconst styleMap = {\n  ac: 'alignContent',\n  acs: ['alignContent', 'stretch'],\n  acc: ['alignContent', 'center'],\n  acfs: ['alignContent', 'flex-start'],\n  acfe: ['alignContent', 'flex-end'],\n  acsb: ['alignContent', 'space-between'],\n  acsa: ['alignContent', 'space-around'],\n  ai: 'align-items',\n  ais: ['alignItems', 'stretch'],\n  aib: ['alignItems', 'baseline'],\n  aic: ['alignItems', 'center'],\n  aifs: ['alignItems', 'flex-start'],\n  aife: ['alignItems', 'flex-end'],\n  as: 'alignSelf',\n  asa: ['alignSelf', 'auto'],\n  ass: ['alignSelf', 'stretch'],\n  asb: ['alignSelf', 'baseline'],\n  asc: ['alignSelf', 'center'],\n  asfs: ['alignSelf', 'flex-start'],\n  asfe: ['alignSelf', 'flex-end'],\n  bc: 'backgroundColor',\n  br: 'borderRadius',\n  bw: 'borderWidth',\n  bs: 'borderStyle',\n  btw: 'borderTopWidth',\n  btc: 'borderTopColor',\n  brw: 'borderRightWidth',\n  brc: 'borderRightColor',\n  bbw: 'borderBottomWidth',\n  bbc: 'borderBottomColor',\n  blw: 'borderLeftWidth',\n  blc: 'borderLeftColor',\n  btrr: 'borderTopRightRadius',\n  btlr: 'borderTopLeftRadius',\n  bbrr: 'borderBottomRightRadius',\n  bblr: 'borderBottomLeftRadius',\n  b: 'bottom',\n  b0: 'bottom',\n  c: 'color',\n  dn: ['display', 'none'],\n  f: 'flex',\n  f1: ['flex', 1],\n  fdr: ['flexDirection', 'row'],\n  fdrr: ['flexDirection', 'row-reverse'],\n  fdc: ['flexDirection', 'column'],\n  fdcr: ['flexDirection', 'column-reverse'],\n  fwn: ['flexWrap', 'nowrap'],\n  fwb: ['fontWeight', 'bold'],\n  fw100: ['fontWeight', 100],\n  fw200: ['fontWeight', 200],\n  fw300: ['fontWeight', 300],\n  fw400: ['fontWeight', 400],\n  fw500: ['fontWeight', 500],\n  fw600: ['fontWeight', 600],\n  fw700: ['fontWeight', 700],\n  fw800: ['fontWeight', 800],\n  fw900: ['fontWeight', 900],\n  fs: 'fontSize',\n  ff: 'fontFamily',\n  fsn: ['fontStyle', 'normal'],\n  fsi: ['fontStyle', 'italic'],\n  h: 'height',\n  h100p: ['height', '100%'],\n  jcc: ['justifyContent', 'center'],\n  jcsb: ['justifyContent', 'space-between'],\n  jcfs: ['justifyContent', 'flex-start'],\n  jcfe: ['justifyContent', 'flex-end'],\n  jcsa: ['justifyContent', 'space-around'],\n  jcse: ['justifyContent', 'space-evenly'],\n  l: 'left',\n  l0: ['left', 0],\n  lh: 'lineHeight',\n  m(value) {\n    return {\n      marginTop: value,\n      marginBottom: value,\n      marginRight: value,\n      marginLeft: value,\n    };\n  },\n  mt: 'marginTop',\n  mr: 'marginRight',\n  mb: 'marginBottom',\n  ml: 'marginLeft',\n  mh: 'marginHorizontal',\n  mv: 'marginVertical',\n  o: 'opacity',\n  oh: ['overflow', 'hidden'],\n  p(value) {\n    return {\n      paddingTop: value,\n      paddingBottom: value,\n      paddingRight: value,\n      paddingLeft: value,\n    };\n  },\n  pa: ['position', 'absolute'],\n  pr(value) {\n    if (value === true) {\n      return {\n        position: 'relative',\n      };\n    }\n    return {\n      paddingRight: value,\n    };\n  },\n  pt: 'paddingTop',\n  pb: 'paddingBottom',\n  pl: 'paddingLeft',\n  ph: 'paddingHorizontal',\n  pv: 'paddingVertical',\n  r: 'right',\n  r0: ['right', 0],\n  t: 'top',\n  t0: ['top', 0],\n  tac: ['textAlign', 'center'],\n  tar: ['textAlign', 'right'],\n  taa: ['textAlign', 'auto'],\n  tal: ['textAlign', 'left'],\n  taj: ['textAlign', 'justify'],\n  ttu: ['textTransform', 'uppercase'],\n  ttc: ['textTransform', 'capitalize'],\n  ttn: ['textTransform', 'none'],\n  ttl: ['textTransform', 'lowercase'],\n  w: 'width',\n  w100p: ['width', '100%'],\n  zi: 'zIndex',\n};\n```\n\nPure, simple, natural. \n\nAs you can see that is all the code we create blew. \n\nWe just did a little but can help you a lot when create style in react native.\n\nhelp us to make it better together [issue](https://github.com/nu-system/acss-react-native/issues).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fs-acss%2Freact-native","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fs-acss%2Freact-native","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fs-acss%2Freact-native/lists"}