Launching NativeBase 2.0

Easy theming, Better Forms, Material Design support and more

I am excited to announce NativeBase 2.0. If you haven’t heard of NativeBase yet, it is a UI component library for React Native to build native cross-platform apps.

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.
• 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.
• 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-backon Android andios-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.

NativeBase KitchenSink App for Android and iOS

And also launching NativeBase Market

We are opening up a marketplace for the developers (sellers and buyers). NativeBase is 100% open source and all it’s components will always be free. This marketplace is focussed on custom solutions and premium products using NativeBase components.

What Next?

• NativeBase 2.0 opens up the path for easier component development. We have a lot of components on our list to be added which includes unified ActionSheet, Swipeable ListItem, Slider Input, Carousel, Toasts, Animations and more complete support for Material Design.
• Web version coming soon: Port your mobile app for the web in no time. We are working on the react-native-web version of NativeBase.
• Did I say a framework? We are launching a new framework for React and React Native to make your life easier, it’s called ReazyFramework.io. I will talk more about it in a separate article, may be next week. Stay tuned!

Have a question? Join us on Slack 🙌

Did I miss anything? Feel free to add a response to the article for any correction, opinions and discussions.

Looking for a NativeBase Starter Kit?

If so, you should definitely checkout ReazyFramework.io. It’s a React & React Native framework with a powerful CLI.

I am Sanket from GeekyAnts. If you liked the article, consider recommending it.