TVke / react-native-tailwindcss

A react-native style system based on TailwindCSS
https://tvke.github.io/react-native-tailwindcss/
MIT License
565 stars 34 forks source link

Behavior of `t.flex1` #3

Closed davidgovea closed 5 years ago

davidgovea commented 5 years ago

Hi @TVke -

I wanted to bring up a discussion of the flex1 rule's behavior.

Example: https://snack.expo.io/@lokodev/tailwind-flex1-demo (see the commented-out rule)

flex

In other places where RN diverges from web functionality, it looks like adjustments have been made to maintain the "intent" of the rule (like shadows->elevation on android).

{ flex: 1 } is a very common pattern in RN, and when upgrading from the older 0.7.x-based branch, I had to refactor-remove several uses of t.flex1 and t.flexGrow.

Have you run into this, or is there a different approach that I've missed?

Thanks for your time! -D

TVke commented 5 years ago

Hey @davidgovea Good point, because of the default config file of Tailwindcss 1.0 contains a specific string it occurred to me that flexGrow is the correct way to go as it is universal in css and Yoga. The flexBasis property does accept a string and I went with that option. I completely understand that the t.flex1 is behaving different then expected so I wil change that as soon as possible.

I was thinking something like this in the config file:

flex: {
      '1': '1 1 0%',
      auto: '1 1 auto',
      initial: '0 1 auto',
      none: 'none',
    },

becomes:

flex: {
      '1': '1',
      auto: '1',
      initial: '0',
      none: '0',
    },

so that the 'none' get's filtered and otherwise the first value is used. when You want to define a negative value it would become:

t._flex1

I would love to hear your opinion.

Greetings

davidgovea commented 5 years ago

@TVke ah! I knew I must have been missing something:

I didn't see the t.grow and t.grow0 rules -- was expecting flexGrow, like in the pre-1.0 version.

Did you have a reason for renaming tailwind's .flex-grow and .flex-shrink to t.grow / t.shrink?


Separate from that, PR #4 looks good -- I think it definitely makes sense to smooth out the differences between web/yoga in this way.

Thanks for the fast response! I think the adoption of this library could really take off.. tailwind changed the game for us on web, and our CSS experts have been able to get productive in RN right away with this!

TVke commented 5 years ago

The flexGrow to grow and flexShrink to shrink was accidental 😊 I will add it to PR #4