- Here is an example âSCSS like Theming of component using Shoutemâs ThemeÂ libraryEject the complete Stylesheet to modify almostÂ anythingSince 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Â withNativeBase is packed with three preset themes.Platform: The default theme of NativeBase maps to the platform design where the app runs.Material: Sometimes, you need Material design on both the platforms.
- 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.
- Unified IconsWe have mapped icons such that the same code leads to relevant icon 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 options for the legacy support.Kitchen Sink App updated toÂ v2.0We have showcased each and every component of NativeBase in a KitchenSink app.
- 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.
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. NativeBase compiles to Native. The…
@ReactDOM: Launching NativeBase 2.0 #ios #mobileappdevelopment #android #react #reactnative #reactjs
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 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 —
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.
NativeBase is packed with three preset themes.
Material: Sometimes, you need Material design on 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.
We have mapped icons such that the same code leads to relevant icon on Android and iOS.
And yes, we also have fallback options for the legacy support.
We have showcased each and every component of NativeBase in a KitchenSink app. You can install it and try it yourself.
Link to Exponent and App / Play Stores will be updated in this article.
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.
Did I miss anything? Feel free to add a response to the article for any correction, opinions and discussions.