Building React Native Mobile Apps with NativeBase [Sponsor]

React Native is the holy grail of mobile app development, dream of every web developer who wanted to build amazing mobile apps. JavaScript had already taken the tech industry by storm from browsers to servers and now it’s helping developers to build native mobile apps.

React Native is undoubtedly highly promising, but being fairly young, it has a long way to go. With the lack of basic defined components and mature documentation, you will find yourself doing quite a bit of manual work. I know, we did.

The way Bootstrap helps web developers build good-looking pages with minimum effort, how Ionic provides a set of re-usable components, NativeBase takes a similar approach for React Native.

The Best of React Native Without Any Hardships

NativeBase, an open source framework, lets you write high-quality React Native apps providing a set of customizable and re-usable native components for Android & iOS over single codebase.

For instance, to add an Input Group in React Native with basic styling, the code is something as below.

var style = StyleSheet.create({
inputBox: {
paddingLeft: 10,
position:'relative',
borderWidth: 1,
borderRadius: 30,
margin: 15,
marginTop: 20,
height: 40,
backgroundColor: 'transparent',
flex: 1,
flexDirection: 'row',
borderColor: '#000'
},
input: {
height: 40,
color: 'rgba(0,0,0,0.8)',
paddingLeft: 10,
alignSelf: 'stretch',
flex: 1
}
})

With NativeBase, it’s:

That’s all!

The application’s stack of components is built using native UI components so there are no compromises with the UX.

You can use any native third-party libraries out of the box. You do not need to use wrappers or do any other actions.

Check out the documentation and complete list of components.

Currently, NativeBase offers the following components,

• Anatomy (Header, Content, Footer)
• Badge
• Button
• Card
• Form
• Icon
• Input Group
• Layout
• List
• Progress Bar
• Spinner
• Thumbnail

Additionally, there’s option for further customization.

Setting up NativeBase

To use NativeBase in your project, all you need to do is run:

npm install native-base --save

You can read the whole guide here.

Using NativeBase Components In Your Code

You can simply import the list of components that you want to use:

import { list of Components } from 'native-base';

For instance, to use Container, Content and Text, the code is:

import {Container, Content, Text} from 'native-base';

Projects Based Over NativeBase

Two React Native starter apps made by the team using NativeBase are:

• Native Starter Kit on StartReact
• Native Starter Pro on StrapMobile

While Native Starter Pro is a premium theme, Native Starter is open source.

Conclusion

React Native is a great choice to build mobile apps. It’s powerful, flexible, hostile. NativeBase makes it even simpler and more elegant.

It’s completely open source so go ahead, try it out and do let us know your comments.

Also, stay updated with the progress by following the NativeBase.io blog, Twitter handle and subscribing on the website.

Thanks to NativeBase for sponsoring appcoda.com this week! This content is sponsored via Syndicate Ads.