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
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 —
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.
We have mapped icons such that the same code leads to relevant icons on Android and iOS.
<Icon name="arrow-back" /> maps to
md-arrow-backon 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.
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.
- 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.