tachyons-css / react-native-style-tachyons

Better styling for React Native

React Native Style Tachyons

Overview

React Native Style Tachyons brings functional styling to react-native. It is inspired by Tachyons and uses it's scales and naming convention. More about the advantages of this approach.

Let's see how tachyons compares to traditional styling:

1. Traditional react-native style:

import {StyleSheet} from "react-native";

const s = StyleSheet.create({
  view: {
    borderWidth: 1,
    justifyContent: "flex-start",
    padding: MAGIC_PIXEL_VALUE
  },
  text: {
    color: "white",
    textAlign: "center"
  }
})

<View style={[s.view]}
   <Text style={[s.text]}>Something</Text>
</View>

2. Improved with react-native-style-tachyons:

import {styles as s} from "react-native-style-tachyons";

<View style={[s.ba, s.jcfs, s.pa2]}>     /* 'ba' means border-all */
   <Text style={[s.white, s.tc]}>
       Something
   </Text>
</View>

3. or even simpler:

<View cls="ba jcfs pa2">                 /* string is checked for validity */
   <Text cls="white tc">
       Something
   </Text>
</View>

Of course you can use your old styles along tachyons' classes.

Advantages

• Less code
• No need to maintain a separate stylesheet
• No need to find a proper name for every component you want to style
• Looking at a component tells you exactly how it looks, it's all in one place.

Tachyons' scale

• 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.

• 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.

• You can scale the entire design just by setting a different rem. This is a great advantage when building a responsive app.

  More about Tachyons' spacing

  More about Tachyons' typography

• The optional fontRem parameter scales the font sizes independently of other styles.

Usage

react-native-style-tachyons needs to know your rem upon start:

1. In the entry point of your app include:

   import NativeTachyons from 'react-native-style-tachyons';
   import { StyleSheet } from 'react-native';
   
   NativeTachyons.build({
       /* REM parameter is optional, default is 16 */
       rem: screenWidth > 340 ? 18 : 16,
       /* fontRem parameter is optional to allow adjustment in font-scaling. default falls back to rem */
       fontRem: 20
   }, StyleSheet);

   Sensible rem/fontRem values

   Experience with variously sized iPhone and Android phones from 4" to 6" displays showed, that for tablets, rem values in the range of 12 - 18, depending on device resolution, work well. For phones, the same rem can be used, but fontRem should be floored at 14, to keep everything readable.

2. To use the styles

   import { styles as s } from "react-native-style-tachyons";

   To 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"].

3. To use the cls='' syntax, you have to wrap your component:

   import NativeTachyons from "react-native-style-tachyons";
   
   NativeTachyons.wrap(
       class MyComponent extends React.Component {
       ...
   })
   
   /* or if you use simple functions */
   NativeTachyons.wrap(() => <Text cls="b">Hi there!</Text>)

   If you prefer to use a different propName instead of cls, specify the name in the options:

   NativeTachyons.build({
       clsPropName: "cls"
   }, StyleSheet);

Reference / Supported Properties

FlexBox

absolute               position: "absolute"                 /* default: "relative" */
flx-i                  flex: 1
flx-row                flexDirection: "row"                 /* default: "column" */
flx-row-reverse        flexDirection: "row-reverse"
flx-col-reverse        flexDirection: "column-reverse"
flx-wrap               flexWrap: "wrap"                     /* default: "nowrap" */
aifs                   alignItems: "flex-start"             /* default: "stretch" */
aic                    alignItems: "center"
aife                   alignItems: "flex-end"
jcc                    justifyContent: "center"             /* default: "flex-start" */
jcfe                   justifyContent: "flex-end"
jcsb                   justifyContent: "space-between"
jcsa                   justifyContent: "space-around"
asfs                   alignSelf: "flex-start"
asfe                   alignSelf: "flex-end"
asc                    alignSelf: "center"
ass                    alignSelf: "stretch"

Margins & Paddings (Scale)

ma0 ... ma8            margin: 0|0.25|0.5|1|2|4|8|16|32 rem
ml|mr|mb|mt [0-8]      marginLeft, marginRight, marginBottom, marginTop
mh [0-8]               marginHorizontal
mv [0-8]               marginVertical

