Shorthand properties not in docs

[brianaderer]

Description

Unclear how to use component styling

Problem Statement

Hi I generally like this library very much. However, it's very frustrating that I can't find a list of the shorthand style properties like h, w, etc and their arguments in the docs anywhere. Checking the RN View component it's not there either. Can you please either add this information to your docs, or provide a clear direction of where to find it?

https://v1.gluestack.io/ui/docs/components/layout/vstack

Thanks!

Proposed Solution or API

Add shorthand props to docs

Alternatives

No response

Additional Information

No response

[aaronatbissell]

Gluestack is based heavily on Nativewind (which is based heavily on Tailwind) I'd recommend leveraging the documentation from those libraries

[brianaderer]

Hi – Thanks for the reply this does help some. I use TailwindCSS extensively, but in many cases it’s not at all clear how this translates, as the two environments are structurally different. I appreciate the info and not sure if you are a maintainer or not, but leaving this here hoping they see it. This sort of implicit inheritance puts users in a place where they are guessing. For instance what about ‘leading’ with tailwind for line-height? Based on inheritance, I’d expect ` to work but it just doesn’t, I have to revert to the style property. It would save a lot of frustration if this stuff were explicitly documented on a per-component basis.

From: Aaron Pittenger @.> Sent: Sunday, August 25, 2024 7:59 PM To: gluestack/gluestack-ui @.> Cc: Brian Aderer @.>; Author @.> Subject: Re: [gluestack/gluestack-ui] Shorthand properties not in docs (Issue #2411)

Gluestack is based heavily on Nativewindhttps://www.nativewind.dev/v4/overview (which is based heavily on Tailwindhttps://tailwindcss.com/docs/installation I'd recommend leveraging the documentation from those libraries

— Reply to this email directly, view it on GitHubhttps://github.com/gluestack/gluestack-ui/issues/2411#issuecomment-2309051400, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AF5USFCZM3BI4TKE62CIEQLZTJVSVAVCNFSM6AAAAABNCX533WVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGMBZGA2TCNBQGA. You are receiving this because you authored the thread.Message ID: @.**@.>>

[aaronatbissell]

Not a maintainer, just using this library extensively recently and it's really worked out well for me! Trying to help out others if possible.

In your example, I typically go to tailwind's documentation and search for leading, that would lead me to the docs for line height which would give you the syntax for the style. Then that goes into the className prop of a component.

<Component className='leading-3' />

[Viraj-10]

Hello @brianaderer,

We noticed you're referencing gluestack-ui v1. We've recently released gluestack-ui v2, and you can check out the Migration Guide to help you transition to the latest version.

If you're still interested in learning about properties and styling in v1, you can find detailed information here under the Styling section. For a deeper dive, please visit gluestack-style.