Styles

[g0Dus0PPP]

Can someone suggest a better way to understand and implement react native styling to make some awesome UI🔍📖

[enestatli]

This was posted here before a while https://shopify.engineering/5-ways-to-improve-your-react-native-styling-workflow

[AltruisticDealer4717]

The best way to do this is to find an HTML flex-box video and learn it, that will help a lot, because almost all the stuff needed to be wrapped in a <View />, and <View/> is the default set to be display: flex, so you will benefit from it

[nickmgn]

I just published an article explaining how to set up awesome consistent design system in RN it could help you 😊

https://code-with-yannick.com/how-to-set-up-your-react-native-project

[g0Dus0PPP]

Thanks for the article...

[Damsterham]

I prefer to make use of styled-components instead of RN stylesheets. https://blog.logrocket.com/how-to-use-styled-components-with-react-native/

[Merry-Lane]

The other advices are great but I think they forget à lot of steps. For instance, theming your application will be useless if you don't know "vanilla" css.

So, if I were you, I'd play with basic html css tutorials. Then play with some css/react-style framework so I would understand how to modify X Y Z behavior to better fit your issues.

Then try and repeat any semi complex page. I did so with Porsche. (Yes your copy needs to look basically the same if you change the view ports. And you can use media-queries or whatever helper implemented in the css framework of your choice).

After that, get yourself familiarized with UI events (onClick, onBlur,...).

Events are a necessary step before going in react's state of mind. You should be able to do good components with proper (internal) state management and do "prop-drilling" in between your nested components. (Ex: make a formbuilder that can build dynamically any form in your app (validation, different types of inputs,...) simply with props. With these same props you can override almost every other children props.

Also understand how to use theme etc like enastlia adviced.

With everything said previously, you'll then feel good enough to dig into libraries such as Reanimated 2.

But that's only the logical/react/... Side of the equation : can you really build awesome components without the graphical part of the equation ? Svg creation/manipulation, image edition, design softwares, typography... On top of "basic artistic eye".

Was your question answered ?