grapp-dev / stacks

A set of components for building layouts in React Native. Powered by React Native Unistyles.
https://stacks.grapp.dev
MIT License
982 stars 24 forks source link

Allow user to override Stack styles #10

Closed gfpacheco closed 4 years ago

gfpacheco commented 4 years ago

Since you declare the user-defined style before the default for each component (style={[style, ...]}), we can never override any styles.

For example, I would like my Stack to be 200px wide, but since the default style says it should be 100% I have to add a container View that is 200px wide and put the Stack inside it (https://snack.expo.io/@gfpacheco/stacks-style).

This could be easily fixed by moving the user-defined style to the end of the style array (style={[..., style]}. And not only in the Stack component, but all of them actually.

mobily commented 4 years ago

@gfpacheco this was done intentionally, one improper style definition may break the entire UI built with Stacks, that's basically why I don't want to allow for overriding basic Stacks components styles. However, I take your point, and I think in this particular case we could swap places style and styles.fullWidth here: https://github.com/mobily/stacks/blob/e0db55da22ce2962c9dda0dfbf248d471af77491/src/Stack/index.tsx#L31

There should be a possibility to override the component's width eventually.

we can never override any styles.

you can't override styles that are necessary to render Stacks components properly, for instance, Stack– you can set any style you want but not flexDirection (which must be column always) and alignItems (which is configurable by a prop passed to the component)

your thoughts? 😉

gfpacheco commented 4 years ago

I know that some styles are essential for it to work, but I still think the user should be able to override everything, and if he breaks something it's his fault.

That said I know that this is an opinionated subject, I don't blame you for wanting to prevent your library to break, and separating styles that can/cannot be overridden seem to be a good solution.

[stylesThatCanBeOverriden, userStyles, stylesThatAbsolutelyCannotBeOverriden]

👍

mobily commented 4 years ago

@gfpacheco published in v0.9.3 https://github.com/mobily/stacks/releases/tag/v0.9.3 😊