tachyons-css/react-native-style-tachyons

Better styling for React Native

react-native-style-tachyons's Issues

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} />
    )
  }
}

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.

Little mistake on documentation

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

should be

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

Readme contains reference to tachyons colours

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

Add tachyons for flex: 2 .. 10

flx-2 .. flx-10?

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

Upgrade to RN 0.56

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

Add tachyon for zIndex

z-0..10?

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?

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?

'customStyles' documentation

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

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.

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.

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.

How to change scales

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

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

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 🌴

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?

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 !

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?

is this still in active development?

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

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

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.

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 ?

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

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?

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>

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?

Question: justify the text in Android

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

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?

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

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=""

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 🌴

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?

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?

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.

Set f5 on Texts without fontSize

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

Add style for image's tintColor

Maybe tco-black or itc-black or something

Add properties for flexGrow, flexShrink, flexBasis

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

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?

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

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')

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.

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

"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

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

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?

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.

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?

@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