Native UI vs NativeBase UI — So close, hard to find out!

NativeBase compiles to Native. The screenshot above uses a combination of NativeBase components which strictly follows the platform guidelines by Apple and Google. Source code of the screen above is available here.

The snippet for the “Airplane Mode” item in the above example is as follows

NativeBase’s ListItem Example

Core Rewritten: A big thanks to the Shoutem team

We have rewritten the core using Shoutem’s shoutem/theme library. A big thanks to them for the great work. It lets you style your components much like SCSS. Here is an example —

SCSS like Theming of component using Shoutem’s Theme library

Eject the complete Stylesheet to modify almost anything

Since we have one single object which defines the entire style of NativeBase, you can eject it using CLI and modify every style attribute of any component. More details can be found under the customization section of the docs.

Three themes to start with

NativeBase is packed with three preset themes.

Platform : The default theme of NativeBase which maps to the design of the platform where the app runs.

: The default theme of NativeBase which maps to the design of the platform where the app runs. Material : Sometimes, you need Material design for both the platforms. Not everyone is a fan but Google does use Material design on iOS. This theme is not 100% material yet but it can be used today.

: Sometimes, you need Material design for both the platforms. Not everyone is a fan but Google does use Material design on iOS. This theme is not 100% material yet but it can be used today. Common Colors: Most of the brands use a common color scheme for both the platforms but they also follow platform specific icons, font and orientation of the components. Common Colors theme is best suited for such use-cases.

Unified Icons

We have mapped icons such that the same code leads to relevant icons on Android and iOS.

For example: <Icon name="arrow-back" /> maps to md-arrow-back on Android and ios-arrow-back on iOS.

And yes, we also have fallback option for the legacy support.

Kitchen Sink App updated to v2.0

We have showcased each and every component of NativeBase in a demo app called KitchenSink app. You can install it and try it yourself.

Update [02/14/17]: Check it out on Exponent here.

Link to App / Play store will be updated soon.