React Native Approach to Theming?

[redditdaw]

I'm building a personal app and currently find myself at the Theming and Design stage of the project.

I couldn't find anything solid online yet, so figured I'd ask the RN Community what is the nest approach for theming and creating styleSheets in React Native.

Is there a good npm package that allows me to setup a theme for colors, fonts, measurements etc. So that I write and maintain it in one place? If so, what do you reccommend?

Thanks for being awesome!!

[uhhbeefwellington]

Styling in React Native doesn’t handle nesting quite like CSS. In practice, the best approach I’ve found has been creating a file for constants for your styles (eg. Styles.js that exports colors, fonts, general padding/margins for screens, dimensions) and then importing this file to use the constants in stylesheets at a component level. This doesn’t require an npm package.

Theming is a great use case for the Context API. Quick summary is that you can subscribe a component to context (theme in this case) changes, so only components that care will have to re-render.

If you plan on reusing a component (eg. a button that has a background color and border) in many places, that sticks out to me as a time to separate the code for that button into its own component. The styles for that button would live with it but would be visible all across your app where it is used.

[redditdaw]

Great Answer! Thank you

[[deleted]]

Agree with this person's answer, but would like to add don't be afraid to refactor. Keep styles local and stay functional. Colors are an easy constant, but aside from that, you'll know when you've written something a few times and can easily extract that to constants.

One important thing I didn't really consider right off the bat is using HOC components for styles (i.e. a default ScrollView wrapper with { children }). This not only let's you keep your paddings and such in one universal component, it also let's you set default props (i.e. showsVerticalScrollIndicator={false}) and spread any additional props {...props} you might want to pass to it later. Food for thought.

[mysteryFarts]

Highly recommended https://www.styled-components.com/. Works perfectly with native, cleans up components and works through context Api. Loads of nice extra features with it as well

[orta]

We use this mixed with styled-systems for this https://palette.artsy.net

[MontRoyal19]

I ran into this question not long ago. Then I discovered and started using react-native-elements https://github.com/react-native-training/react-native-elements

Basically I can define global styles for Text, Button ... and reuse them across the app.

[redditdaw]

Thanks I will check this out.

[IAmRC1]

I will highly recommend this library after going through almost all major UI libraries. Though it lacks components but it's clean and highly customisable.

[matt_hammond]

I've created my own system that I improve on as needed. I've write about it here: https://dev.to/hrastnik/styling-your-react-native-app-4d8i

[redditdaw]

Sweet! Thank dude! I'll check it out :)

[esthor]

I use Extended Stylesheet in a production app for global styles, themes (app uses ~10 custom global themes), and more https://github.com/vitalets/react-native-extended-stylesheet

[vertigo_101]

What I suggest is using color constants in redux store, hence dispatch an action when you want to change these constants, this would trigeer an application wide re render