Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/farwayer/react-native-tstyles
Tachyons-like styles for React Native
https://github.com/farwayer/react-native-tstyles
react-native styles stylesheet styling tachyons
Last synced: 23 days ago
JSON representation
Tachyons-like styles for React Native
- Host: GitHub
- URL: https://github.com/farwayer/react-native-tstyles
- Owner: farwayer
- Created: 2019-02-25T20:38:44.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2020-11-02T11:47:18.000Z (about 4 years ago)
- Last Synced: 2024-11-21T09:02:36.281Z (about 1 month ago)
- Topics: react-native, styles, stylesheet, styling, tachyons
- Language: JavaScript
- Homepage:
- Size: 33.2 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# React Native Tachyons Styles
_Tachyons-like styles for React Native_
[](https://www.npmjs.com/package/react-native-tstyles)
## Configuration
There are two possible options: using default styles or init with a custom
config.
### Default styles
```js
/* View styles: {
marginHorizontal: 16,
flex: 1,
flexDirection: 'row',
justifyContent: 'flex-end',
} */
import s from 'react-native-tstyles'
function MyView() {
return (
...
)
}
```
### Init with custom config
#### ui/styles.js
```js
import {createStyles} from 'react-native-tstyles'
export default createStyles({
dimensions: [14], // extra, default in dimensions.js
fontSizes: [56], // extra, default 0-48
indexes: [14], // for zIndex and elevation; extra, default 0-10
colors: {
White: '#ffffff',
Purple: '#6963d6',
Yellow: '#FFFF00',
},
styles: { // custom extra styles
paper: {
elevation: 1,
shadowOffset: {
width: 1,
height: 1,
},
shadowRadius: 1,
shadowOpacity: 0.2,
borderRadius: 2,
backgroundColor: 'white',
},
},
})
```
#### paper-with-text.js
```js
/* View styles: {
marginHorizontal: 14,
flex: 1,
alignItems: 'center',
elevation: 1,
shadowOffset: {
width: 1,
height: 1,
},
shadowRadius: 1,
shadowOpacity: 0.2,
borderRadius: 2,
backgroundColor: 'white',
} */
/* Text styles: {
fontSize: 56,
color: '#6963d6',
} */
import s from 'ui/styles'
export default function PaperWithText({text, warn}) {
return (
{text}
)
}
```
## Preventing extra rendering memo'ized and Pure- components
`s` take care result `style` property do not change if source styles are the same.
Styles checked by the reference not by the value. So prevent using new js
objects each render time like `s('row', {height: 160})`. If you need custom
style than you should create it once and use as function argument
`s('row', heightStyle)`.
## cn() helper: classname for ReactNative
You can use `cn()` helper for conditional styles.
```js
s.cn(
[flag1, onStyles1, offStyles1],
[flag2, onStyles2, offStyles2],
...
)
```
```js
import s from 'react-native-tstyles'
function SelectableText({
enabled,
selected,
...props
}) {
const textStyle = s.cn(
[enabled, 'fs16', 'fs14'], // if enabled than s.fs16 else s.fs14
[selected, 'ttu b'], // if selected than s.ttu and s.b
)
return (
)
}
```