/* Same with p for padding */

Heights & Widths

h1 ... h6              height: 1|2|4|8|16|32 rem
w1 ... w6              width: 1|2|4|8|16|32 rem

min-h1 ... min-h6      minHeight: 1|2|4|8|16|32 rem
max-h1 ... max-h6      maxHeight: 1|2|4|8|16|32 rem

Absolute

absolute                     position: absolute
top|right|bottom|left-0      top|right|bottom|left: 0 rem
                  ... 1                         ... 1 rem
                  ... 2                         ... 2 rem

absolute-fill                position: absolute, top/left/right/bottom: 0

Borders

ba                     borderWidth: 1
bl|br|bt|bb            borderLeftWidth: 1 | borderRightWidth: 1...

br0 ... br5            borderRadius: 0|0.125|0.25|0.5|1]2 rem
br--bottom             bottom radius only
br--top                top radius only
br--right              right radius only
br--left               left radius only

Text & Fonts (Scale)

f5                     fontSize: 1 rem
f1 ... f6              fontSize: 3|2.25|1.5|1.25|1|0.875 rem
f-headline             fontSize: 6 rem
f-subheadline          fontSize: 5 rem

normal                 fontWeight: normal
b                      fontWeight: bold
fw1 ... fw9            fontWeight: 100 ... fontWeight: 900

i                      fontStyle: italic

tl|tc|tr|tj            textAlign: left|center|right|justify

lh-solid               lineHeight: 1 rem
lh-title               lineHeight: 1.25 rem
lh-copy                lineHeight: 1.5 rem

/* Letter-spacing is only supported on iOS */
tracked                letterSpacing:  0.1 rem
tracked-tight          letterSpacing: -0.05 rem
tracked-mega           letterSpacing:  0.25 rem


no-underline           textDecorationLine: "none"
strike                 textDecorationLine: "line-through"
underline              textDecorationLine: "underline"
strike-underline       textDecorationLine: "underline line-through"

Font-Families

Specify the font-families you need in the configuration to use them:

ff-iowan               fontFamily: "Iowan Old Style"

/* setup: */
NativeTachyons.build({
    fonts: {
        iowan: 'Iowan Old Style'
    }
}, StyleSheet);

Note for Android: For weights on custom fonts to work correctly you have to name them like this (reference):

    {fontFamilyName}.(ttf|otf)
    {fontFamilyName}_bold.(ttf|otf)
    {fontFamilyName}_italic.(ttf|otf)
    {fontFamilyName}_bold_italic.(ttf|otf)

Images

rm-contain             resizeMode: "contain"
rm-cover               resizeMode: "cover"
rm-stretch             resizeMode: "stretch"

tint-$color            tintColor: $color, see Colors section

Opacity

o-10|20|...|100        opacity: 0.1|0.2|...|1
o-05                   opacity: 0.05
o-025                  opacity: 0.025

Colors

• When using the cls='' syntax, colors can be specified directly in the string. Every Color supported by react-native works. If the color is prefixed with bg- the backgroundColor will be set. A prefix of b-- sets the borderColor.

  bg-green                     green background
  #232323                      text color of #232323
  b--rgba(255,255,255,0.5)     border set to rgba(255,255,255,0.5)
  tint-blue                    tint-color set to blue

• You can also specify a palette in the options and Tachyons will generate styles for you. It will also generate variants with different opacities.

  NativeTachyons.build({
     colors: {
        palette: {
           green: "#00FF00",
        }
     }
  }, StyleSheet);

  The same syntax with bg- for background and b-- for borderColor applies.

  bg-green                green background
  b--green                green border        // Note: double hyphens signify a class that needs
  green                   green text          // another class to work in this case a border-setting
  
  /* alpha variants (same for bg- and b--) */
  green-10, green-20 ... green-90	      green text with 10%, 20%, ... , 90% alpha

TypeScale

• You can specify the typescale in the options and Tachyons will generate the font sizes for you.

