{"id":4536,"url":"https://github.com/tachyons-css/react-native-style-tachyons","last_synced_at":"2025-05-14T11:12:41.644Z","repository":{"id":8689008,"uuid":"59372907","full_name":"tachyons-css/react-native-style-tachyons","owner":"tachyons-css","description":"Better styling for React Native","archived":false,"fork":false,"pushed_at":"2025-04-03T04:56:26.000Z","size":1026,"stargazers_count":692,"open_issues_count":2,"forks_count":51,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-04-03T22:46:07.406Z","etag":null,"topics":["android","css","css-modules","ios","react","react-native","responsive","stylesheet","typography"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tachyons-css.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":"audit.opts","citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-05-21T17:27:47.000Z","updated_at":"2025-04-03T04:56:27.000Z","dependencies_parsed_at":"2024-05-20T05:23:09.449Z","dependency_job_id":"f63c62eb-5c94-4266-9287-fbb40e32a01f","html_url":"https://github.com/tachyons-css/react-native-style-tachyons","commit_stats":{"total_commits":446,"total_committers":19,"mean_commits":"23.473684210526315","dds":0.2488789237668162,"last_synced_commit":"a49e243e9bfa4d3e3937bad51ed1df68b5fb196f"},"previous_names":[],"tags_count":81,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tachyons-css%2Freact-native-style-tachyons","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tachyons-css%2Freact-native-style-tachyons/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tachyons-css%2Freact-native-style-tachyons/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tachyons-css%2Freact-native-style-tachyons/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tachyons-css","download_url":"https://codeload.github.com/tachyons-css/react-native-style-tachyons/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248340371,"owners_count":21087438,"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":["android","css","css-modules","ios","react","react-native","responsive","stylesheet","typography"],"created_at":"2024-01-05T20:17:15.560Z","updated_at":"2025-04-11T04:22:37.995Z","avatar_url":"https://github.com/tachyons-css.png","language":"TypeScript","funding_links":[],"categories":["Components","Index","TypeScript","Uncategorized","组件"],"sub_categories":["Styling","Uncategorized","工具包"],"readme":"# React Native Style Tachyons\n\n[![npm version](https://img.shields.io/npm/v/react-native-style-tachyons.svg?maxAge=900)](https://www.npmjs.com/package/react-native-style-tachyons)\n[![license](https://img.shields.io/npm/l/react-native-style-tachyons.svg?maxAge=2592000)](https://github.com/tachyons-css/react-native-style-tachyons/blob/master/LICENSE)\n[![semver](https://img.shields.io/:semver-%E2%9C%93-brightgreen.svg?maxAge=2592000)](http://semver.org/)\n[![build status](https://github.com/tachyons-css/react-native-style-tachyons/workflows/Build/badge.svg)](https://github.com/tachyons-css/react-native-style-tachyons/actions)\n[![total townloads](https://img.shields.io/npm/dt/react-native-style-tachyons.svg?maxAge=900)](https://www.npmjs.com/package/react-native-style-tachyons)\n[![OpenSSF ScoreCard](https://img.shields.io/ossf-scorecard/github.com/tachyons-css/react-native-style-tachyons)](https://scorecard.dev/)\n[![OpenSSF Best Practices](https://www.bestpractices.dev/projects/8954/badge)](https://www.bestpractices.dev/projects/8954)\n\n## Overview\nReact Native Style Tachyons brings functional styling to react-native. It is inspired by [Tachyons](http://tachyons.io) and uses it's scales and naming convention. [More about the advantages of this approach](https://mrmrs.cc/writing/scalable-css/).\n\nLet's see how tachyons compares to traditional styling:\n\n##### 1. Traditional `react-native` style:\n\n```javascript\nimport {StyleSheet} from \"react-native\";\n\nconst s = StyleSheet.create({\n  view: {\n    borderWidth: 1,\n    justifyContent: \"flex-start\",\n    padding: MAGIC_PIXEL_VALUE\n  },\n  text: {\n    color: \"white\",\n    textAlign: \"center\"\n  }\n})\n\n\u003cView style={[s.view]}\n   \u003cText style={[s.text]}\u003eSomething\u003c/Text\u003e\n\u003c/View\u003e\n```\n\n##### 2. Improved with `react-native-style-tachyons`:\n\n```javascript\nimport {styles as s} from \"react-native-style-tachyons\";\n\n\u003cView style={[s.ba, s.jcfs, s.pa2]}\u003e     /* 'ba' means border-all */\n   \u003cText style={[s.white, s.tc]}\u003e\n       Something\n   \u003c/Text\u003e\n\u003c/View\u003e\n```\n\n##### 3. or even simpler:\n\n```javascript\n\u003cView cls=\"ba jcfs pa2\"\u003e                 /* string is checked for validity */\n   \u003cText cls=\"white tc\"\u003e\n       Something\n   \u003c/Text\u003e\n\u003c/View\u003e\n```\nOf course you can use your old styles along tachyons' classes.\n\n#### Advantages\n* Less code\n* No need to maintain a separate stylesheet\n* No need to find a proper name for every component you want to style\n* Looking at a component tells you exactly how it looks, it's all in one place.\n\n#### Tachyons' scale\n* Dimensions and typography build on a proven scale, which is relative to `rem`, the root font-size. Instead of having to find proper values for padding (or margin, width or height), you use a simple 7-step scale. `pa2` gets you `padding` of `0.5rem`.\n\n* The scale progresses with powers of two, so each step is twice as big as the last. This means everything will always line up, no more \"off-by-one-pixel\"-problems.\n\n* You can scale the entire design just by setting a different `rem`. This is a great advantage when building a responsive app.\n\n   [More about Tachyons' spacing](http://tachyons.io/docs/layout/spacing/)\n\n   [More about Tachyons' typography](http://tachyons.io/docs/typography/scale/)\n\n* The optional `fontRem` parameter scales the font sizes independently of other styles.\n\n\n## Usage\n`react-native-style-tachyons` needs to know your `rem` upon start:\n\n1. In the entry point of your app include:\n\n   ```javascript\n   import NativeTachyons from 'react-native-style-tachyons';\n   import { StyleSheet } from 'react-native';\n\n   NativeTachyons.build({\n       /* REM parameter is optional, default is 16 */\n       rem: screenWidth \u003e 340 ? 18 : 16,\n       /* fontRem parameter is optional to allow adjustment in font-scaling. default falls back to rem */\n       fontRem: 20\n   }, StyleSheet);\n   ```\n\n   ##### Sensible rem/fontRem values\n   Experience with variously sized iPhone and Android phones from 4\" to 6\" displays showed,\n   that for tablets, rem values in the range of 12 - 18, depending on device resolution, work well.\n   For phones, the same rem can be used, but fontRem should be floored at 14, to keep everything readable.\n\n2. To use the styles\n\n   ```javascript\n   import { styles as s } from \"react-native-style-tachyons\";\n   ```\n\n\tTo support javascript property syntax, all style names with hyphens have an equivalent with an underscore, e.g. `s.bg_black` instead of `s[\"bg-black\"]`.\n\n3. To use the `cls=''` syntax, you have to wrap your component:\n\n   ```javascript\n   import NativeTachyons from \"react-native-style-tachyons\";\n\n   NativeTachyons.wrap(\n       class MyComponent extends React.Component {\n       ...\n   })\n\n   /* or if you use simple functions */\n   NativeTachyons.wrap(() =\u003e \u003cText cls=\"b\"\u003eHi there!\u003c/Text\u003e)\n   ```\n\n   If you prefer to use a different propName instead of `cls`, specify the name in the options:\n\n   ```javascript\n   NativeTachyons.build({\n       clsPropName: \"cls\"\n   }, StyleSheet);\n   ```\n\n\n\n## Reference / Supported Properties\n\n##### FlexBox\n```javascript\nabsolute               position: \"absolute\"                 /* default: \"relative\" */\nflx-i                  flex: 1\nflx-row                flexDirection: \"row\"                 /* default: \"column\" */\nflx-row-reverse        flexDirection: \"row-reverse\"\nflx-col-reverse        flexDirection: \"column-reverse\"\nflx-wrap               flexWrap: \"wrap\"                     /* default: \"nowrap\" */\naifs                   alignItems: \"flex-start\"             /* default: \"stretch\" */\naic                    alignItems: \"center\"\naife                   alignItems: \"flex-end\"\njcc                    justifyContent: \"center\"             /* default: \"flex-start\" */\njcfe                   justifyContent: \"flex-end\"\njcsb                   justifyContent: \"space-between\"\njcsa                   justifyContent: \"space-around\"\nasfs                   alignSelf: \"flex-start\"\nasfe                   alignSelf: \"flex-end\"\nasc                    alignSelf: \"center\"\nass                    alignSelf: \"stretch\"\n```\n\n##### Margins \u0026 Paddings [(Scale)](http://tachyons.io/docs/layout/spacing/)\n```javascript\nma0 ... ma8            margin: 0|0.25|0.5|1|2|4|8|16|32 rem\nml|mr|mb|mt [0-8]      marginLeft, marginRight, marginBottom, marginTop\nmh [0-8]               marginHorizontal\nmv [0-8]               marginVertical\n\n/* Same with p for padding */\n```\n\n##### Heights \u0026 Widths\n```javascript\nh1 ... h6              height: 1|2|4|8|16|32 rem\nw1 ... w6              width: 1|2|4|8|16|32 rem\n\nmin-h1 ... min-h6      minHeight: 1|2|4|8|16|32 rem\nmax-h1 ... max-h6      maxHeight: 1|2|4|8|16|32 rem\n```\n\n##### Absolute\n```javascript\nabsolute                     position: absolute\ntop|right|bottom|left-0      top|right|bottom|left: 0 rem\n                  ... 1                         ... 1 rem\n                  ... 2                         ... 2 rem\n\nabsolute-fill                position: absolute, top/left/right/bottom: 0\n```\n\n##### Borders\n```javascript\nba                     borderWidth: 1\nbl|br|bt|bb            borderLeftWidth: 1 | borderRightWidth: 1...\n\nbr0 ... br5            borderRadius: 0|0.125|0.25|0.5|1]2 rem\nbr--bottom             bottom radius only\nbr--top                top radius only\nbr--right              right radius only\nbr--left               left radius only\n```\n\n##### Text \u0026 Fonts [(Scale)](http://tachyons.io/docs/typography/scale/)\n```javascript\nf5                     fontSize: 1 rem\nf1 ... f6              fontSize: 3|2.25|1.5|1.25|1|0.875 rem\nf-headline             fontSize: 6 rem\nf-subheadline          fontSize: 5 rem\n\nnormal                 fontWeight: normal\nb                      fontWeight: bold\nfw1 ... fw9            fontWeight: 100 ... fontWeight: 900\n\ni                      fontStyle: italic\n\ntl|tc|tr|tj            textAlign: left|center|right|justify\n\nlh-solid               lineHeight: 1 rem\nlh-title               lineHeight: 1.25 rem\nlh-copy                lineHeight: 1.5 rem\n\n/* Letter-spacing is only supported on iOS */\ntracked                letterSpacing:  0.1 rem\ntracked-tight          letterSpacing: -0.05 rem\ntracked-mega           letterSpacing:  0.25 rem\n\n\nno-underline           textDecorationLine: \"none\"\nstrike                 textDecorationLine: \"line-through\"\nunderline              textDecorationLine: \"underline\"\nstrike-underline       textDecorationLine: \"underline line-through\"\n\n```\n\n##### Font-Families\nSpecify the font-families you need in the configuration to use them:\n```javascript\nff-iowan               fontFamily: \"Iowan Old Style\"\n\n/* setup: */\nNativeTachyons.build({\n    fonts: {\n        iowan: 'Iowan Old Style'\n    }\n}, StyleSheet);\n```\n\n***Note for Android***: For weights on custom fonts to work correctly you have to name them like this [(reference)](https://stackoverflow.com/a/38820631/342947):\n```\n    {fontFamilyName}.(ttf|otf)\n    {fontFamilyName}_bold.(ttf|otf)\n    {fontFamilyName}_italic.(ttf|otf)\n    {fontFamilyName}_bold_italic.(ttf|otf)\n```\n\n\n##### Images\n```javascript\nrm-contain             resizeMode: \"contain\"\nrm-cover               resizeMode: \"cover\"\nrm-stretch             resizeMode: \"stretch\"\n\ntint-$color            tintColor: $color, see Colors section\n```\n\n##### Opacity\n```javascript\no-10|20|...|100        opacity: 0.1|0.2|...|1\no-05                   opacity: 0.05\no-025                  opacity: 0.025\n```\n\n## Colors\n* When using the `cls=''` syntax, colors can be specified directly in the string. Every [Color](https://facebook.github.io/react-native/docs/colors.html) supported by react-native works. If the color is prefixed with `bg-` the `backgroundColor` will be set. A prefix of `b--` sets the `borderColor`.\n\n  ```javascript\n  bg-green                     green background\n  #232323                      text color of #232323\n  b--rgba(255,255,255,0.5)     border set to rgba(255,255,255,0.5)\n  tint-blue                    tint-color set to blue\n  ```\n\n* You can also specify a palette in the options and Tachyons will generate styles for you. It will also generate variants with different opacities.\n\n  ```javascript\n  NativeTachyons.build({\n     colors: {\n        palette: {\n           green: \"#00FF00\",\n        }\n     }\n  }, StyleSheet);\n\n  ```\n\n  The same syntax with `bg-` for background and `b--` for borderColor applies.\n\n  ```javascript\n  bg-green                green background\n  b--green                green border        // Note: double hyphens signify a class that needs\n  green                   green text          // another class to work in this case a border-setting\n\n  /* alpha variants (same for bg- and b--) */\n  green-10, green-20 ... green-90\t      green text with 10%, 20%, ... , 90% alpha\n\n  ```\n\n## TypeScale\n* You can specify the typescale in the options and Tachyons will generate the font sizes for you.\n\n```javascript\nNativeTachyons.build({\n    typeScale: {\n        f1: '1.625',\n        f2: '1.375',\n        f3: '1.125',\n        f4: '0.9375',\n        f5: '0.8125',\n        f6: '0.75',\n        f7: '0.625',\n    },\n    rem: 16,\n}, StyleSheet);\n```\n\nThis will result in font sizes of:\n\n```javascript\n{\n    f1: 26,\n    f2: 22,\n    f3: 18,\n    f4: 15,\n    f5: 13,\n    f6: 12,\n    f7: 10,\n}\n```\n\n## Custom Styles\nYou can add custom styles you may need to the configuration at startup.\n\n```javascript\n/* setup: */\nNativeTachyons.build({\n    customStyles: {\n        myCustomBW: {\n\t    borderWidth: 2\n\t}\n    }\n}, StyleSheet);\n```\n\n## Raw Values\n\nTo access the actual computed sizes:\n\n```javascript\nimport { sizes } from \"react-native-style-tachyons\"\n\nconst s = sizes.ma2          /* sizes.w4, ... */\n```\n\n## Changes\nSee the [ChangeLog](https://github.com/tachyons-css/react-native-style-tachyons/blob/master/CHANGELOG.md)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftachyons-css%2Freact-native-style-tachyons","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftachyons-css%2Freact-native-style-tachyons","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftachyons-css%2Freact-native-style-tachyons/lists"}