react-native-tstyles

    1.0.0-beta3 • Public • Published

    React Native Tachyons Styles

    Tachyons-like styles for React Native

    NPM version

    Configuration

    There are two possible options: using default styles or init with a custom config.

    Default styles

    /* View styles: {
      marginHorizontal: 16,
      flex: 1,
      flexDirection: 'row',
      justifyContent: 'flex-end',
    */
     
    import s from 'react-native-tstyles'
     
    function MyView() {
      return (
        <View style={s`mh16 f1 row jcfe`}>
          ...
        </View>
      )  
    }

    Init with custom config

    ui/styles.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

    /* 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 (
         <View style={s`mh14 f1 aic paper`}>
           <Text style={s(`fs56`, warn ? `yellow` : `purple`)}>
             {text}
           </Text>
         </View>
      )
    }

    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.

    s.cn(
      [flag1, onStyles1, offStyles1],
      [flag2, onStyles2, offStyles2],
      ...
    )
    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 (
        <Text {...props} style={textStyle}/>
      )
    }

    Install

    npm i react-native-tstyles

    DownloadsWeekly Downloads

    16

    Version

    1.0.0-beta3

    License

    WTFPL

    Unpacked Size

    10.6 kB

    Total Files

    13

    Last publish

    Collaborators

    • farwayer