NativeTachyons.build({
    typeScale: {
        f1: '1.625',
        f2: '1.375',
        f3: '1.125',
        f4: '0.9375',
        f5: '0.8125',
        f6: '0.75',
        f7: '0.625',
    },
    rem: 16,
}, StyleSheet);

This will result in font sizes of:

{
    f1: 26,
    f2: 22,
    f3: 18,
    f4: 15,
    f5: 13,
    f6: 12,
    f7: 10,
}

Custom Styles

You can add custom styles you may need to the configuration at startup.

/* setup: */
NativeTachyons.build({
    customStyles: {
        myCustomBW: {
	    borderWidth: 2
	}
    }
}, StyleSheet);

Raw Values

To access the actual computed sizes:

import { sizes } from "react-native-style-tachyons"

const s = sizes.ma2          /* sizes.w4, ... */

Changes

See the ChangeLog

react-native-style-tachyons's Issues

Additional elements

@fab1an I switched my app entirely to native tachyons and it's working awesomely.

I'm currently inlining a couple of properties that are not available:

• StyleSheet.hairlineWidth: no bl|br|bt|bb equivalent
• size: some components (notably react-native-vector-icons) need a size property, it would be nice to have something based on rems
• border[Top|Bottom|Left|Right]Color: this I can do in my app, since colors are separate
• 0.5 height/width: is there no room for them ? :)

In any case, this is the way styling should be done.

Really great library !

Little mistake on documentation

tl|tc|tr|tj textAlign: left|right|center|justify

should be

tl|tr|tc|tj textAlign: left|right|center|justify

usage without NativeTachyons.build?

hi! thanks for the lib. I got here mainly because of looking for shortcuts for the react native styles, such as <View style={[s.flx_row]}>.

As per the docs, there is the need to call the init method before first use: NativeTachyons.build({}, StyleSheet); when I built a android app in release mode I noticed the call takes ~50ms, which is not too much (although more than expected) but I was thinking that for usage of my kind, such call shouldn't really be necessary. Just an idea.

cls wrapper appears to overwrite other style definitions

I'm trying to build use the DrawerNavigation component from ex-navigation in conjunction with the cls wrapper. What appears to be happening is that the definitions specified in the wrapped component are rendered correctly. But after introduced the wrapping of the child component, the rendering of the parent navigation component appears to have been disabled. It's as if the style definitions of the parent have been overwritten and effectively nulled out.

Am I potentially wrapping the child component incorrectly? Or would a running example help to illustrate the issue?

color styling doesn't apply to <Text>

Applying color styles to Text components doesn't work for me. Example:

import { styles as s } from "react-native-style-tachyons";

...
render() {
	return (
		<Text style={[s.f4, s.white]}>My Text</Text>
	);
}

f4 font size is applied, but the color is the default black instead of white. If I create a stylesheet and add it to the style prop, it changes the color. Am I using it correctly?

is it possible to add typescript types file? as you know almost everyone now refactored to use typescript

Removed the need to pass ReactNative's Stylesheet constructor

Because we can't rely directly on react-native's code, we need to pass StyleSheet's constructor on build.

Depends on this bug: facebook/react-native#7850

Support for sharing web/RN styles (brainstorming)

I'm new to tachyons and not even sure if this is possible; but by having immutable, predefined CSS class names, there might be some unique opportunities somewhere.

Is it feasible to add support for sharing styling across React Native and browser?

The ideas from other libraries I've seen so far are:

1. Wrapping components:

export default stylings(styles)(MyComponent)

2. Style-only components:

render () {
  return (
    <StyleOnlyComponent>
      <MyComponent />
    </StyleOnlyComponent>
  )
}

3. Separate stylesheet:

import styles from './MyComponent'

4. Stripping inline styles on web

Unfortunately, I don't know if any current solution allows you to keep styles in the same file...and if it did, I'm guessing you would need to use if/then to return either HTML or RN components.

I'm not advocating any particular one of these examples but brainstorming if the immutable classes could be organized in such a way to enable a new paradigm of organizing shared web and React Native styles for a better design/dev experience.

is this still in active development?

