Why You Should Learn React Native

4 min readAug 18, 2016

Update: I’m currently working on a course teaching people how to code by copying apps like Tinder and Snapchat using the amazing React Native. Check it our at Cloneable.io

React Native is a framework built by Facebook that allows you to create real native mobile apps using just Javascript. With React Native you get all the advantages of a hybrid-framework while still maintaining peek/native responsiveness (that’s the native part). What’s more, you’ll be ‘thinking in React’ which leads to more predictable code that’s easier to debug and reason about (that’s the react part). Yup, it’s awesome.

The Reasons

1. Simplicity

React is a framework for controlling what you see on your app screen. This is done using what React calls “state”. State is a snapshot of your app at any given moment in time. Every time you change the state React figures out what to change and updates your UI accordingly. For example, imagine you have a button that switches its color between blue and red each time it’s pressed.

Here’s how a button component would look in React Native:

<TouchableHighlight>    // TouchableHighlight = Button in RN
   <Text>Button</Text>
</TouchableHighlight>

Now we apply a style to the button that changes it’s color depending on the buttonEnabled (boolean: true/false) state:

{backgroundColor: this.state.buttonEnabled ? 'blue' : 'red'}

Lastly, we add a function to change the state of buttonEnabled every time there is an onPress button event:

onPress={() => this.setState(
                {buttonEnabled: !this.state.buttonEnabled}
               )}

Each time we press our button the buttonEnabled state is set to it’s inverse e.g false — > true. If buttonEnabled = true then the button’s color changes to blue, and when buttonEnabled = false it changes to red.

So given the state of buttonEnabled the view reacts, it figures out what color the button (and only the button) should be and changes it for you. This declarative approach leads to less code that is easier to read, write, and learn.

2. Reusable Code

React lets you to build components, elements like buttons, inputs, calendars, and any other UI elements. You can make your components reusable by designing component interfaces e.g. a button component that accepts a “color” property.

<ReusableButton color='blue'/>

Then, when you need to use that button again, in the same project or in a different one, you can just reuse it.

<ReusableButton color='red'/>
<ReusableButton color='nachoCheese'/>
<ReusableButton color='leprechaunGreen'/>

Now just arrange a few components together to create your UI. This means less code which means faster development time and fewer bugs.

3. Native Cross Platform

React Native allows you to use one code base for both Android and iOS platforms. The Javascript you write in React Native is converted into Objective-C for iOS or Java for Android to produce apps with native performance. Yes, React Native is really native!

You probably wont be able to share 100% of your code base, but at least 70–80% depending on the app you’re trying to build and the level of platform customisation you want. Most components are built to work on both platforms out the box, but sometimes this wont be enough. When this happens you can use React Native’s Platform module:

if (Platform.OS === 'android') {
  //put the Tab Bar at the top of the Android screen
}

You can also import platform specific components:

const Button = Platform.select({
  ios: () => require('ButtonIOS'),
  android: () => require('ButtonAndroid'),
})();<Button />;      // in render function

Look mom, one code base, two platform specific apps.

4. Fast development feedback

In React Native the time between making changes to code and seeing them on your device simulator has been reduced to under a second using Live Reload

With Hot Reloading you’re also able to maintain state between code changes. So, if you change something in a particular section of your app, you don’t need to navigate all the way back there each time you make a change:

Short feedback loops make development faster. They are especially useful for testing out different designs on the fly.

Conclusion

React native is a relatively new framework but already has a huge following, and with good reason. The React approach offers a new (better) way to think about and deal with the complexity that comes with building software. This is great news for beginners and experienced app developers alike who can use React Native to significantly speed up app development and reduce code complexity. It’s currently being used in production by Facebook , SoundCloud, Palantir and many more.