We're live-coding on Twitch! Join us!
NativeBase: The Missing Piece of React Native​

NativeBase: The Missing Piece of React Native​

React Native is something I call a breakthrough in mobile app development; bringing the best of web development, making native app development how it’s supposed to be i.e. completely native.

However, React Native has too low level APIs and small components where we end up rewriting many basic components ourselves for each project, which is where NativeBase fills in.

NativeBase is an open source framework that lets you write high-quality React Native apps with ease by providing generic re-usable components (header, footer, buttons, lists, cards etc.) and in this tutorial, we’re going to do a demo of the same. The source code is available in this Github repo.

Let’s build a “Github Repository Finder App” using React Native & NativeBase

Basic Setup

If you haven’t already, install React Native on your system.

Initiate a fresh React Native project

react-native init nativebaseTutorial

Install NativeBase

cd nativebaseTutorial 
npm install native-base --save 
rnpm link

And we’re done with the basic setup. Now,

The Exciting part: Let’s get down with the code

Since we’re going to keep a single codebase for iOS and Android, let’s create an empty app.js file and add the following lines in both index.ios.js and index.android.js file.

import App from './app';
export default App;

Now, to include the NativeBase components, we simply import the list of NativeBase components that we want to use in our app.

So we go to our project’s app.js file and include the components that we wish to use in our app the syntax of which is,

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

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

better.dev Get Started w/ JavaScript for free!
import { Container, Content, Text } from 'native-base';

The basic structure of our app will be a Container component inside which we will add Header and Content components.

Now to begin with, first what we need is an InputGroup with a search Icon inside the Header to search the repositories. For that, we add

<Header searchBar rounded>                            
        <Icon name="ios-search" />                        
        <Input placeholder="Search" value={this.state.search}  onChangeText={(text) => this.setState({search:text})} onSubmitEditing={()=>this.search()}/>                    
    <Button transparent onPress={()=>this.search()}>Go</Button>                

We have used Github API in the search function to load the repositories, and to connect to Github, we have used fetch API.

search() {   
    // Set loading to true when the search starts to display a Spinner        
        loading: true          

    var that = this;        
    return fetch('https://api.github.com/search/repositories?q='+this.state.search)            
    .then((response) => response.json())            
    .then((responseJson) => {      
        // Store the results in the state variable results and set loading to                  // false to remove the spinner and display the list of repositories                 that.setState({                    
        results: responseJson,                    
        loading: false                
    return responseJson.Search;            
    .catch((error) => {
        loading: false                 

Next we get down to the Content part, where we use the List component to list down the repositories. For every repository’s List, there will be a ListItem component.

Now, how does that work?

The List component is used as a substitute for the React Native ListView component, which can be used for static as well as dynamic data. In this case, we’re iterating over results.items in our state and rendering the items as item. For each item, there will be a ListItem component around it, consisting of Thumbnail and Text components.

<List dataArray={this.state.results.items} renderRow={(item) =>               
    <ListItem button onPress={()=>this.setModalVisible(true, item)} 
        <Thumbnail square size={80} source={{uri: item.owner.avatar_url}} />        
        <Text>Name: <Text style={{fontWeight: '600', color: '#46ee4b'}}>{item.name}</Text></Text>
        <Text style={{color:'#007594'}}>{item.full_name}</Text>    
        <Text note>Score: <Text note style={{marginTop: 5}}>{item.score}</Text></Text>    
} />}

At this stage, our app looks like the following on an iOS/ Android screen.

Now, let’s go ahead and make the details page for these repositories.

We want the page to show the logo, repository name, primary data like type, stars, language, open issues and last updated along with a button to go back. To create this page, we will use Modal component from React Native.

When user clicks on any repository in the list, this repository will be stored in selectedItem state variable and the Modal will open showing all the repository details.

So for this we use the NativeBase Card component inside Modal component and further include Image, h4, Text and Button components inside each CardItem component. The code for this is as follows.

    {/* state variable modalVisible decides whether modal will be open/closed */}
    onRequestClose={() => {alert("Modal has been closed.")}}
    <Card style={{paddingTop: 20}}>
        {Object.getOwnPropertyNames(this.state.selectedItem).length===0 ? <View />
        : <CardItem cardBody style={{justifyContent: 'flex-start'}}>
        <Image style={styles.modalImage} source={{uri: this.state.selectedItem.owner.avatar_url}}  />
        <h4 style={styles.header}> {this.state.selectedItem.name}
        <Text style={styles.negativeMargin} >
        Type: <Text style={styles.bold}>{this.state.selectedItem.owner.type}</Text>

        <Text style={styles.negativeMargin} >
        Stars: <Text style={styles.bold}>{this.state.selectedItem.stargazers_count}</Text>

        <Text style={styles.negativeMargin} >
        Language: <Text style={styles.bold}>{this.state.selectedItem.language}</Text>

        <Text style={styles.negativeMargin} >
        Open Issues: <Text style={styles.bold}>{this.state.selectedItem.open_issues_count}</Text>

        Last Update: <Text style={styles.bold}>{this.state.selectedItem.updated_at.slice(0,10)}</Text>

        <Button danger style={{alignSelf: 'flex-end'}} onPress={() => {
        this.setModalVisible(!this.state.modalVisible, this.state.selectedItem)
            Go Back

The resulting page looks like the following on the respective platforms.

We’ve also added Spinner component for a nicer touch to it.

Ultimately, our app looks like this on both the platforms, iOS and Android respectively.

Go ahead and explore the complete code altogether on the Github repo.

Also, it’s available on Google Play Store so you can analyze the app performance too.

Other Projects Based Over NativeBase

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

While Native Starter Pro and React Native Flat App are premium themes, Native Starter is open source.

Power Pack of React Native and NativeBase

By providing a “native environment” to build “native apps” and a consistent set of tools and technologies, React Native is truly awesome. Same principles are to be followed everywhere, as claimed by their tagline, “Learn once, write anywhere.”

NativeBase covers the few shortcomings that it has, making it overpowering.

Its 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.

Additionally, there’s option for further customization which in fact is pretty easy and straightforward. You can define your styles in the theme file and simply import it.

Check out the official documentation for more details.


NativeBase lets you experience the awesomeness of React Native without the pain. It’s completely open source so you have no reason to wait. 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.

This post was sponsored by NativeBase through Syndicate.

Like this article? Follow @chris__sev on Twitter

This content is sponsored via Syndicate Ads.