How to Build a Mobile App With React Native

Whether you’re a startup co-founder or thinking about expanding an established development company, mobile is definitely something you’ve been thinking about. This is understandable.

Mobile devices are already the most popular in the world. They overtook desktop usage years ago.

mobile-stats-vs-desktop-users-global-550x405-min

What’s more interesting is that smartphone users spend 85% of their time using apps.

This isn’t surprising; using the web on mobile is never as nice as using a native app. Web pages and web apps don’t quite have the same look, feel, or usability.

Ok, simple! Just start developing native applications…

Actually, it’s not that simple. Here’s why:

Problems With Native Mobile App Development

dark-knight-burning-min

Building native mobile apps is… difficult. And expensive. And slow.

First of all, there are two platforms to build for – iOS and Android. Make that three if you include the Windows mobile operating system, which is growing quickly, too. These platforms have almost nothing in common when it comes to developing apps – meaning you essentially have to build the same app two or three times. This is time-consuming and a drain on resources.

Developing the same app for multiple platforms means that you will have multiple code bases. This is difficult to maintain, as every change you want to make will have to be done multiple times. This results in high, additional ongoing costs.

Download Our Project Specification Template

Native programmers are also hard to find – and so they come with a premium price tag. A quick search in Indeed.com shows that in the US, the average salary of iOS and Android developers is almost 50% higher that those of Web Developers.

screen-shot-2017-02-22-at-11-54-29-am-min

screen-shot-2017-02-22-at-11-55-04-am-min

Put this together and you can see how developing mobile apps can be pain – even just for testing an idea. Hiring three separate development teams for Web, iOS, and Android – while making them all coordinate perfectly – seems difficult if you don’t have venture capital.

So Why Do We Even Need Native?

Here’s another idea: why can’t we just develop our apps on the web? Then they will be available on every device. Easy!

The problem with that approach is that users expect the speed and usability of native apps. Gestures, swiping, switches, datepickers, navigation and maps all work beautifully when developed natively on iOS and Android. On the web? Not so much…

What we really want is the user experience of a native application, but the development experience of web development. Here’s the good news…that is now entirely possible.

Enter React Native

logo_og-min

There have been many attempts to solve the above problems over the years, but none of them stuck. But all that changed in 2015 when Facebook released React Native.

There have been attempts to solve this problem, but none of them stuck. That was until 2015 when Facebook released React Native.

React Native is a framework for building native apps with ReactJS. So first of all, let’s take a quick look at what ReactJS is, and how to use ReactJS in native mobile app development.

ReactJS

ReactJS is a JavaScript library developed by Facebook. They describe it as “a declarative, efficient, and flexible JavaScript library for building user interfaces”.

It allows you to create great user interfaces using JavaScript, building reusable components to make your development easier and more consistent. It has proven very popular on the web. Now, we can create mobile apps with ReactJS.

React Native

React Native capitalizes on this leap forward to solve all of the problems we have discussed. It uses everything that’s great about React, but for native. You can write those React user interface components, and have them compile down to native components for iOS, Android, and Windows.

It’s a framework that makes building mobile apps similar to the workflows we used on the web.

Why This is a Big Deal

eisenberg-timberlake-social-network-min

What does this mean for those developing mobile apps? It means you can learn once, write anywhere. React Native really does give us the best of both worlds.

For you as a business owner, this means you don’t need to hire expensive iOS and Android developers, you JavaScript guys can do the job for multiple platforms. Also, if you already have existing web applications, it means converting existing layouts over to native is much easier.

For React Native developers, it means dealing with one language only (JavaScript) and being able to transfer your CSS skills to developing mobile apps. There are also other awesome advantages of React Native like Hot Reloading to make developing even more efficient.

You can get the 60 frames per second, and smooth UI interactions that make native apps so attractive, while developing on only one framework.

In short, you can learn once – and write anywhere!

Startups

socialnetwork-min

This should be particularly exciting for startups. Building a brand new tech company means.

Read How We Helped a Marketing Company to Build a Back-Office Custom Ads Dashboard

  1. Creating a Minimum Viable Product
  2. Getting it to users
  3. Receiving feedback
  4. Improving the product

Those last two steps will probably be repeated many times.

Without huge funding, doing this with traditional native app development won’t work. Iteratively developing and improving on multiple platforms is very slow. But, if you develop for only one platform at this stage, you aren’t testing on huge sections of your target users.

Using React Native for mobile app development means you can:

  • Have a single codebase to update and improve
  • Hire fewer developers
  • Respond to user feedback fast
  • Find your product market fit more quickly
  • Ship your app on all major platforms – before your competitors

Developing With React Native

960-min

Project Setup

The setting up of React Native changes depending on the operating system you are developing on. Facebook have a great tutorial page on getting started.

IDE

As you’ll be developing in JavaScript, you won’t need to use XCode or Android Studio. Many developers will be very happy about that!

There are a few options, but a great choice would be Atom enhanced with Nuclide.

Learning Curve

If you’re a native developer, then the learning curve might seem high. However, if you are familiar with JavaScript and principles such as like redux and flow layouts, then you’ll find it fairly easy.

Writing Native Code

Even with React Native, not everything can be done with JavaScript. Sometimes you will have to use Objective-C, Java, or Swift to use things like push notifications or to improve performance.

Hot Reloading

The goal of React goal is to give you the best possible developer experience. One great thing you’ll find about developing with React Native is Hot Reloading. This feature reduces the time between saving a file you are working on and seeing the changes.

The idea is you can keep your app running, and inject newly edited files at runtime. This will make developing faster and less of a pain, as you won’t have to stop and recompile your app after every change. Nice!

Downsides

thumbs-down-min

Of course, there are limitations to using React Native.

The main downside is performance. Even though Facebook has put in a huge amount of effort to improve the performance of React Native, it can never equal that of good natively built apps.

React Native is also a relatively new, unstable platform. This means it has bugs, security issues, documentation gaps, and an uncertain future.

Does It Work?

the-social-network-20100901014225607_640w1-min

Yes. It was developed by Facebook, who have some of the best engineers in the world. They have also been using it for a while now, so if you’ve used any of the Facebook apps, you’ve seen React Native in action.

Apps That Use React Native

screen-shot-2017-02-22-at-1-07-56-am-min

Even though it’s a new framework, there are already some great companies that use React Native for mobile development. The most obvious are of course the Facebook Apps, but more are jumping on the bandwagon.

  • Apps that use React Native for iOS
    • Facebook Groups
    • Facebook Ads manager (react actually came from this)
    • Discovery VR
    • Dischord – chat for games
    • Health tracking by Gyroscope
    • Project September
    • SoundCloud Pulse: for creators
    • Townske
    • Wego Concerts
  • Apps that use React Native for Android
    • Facebook Ads Manager
    • Discovery VR
    • CBS Sports franchise football

Find a Development Team

Even though React Native makes things easier on developers, it is still difficult to make a great app by yourself. Luckily, there are dedicated software teams that help you take advantage of React Native, and build your mobile applications fast and efficiently.

DevTeamSpace takes advantage of using remote dev teams to provide affordable software development. There is a dedicated React Native app development team that can help you use this to your advantage.

Conclusion

The world is moving to mobile, and React Native is one of the exciting developments opening up these markets for businesses and startups.

Sam Palmer

Sam Palmer

Web Developer and Tech Writer
Sam Palmer

Latest posts by Sam Palmer (see all)