NativeBase : The missing piece of React Native

What if you get ready to use generic components to build iOS & Android mobile apps using React Native? Welcome NativeBase — The missing piece of React Native.

“A step towards the open source world”

Every time coding the same set of generic components for different platforms is a real pain for developers and that’s the reason we developed NativeBase — An Open Source project based on React Native which provides a set of UI Components in one place like buttons, textbox, list view, layout for apps etc. to develop React Native apps. NativeBase helps you drastically move forward at a higher pace and saves the development time.

React Native has become the de-facto of cross platform native mobile app development and NativeBase is moving towards just like the Ionic of React Native.

NativeBase can be a great opportunity for the developers to build high quality mobile apps using React Native iOS & Android apps along with ES6.

Looking over React Native’s success my team worked hard with this and launched Native Starter Pro — a beautifully designed, responsive iOS & Android app source code that enables to get started with the project quickly. Then we came up with the React Native App Generator.

And finally we came up with the idea of NativeBase to offer some standard platform components (UI TabBar for iOS & Drawer on Android) for implementation which can give your app a consistent look and feel maintaining high quality bar at the same time. It allows developers to have a common codebase for all their application code rather than forcing to reinvent the wheel every time they circulate from platform to platform.

Features:

• A set of generic re-usuable UI components.
• Coded with React Native and Javascript.
• Cross-platform: NativeBase uses the same core logic for both Android as well as iOS app.
• No more browser compatibility issue as it has only Native view rather than Webview.
• Live-Reload provides better development speed.

NativeBase is bundled up with components like:

• Anatomy-header, footer, content
• Form inputs
• Layout that includes toolbar and contents
• Multiple designed Buttons
• InputGroup
• Lists
• Badge
• Cards
• Icons
• Thumbnail
• Progress bar
• Spinner
• Thumbnail

Upcoming components:

• Checkbox
• Radio button
• Messenger

Lots more in the list…Stay tuned.

These components can easily be customized just like any other React Native component like <View />and <Text />.

They can use the props of react-native which will be merged with the default props of NativeBase.

Ionic:

Ionic being an open source toolkit helpful in the field of hybrid mobile app development for both Android & iOS. Using the well known web technologies (CSS, HTML, Sass) it provides tools and services to build user-friendly, responsive, attractive hybrid mobile apps.

Ionic’s tagline ‘Changing the future of mobile development’ is well defined with its current popularity over the market. Ionic allows small scale organizations to build simple, inexpensive yet high quality mobile apps and mobile websites without changing much compared to native apps.

React Native:

Introducing React Native was just an experiment but after entering into the tech world it proved to be called “The next generation of React”. Facebook and Instagram served the tech world in a best way introducing this. It makes building app for iOS as well as Android by reusing the code across the web and mobile. This has helped the startups and small organizations a lot, hire one developer and write codes for different mobile operating systems.

The consistent effort from the developers community across the world including developing, pointing out the bugs and fixing is the key of success for Facebook with React Native.

Currently Facebook, Whatsapp, Twitter, Google and many more use the React code. All this proof the success of React & React Native in someway.

NativeBase v/s Ionic:

• The Native components give much better feel and look compared to Cordova apps.
• Even if your app running through complex logic, components will work smoothly and faster.
• Flexbox allows to use the exact code layout for both Android and iOS.

Conclusion:

NativeBase uses the React Native platform’s default rendering and layout engine to display the UI of the application. Also gives you the potential of building applications that run on iOS and Android using a single codebase. It will let you use shared UI cross-platform components, which will drastically increase your productivity. Even it allows to use any native third-party libraries out of the box, no need to use wrappers or do any other actions.

React Native apps run simply as speedy as native apps. And NativeBase aims to get you up to speed with writing iOS and Android apps using React Native. It has detailed documentation with full description related to the components.

This is just the initial stage, we are coming up with lots more components.

Feel free to clone and fork as it’s an open source framework. You can contribute by submitting a bug, creating pull requests or even by improving documentation.

For detailed information please visit us at http://nativebase.io/.