Utility First | NativeBase | Universal Components for React and React Native

Data Display
Media and Icons
Utility First
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.

With React Native
Let's try the traditional way of building the card below in React Native.

With NativeBase
Now let's try to build the same card using NativeBase. With NativeBase, you can apply styles directly in the layout using shorthands.
The above example demonstrates the usage of alongwith , components. This approach allows us to style components without using StyleSheet API.
Apart from productivity boosts and saving time, there are other benefits to styling components using utility props. No need to name styles anymore, no need to define an object and think about naming it.
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!
Nativebase logo