just wondering whether I should use this or not....

Underline text property

Similar to the b property (fontWeight: bold) and i (fontStyle: italic), it would be handy to be able to set an underline u property:
textDecorationLine enum('none', 'underline', 'line-through', 'underline line-through')

Line height is broken

react-native-style-tachyons calculates line-height as being in rem but in the tachyons css they are actually unitless numbers, which by css specification get multiplied to the font's computed size.

So, to give an example, if the base font size (rem) is 16px and we have:

<p class="f3 lh-copy">

where

.f3 {
    font-size: 1.5rem;
}
.lh-copy {
    line-height: 1.5;
}

then the computed styles should be:

font-size: 24px; /*  1.5 * 16px */
line-height: 36px; /* 1.5 * 24px */

instead react-native-style-tachyons computes them as:

font-size: 24px; /*  1.5 * 16px */
line-height: 24px; /* 1.5 * 16px */

So, probably in order to compute them the right way it needs to be aware of the other styles present on the Text element that change the font size. It doesn't sound like an easy fix, does it?

Opacity suffix translates badly

Adding an opacity suffix appears to translate to an invalid property.

For example, this class

<View cls="bg-grey-10">

Causes the following issue:

Warning: Failed prop type: Invalid prop `backgroundColor` supplied to `RCTView`: grey_10
Valid color formats are
  - '#f0f' (#rgb)
  - '#f0fc' (#rgba)
  - '#ff00ff' (#rrggbb)
  - '#ff00ff00' (#rrggbbaa)
  - 'rgb(255, 255, 255)'
  - 'rgba(255, 255, 255, 1.0)'
  - 'hsl(360, 100%, 100%)'
  - 'hsla(360, 100%, 100%, 1.0)'
  - 'transparent'
  - 'red'
  - 0xff00ff00 (0xrrggbbaa)

Bad object: {
  "flex": 1,
  "marginVertical": 64,
  "marginHorizontal": 8,
  "borderWidth": 1,
  "backgroundColor": "grey_10"
}
    in RCTView (created by View)
    ...

Have I used the wrong syntax?

Can this wrap an entire React Native project?

I am wondering if it is possible to wrap an entire React Native project, so that every component can automatically use cls=""

incompatibility with react-stamp

Hi there, thanks for making this module.
However, the NativeTachyons.wrap HOC isn't compatible with react-stamp.

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

This function in particular is invalidating the component Im passing to the HOC if its created like this instead of using the es6 class syntax (I haven't tried es5 syntax):

export default NativeTachyons.wrap(stamp(React).compose({
  ...
}));

So for the moment I have to use the style prop instead of the cls prop. How necessary is this validation step?

NativeTachyons.wrap will not style "renderHeader"

I wrap a class, which contains a ListView, with @NativeTachyons.wrap. However, the ListViews' renderHeader output will not be styled.

Strangely enough, reactWrapper._recursiveStyle is called with the output from renderHeader, but the transformed elementTree does not seem to be used in the actual output.

Am I doing something wrong or is this a shortcoming of the wrapper?

import React, { Component } from 'react'
import { Text, ListView, StyleSheet } from 'react-native'
import NativeTachyons from 'react-native-style-tachyons'
NativeTachyons.build({}, StyleSheet);

@NativeTachyons.wrap
export default class Example extends Component {
  render() {
    const data = [1,2,3,4]
    const dataSource = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 })
    ds = dataSource.cloneWithRows(data)
    const renderHeader = () => (<Text cls="b">Header</Text>)
    const renderRow = (rowData) => (<Text key={rowData} cls="green">{rowData}</Text>)
    return (
      <ListView dataSource={ds} renderHeader={renderHeader} renderRow={renderRow} />
    )
  }
}

undefined is not an object (evaluating 'navigator.userAgent.toLowerCase')

Hello and thanks for the great package! I like the idea of tachyons and the scaling text size was the icing on the cake. I ran into a problem though and can't sort out what is going wrong.

The error is thrown when the app is not connected to debugger. It occurs even with a release build which is very problematic.

useColors in browser.js is checking navigator.userAgent.toLowerCase to determine if colors can be used in debug console when Tachyons attempts to create the debug function https://github.com/tachyons-css/react-native-style-tachyons/blob/master/lib/index.js#L66

My theory is that I am loading the tachyons package before react-native and thus the navigator string isn't initiated but every idea I've tried hasn't made a difference.

Do you have any insight on how to circumvent/fix this? Thanks.

Get the Raw Config File Passed to Style Tachyons

It would be nice if we could get the raw config object passed to NativeTachyons in the build step. This would help to set the colors independentaly on Components which are not supported.

Also getting the raw values of the Font Families would also be a great help.

Bug: wrapped component can return null

Then recursiveStyle function failed

https://github.com/tachyons-css/react-native-style-tachyons/blob/master/src/reactWrapper.js#L34

function recursiveStyle(elementsTree) {
    // here elementsTree === null and next line throws
    const { props } = elementsTree;

should be something like

function recursiveStyle(elementsTree) {
    if(!elementsTree) return elementsTree;
    const { props } = elementsTree;

I can send PR

Question: justify the text in Android

With this library you can justify the text in Android? Thanks.

FontWeight for custom font in Android

Is there a way to use fontWeight for a custom font in Android?

This my root:

NativeTachyons.build({
    rem: screenWidth > 340 ? 18 : 16,
    fontRem: 20,
    fonts: {
        primary: 'Cabin-Regular'
    },
colors: {
      palette: {
        dGrey: '#56626d',	// dark grey
				

and my element:
<Text style={[s.ff_primary, s.dGrey, s.f3, s.mb4, s.fw6]}>

Using fw6 breaks the fontFamily styling for android, and reverts to the default font.

Apparently u need to specify the exact weight name for Android:

// iOS
{
  fontFamily: 'OpenSans',
  fontWeight: '600',
  fontStyle: 'italic'
}

// Android
{
  fontFamily: 'OpenSans-SemiBoldItalic'
}

... but not sure how to incorporate this with tachyons?

Support themes

I love this library, since this is a problem I'm having in my app, the MAGIC sizes :)

How would you approach having app-wide themes ?

I think it could be done by having the library return the Stylesheet.create(..), but currently it sets the styles property and this makes it behave like a singleton (as far as I can understand).

Any thoughts on this ?

[feature] Provide option to not recurse the children

Hi there!
I've almost finished implementing optional recursion of children (in my fork), and I was wondering if there is interest in merging it into this repo?

My reasoning is to make the conversion of cls -> style a little bit more explicit in our project, and then create some wrapped primitives wrap(Text), wrap(View) etc to use in place of the defaults.

Moreover sometimes the recursion isn't 100% effective and doesn't handle the conversion of every classname in tree (no concrete example off the top of my head), so I end up wrapping things multiple times down the tree and that seems inefficient.

I'll post here again once I've got some code/tests up.

Component Loses Style After Second Render With Mobx

Here is my Component with which I use Mobx.

import React, { Component } from "react";
import { Text, View } from "react-native";
import NativeTachyons from "react-native-style-tachyons";
import dateformat from "dateformat";
import { observable } from "mobx";
import { observer } from "mobx-react";

@observer
class NStatusBar extends Component {
  @observable now = new Date();

  constructor(props) {
    super(props);

    this.render = this.render.bind(this);
  }

  componentDidMount() {
    const updateTimeEveryTenSeconds = setInterval(() => {
      this.now = new Date();
    }, 10 * 1000);
  }

  render() {
    return (
      <View cls="jcc">
        <Text cls="ff-regular f5 dark">
          {dateformat(this.now, "hh : MM TT")}
        </Text>
      </View>
    );
  }
}

export default NativeTachyons.wrap(NStatusBar);

The first render is alright, the styles are appiled correctly, after the second render the styles are not shown.This only happens while using the MobX Observer

Upgrade to RN 0.56

These two commits break wrapping rn view/text
facebook/react-native@e708010
facebook/react-native@3e534b9

Remove larger parts of the scales: f-headline, f-subheadline, ma6, ma7

I think about removing f-headline, f-subheadline and ma7, not sure about ma6.

They probably don't make much sense on mobile, since the are too large for mobile display?

Add Examples of Responsive Font Sizes

It would be nice if someone could give an example on how to set the rem value based on device dimensions.

An example based on standard device dimensions would be really helpful.

Thanks

Positioning

Hi @fab1an ! Big thanks for the library!

Any plan for including tachyon's positioning styles (top-0, bottom-0 etc.) ?
Would you accept a PR for that?

-Sam

@NativeTachyons.wrap not effect

import NativeTachyons from "react-native-style-tachyons";

@NativeTachyons.wrap
export default class ProfileScreen extends Component {
...


Something


...
but it cause error like this:
style 'ba' not found

Set f5 on Texts without fontSize

Texts without font-size should probably be set to f5 (= 1rem). Otherwise everything scales except the Text itself.

Readme contains reference to tachyons colours

I can't find the tachyons colour palette anywhere in the code for this package.

'customStyles' documentation

I noticed the ability to add custom styles via the source code. Is there any documentation for this feature?

Add tachyons for flex: 2 .. 10

flx-2 .. flx-10?

How do you define a fontFamily?

Is there a way to define the fontFamily? Maybe during NativeTachyons.build? something similar to defining the color palette

So this
<Text style={[{ fontFamily: 'Iowan Old Style' }]}>Hello World</Text>
can be turn into
<Text style={[s.ff]}>Hello World</Text>

Add tachyon for zIndex

z-0..10?

An in-range update of eslint_d is breaking the build 🚨

Version 4.2.3 of eslint_d just got published.

Branch	Build failing 🚨
Dependency	eslint_d
Current Version	4.2.2
Type	devDependency

This version is covered by your current version range and after updating it in your project the build failed.

As eslint_d is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

---

Status Details

• ❌ continuous-integration/travis-ci/push The Travis CI build failed Details

Not sure how things should work exactly?

There is a collection of frequently asked questions and of course you may always ask my humans.

---

Your Greenkeeper Bot 🌴

Border thickness

How do you set the border thickness to something greater than 1?

To set thickness to say 2, I've tried:

• ba2
• ba_2
• ba-2
• ba--2

But none of these are legal properties.

Can't override flexbox properties with defaults?

It looks like the default properties (e.g. justifyContent: 'flex-start') aren't available, so there's no way for a parent component to override a child's style for one of those properties.

Here's what I'd like to do:

function Child({ props }) {
  return (
    <View style={[s.jcfe, props.style]}></View>
  )
}

function Parent() {
  return (
    <Child style={[s.jcfs]} />
  )
}

Correct me if I'm wrong but as far as I can tell that's not possible.

Edit: Of course you can use the regular react-native syntax, but I think it would be nicer to be able to stick with the tachyons classes.

Provide a default-color palette

I'm thinking about providing a default-color palette for react-native-tachyons, but I'm not sure which colours to pick.

1. https://twitter.com/mrmrs_/status/525916576046796800
2. https://github.com/tachyons-css/tachyons-colors/
3. http://clrs.cc/

Also: Right now dark and light variants are generated using https://www.npmjs.com/package/color, but I'm not satisfied with the results. Possible changes:

• Make it more configurable so that the values for lighten and darken can be specified for each color individually?
• Use other options of color like whiten/blacken or saturate/desaturate.
• Remove the option at all and make it up to the user to specify a dark and a light style?

Expose raw values for color properties

Some libraries don't support customization via the style property and instead expect a raw color to be passed.
Such a prominent library is https://github.com/oblador/react-native-vector-icons. Exposing the raw colors the same way we expose sizes will be very useful when working with such library.

An in-range update of eslint-plugin-react is breaking the build 🚨

Version 6.10.1 of eslint-plugin-react just got published.

Branch	Build failing 🚨
Dependency	eslint-plugin-react
Current Version	6.10.0
Type	devDependency

This version is covered by your current version range and after updating it in your project the build failed.

As eslint-plugin-react is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

---

Status Details

• ❌ continuous-integration/travis-ci/push The Travis CI build failed Details

Release Notes

v6.10.1

Fixed

• Fix jsx-indent auto fix with tabs ([#1057][] @kentcdodds @webOS101)
• Fix jsx-indent crash ([#1061][] @iancmyers)
• Fix void-dom-elements-no-children crash and fix it to only checks for a createElement call from
  React ([#1073][] @jomasti)
• Fix component detection that caused a false positive in no-multi-comp ([#1088][] @benstepp)

Commits

The new version differs by 11 commits .

• ab03af8 Update CHANGELOG and bump version
• b646485 Merge pull request #1089 from benstepp/bs-multicomp-false-positives
• c038899 Bug fix for false positives with no-multi-comp
• 8148833 [Fix] Update void-dom-elements-no-children createElement checks
• c45ab86 Merge pull request #1081 from webOS101/jsx-indent-fix
• 7863a5c Fix jsx-indent single line jsx
• 416deff Update void-dom-elements-no-children
• 22f3638 Merge pull request #1077 from iancmyers/fix-jsx-indent-template-conditional
• c6f4a5e Fix error caused by templates in ConditionalExpressions (jsx-indent)
• a4b6a85 Merge pull request #1058 from kentcdodds/pr/jsx-indent-tabs-fix
• 6e5f688 [Fix] jsx-indent with tabs (fixes #1057)

See the full diff.

Not sure how things should work exactly?

There is a collection of frequently asked questions and of course you may always ask my humans.

---

Your Greenkeeper Bot 🌴

Access color from tachyons [feature request]

Wich could able to access the computed color like how we able to access sizes from tachyons, appreciate much

"document is not defined" using RN tachyons 3.3.2

This error appeared after upgrading to 3.3.2: "Can't find variable: document"

Stack trace shows
index.js : 66
debug.js : 119
browser.js : 49

useColors() references document

Add style for image's tintColor

Maybe tco-black or itc-black or something

Warning Failed prop type : invalid prop `style` of type `array` supplied to Styled(text) expected object.

Hello,

I keep getting this warning and none of the styles (from react-native-style-tachyons) work in my project.

"Warning Failed prop type : invalid prop style of type array supplied to Styled(text) expected object."

I also get another warning.

"Warning Failed prop type: invalid props.style key 0 supplied to Text.

Though, I usually get the second one when I use StyleSheet.create({}) to create my styles.
And the first one is due to style={[array, arrayItem]} kind of styles.

I have followed the Usage guide on the README, when I try to console.log(s) I get a long object of styles as expected.

I've also used both cls and style methods. Both fail with both warnings.

I'm not sure why these warnings only apply on my setup.

Versions:

react-native-cli 2.0.1
react-native : 0.44.0

Thank you.

Add properties for flexGrow, flexShrink, flexBasis

as documented on the RN page
https://facebook.github.io/react-native/docs/layout-props.html

Adding separate config for font rem

I've found that scaling for phone vs tablets is challenging. While phone resolutions may be similar to tablets due to the high-DPI retina displays, their more extreme landscape / portrait differences change scaling requirements.

Our app scales well for the widths, margins and padding between iPhone and iPads. However the text scaling is far too small on iPhones. I propose an optional fontRem config that will override the rem config just for fonts. Would you be interested in a PR?

Height & width granularity

The jump from 4 to 5 on the height/width scale is 8 rem to 16 rem. Often the layout needs finer granularity than that. 12 rem would work well in many cases. Is there a way to add them (e.g. h3 + h4 = 12 rem) using the existing tachyons library?

Style 2 doesn't work with hyphenated classes

Javascript doesn't like hyphens in property names. So when I do

<View style={[s.flx-i,s.bg-gold]}>

I get Can't find variable i

Is there a workaround for this other than to use NativeTachyons.wrap?

Accessing lightened/darkened colors

Hi!
First, thanks for this fantastic library!
I think it would be useful if you would export the allColors object too. For instance I would like to use the darkened version of a color from the palette for a TouchableHighlight's underlayColor .
What do you think?

How to change scales

Is there a way to override the height and width rem scales?