Styling in React Native

Styling in react native is somehow different for developers with background as web developer for me because styling in react native is object mindset while in web we usually interact with rules based. In my first I found that to share styles and update styles is a little bit awkward for me. Especially when I needed to create common styles then adapt that common styles on components.

Recently I found twrnc which is an expressive API for TailwindCSS + React Native, written in TypeScript and I am really happy about this finding. If you are familiar with Tailwind css then to start developing with twrnc for react native is super easy, no learning curve because the api is almost the same.

How to use twrnc

it is straightfoward to use twrnc

• install via npm, npm i twrnc
• import in components, import tw from "twrnc";
• use in components

<View style={tw`flex flex-1 flex-col items-center justify-center`}>
              <Text style={tw``}>App is initializing...</Text>
            </View>

What I love about twrnc

• Similar api as tailwind css.
• Easy to style by rules as in web app.
• Consistent and expressive rules. measurements and colors defined in tailwind are very useful and easy to combine when developing.

What does not work

so far I have discovered several small utils do not work in the same way as tailwindcss such as

• border radius per edge
• background opacity. You will need to specify using rgba explicit as react natives way.