UI and Theming
How we manage the UI and theming of the application.
Why Tailwind CSS ?
For the past few years, we have tried multiple approaches to style our React Native apps: Stylesheet API, styled-components, restyle, and more.
Right now, we are confident that using Tailwind CSS with React Native is the right solution, especially after trying Nativewind.
If you are familiar with Tailwind CSS on the web you will find it very easy to use and you can even copy past your styling from a web application and should work without issues with react native too with some minor adjustments of course.
Last but not least, Tailwind CSS was a natural choice for us, considering that most of our team members come from a web background and have had the opportunity to work with Tailwind CSS before.
Nativewind is a library that allows you to use Tailwind CSS with react native. Nativewind achieves this by pre-compiling the Tailwind CSS classes into react native stylesheets with a minimal runtime to selectively apply the styles.
Nativewind comes with different babel configuration options but we are using
compile only configuration which means that you need to create your own component and warp them with
styled component from Nativewind to use them with Tailwind class names.
This approach gives us more control over the component we want to style because we don’t want the Nativewind Babel plugin to transform all the components in our application.
For more details about Nativewind you can check their documentation.
Here is an example of how your component should look like:
You guess it right, all components imported from
@/ui are wrapped with
styled component from Nativewind and ready to accept Tailwind CSS class names. Enjoy 🥳
Nativewind is the same as Tailwind CSS, it comes with a default theme and colors that you can override by creating your own theme and colors.
You need to understand that Nativewind is a library that is built on top of Tailwind CSS. Feel free to add any Tailwind CSS config that you want to use in your application such as updating colors, spacing, typography, etc.
We have created a
ui/theme folder where you can find our custom colors that have been imported into
tailwind.config.js and used as a theme for our demo application. You can add your own color palette and use them in your components with Tailwind class names.
You can read more about how to configure your project with Tailwind CSS.
Why dark mode?
Dark mode has gained significant traction in recent years and has become an expected feature to have. By applying dark mode, it makes it easier on the eyes in low-light environments and reduces eye strain, which means more time spent on your app.
This template comes with dark mode support out of the box, and it’s very easy to customize the color scheme of your app. Thanks to tailwindcss
Since we’re using nativewind (which uses Tailwind CSS under the hood) and react-navigation we let them handle the application of theme, and we just take care of the colors we want.
We set the colors in
ui/theme/colors.js and we use them in our hook
useThemeConfig.tsx to get the theme object that we pass to react-navigation container. For more information check out react-navigation
How do we handle theme changes?
We use the
loadSelectedTheme function to load the theme from the storage if there’s a theme saved in the storage, otherwise, we let nativwind use the default theme (system).
To set the selected theme, we use the
useSelectedTheme hook, which sets the theme in the storage and updates the color scheme of the app.
Add dark mode for each component
To add the values for the light mode, you can simply write them directly in your component class. For the dark mode, you can use the dark: variant.
If you want to use the style prop, you can use the
useColorScheme hook to get the current color scheme and use it to apply the desired style. However, in most cases, you won’t need it as the dark: variant will do the job.