React Native has a great StyleSheet API which is optimal for component-based systems. NativeBase leverages it and adds a layer of utility props and constraint based designed tokens on top of it.
To understand utility props, let's take an example.
Let's try the traditional way of building the above card in React Native.
Now let's try to build the same card using NativeBase.
With NativeBase, you can apply styles directly in the layout using shorthands.
Apart from productivity boost and saving time there are other benefits by styling components using utility props. No need to name styles anymore, no need to define an object and think about naming them.
Using utility-first props, you can focus on creating reusable components instead of reusable stylesheets.
Once you start writing styles this way, any other way will feel cumbersome.
Put simply, utility first approach opens up the Avatar state within developers.
Once you had a cup of tea, let's proceed to the next section!