So far we have concerned ourselves with the non-visual parts of our application, but that does not mean we have forgotten about the visual aspects.

There are many ways to style a React Native application. You could pick a ready-made component framework like react-native-paper, or a framework that allows you to use more CSS-like syntax and wrap pre-styled components like styled-components, or you can hand-roll your own styles, which is time-consuming because you have to define your own scales, colors, grids etc.... there is a lot that needs to be configured and can go wrong.

In my opinion they are all very clunky approaches which tackle the problem at the wrong level of abstraction, so ideally we want something midway between these, a tool that gives us sensible defaults yet is easy to extend and customize to fit your application style. Let me introduce you to TailwindCSS!

Tailwind works by having predefined utility classes, which you can compose by just calling them by name. Some people might not like having these long strings in their JSX, and you can make up your own mind about this. It is based on REM units, which will help your app scale properly when running on smaller or larger devices.

One more important thing to note is that React Native does not support CSS - it only has CSS-like syntax. Everything is laid out internally using a custom engine. Everything is also based on flex, and it doesn't have any of the inconsistencies you find in browsers, although some of the syntax and properties are not available.