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

Search
K
Hire us
Please opt in to our enterprise plan (coming soon) for priority support with NativeBase. If you are starting a new project, we recommend using gluestack-ui. For your existing projects, you can utilize @gluestack-ui/themed-native-base (beta).
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 following card in React Native.
Playground
Today @ 9PM
Let's talk about avatar!
Remind me

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.
Playground
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
MadeWithNativeBase