Building Mobile Applications with React Native. A brief introduction

The number of mobile devices is estimated to cross the 5 billion [1] mark between 2018 and 2019. This is pushing the mobile application development market forward, with the ever increasing demand for businesses to have mobile applications that either complement their operations or are the main product itself. In the past, this either meant having to spend more time and resources into building both an Android and iOS application, or spending more time and resources researching your target market so that you could choose which one to focus on.

This naturally lead to an increase in demand for tools that help you cross the iOS vs Android barrier. And that’s where React Native comes in. Developed by Facebook, React Native allows you to use JavaScript to create native applications. It brings ES2015 support out of the box and makes use of JSX syntax to enable us to embed XML inside our JavaScript to create a markup style component hierarchy. Another thing that React Native has going for it is its large community. For many of the problems you’ll find while developing, there is someone that has already been through it, and information and documentation is easily accessible.

First steps

There are plenty of guides and tutorials to help you get your barebones React Native application ready, I’d recommend using the official react native documentation guide, and following the Building Projects with Native Code section. If you want to skip this setup, you can use this great online editor for following this post.

It is important to note that despite React Native being in a good place already, there are some situations where you have to make some adjustments, so constant testing on both platforms using either Simulators or physical devices is crucial during development. Continuous Integration Tools are extremely helpful and some even provide you with a free tier (CircleCI is one of those) so you can get started right away.

Now that it’s running…

Let’s have a look inside! If you open your App.js you’ll encounter something along the lines of:

[Code snippet — Medium embed: code snippet]

Components are the core of React Native, every visual element of your app is a component. It can be extremely simple or incredibly complex, but at its root it will still be a component. Whatever ends up being the return value of the render() function is what React will render on the screen of your application, you can even return null to render nothing for components that only have functional effects.

[Code snippet — Medium embed: styles.js]

Styling brings your components to life. React Native makes use of StyleSheets to bring us as close as possible to the CSS we have available when building web apps. This styling cheat sheet is very handy when you’re getting started to check on what properties are available when styling components, but for a complete description the go to place is the online React Native documentation. Flex in particular is extremely important to understand, css-tricks has a good guide into how it works.

There are many basic elements that React Native provides as starting points and building blocks for our components: Views, ScrollViews, Text, TextInput, Touchable components that respond to touch input, Image, etc… As your UI starts growing and you have the need to add more and more Native components you’ll start getting more comfortable with it, however spending some time understanding the different elements before starting to hack away at your application is highly advised!

Props and State

These are important concepts that will bring functionality, customisation and the ability to reuse components throughout your application.

Props are the creation parameters that your component will receive, in other words, if you want to pass values from a parent component to its child, you can do so using props. These values are fixed during the lifecycle of the child component, if the reference for that value changes, React will detect this and re-render the child. This is a good opportunity to briefly mention immutability. React is much simpler to use if your data is constructed with immutable data structures and operators. Immutable.js can be an important addition to your app core dependencies.

State are the parameters that are required to manage the internal state of your component, if you have data that will change over time in the component, state is the correct place for it.

A simple example

To get you started, let’s create an example that makes use of state and props to show some visual elements on screen. The component will be simple, it will receive a string prop, show a form to enter a name, which will then be stored in the components internal state, and, finally, display that name.

This name makes sense to be stored in state since it’s something that will change over time, as the user inputs different characters. We can initialise the state in the components constructor, right after calling super(props), which will take care of setting up all the props that are passed to us from the parent component. For the visual elements we’ll use: View, to incapsulate our text elements, TextInput to get input from our user and Text to display the actual text on screen.

[Code snippet — Medium embed: Greeter.js]

At this point, we’re still not storing the input in our state. To do so, we take a look at the documentation and notice that there is a prop that TextInput receives which is onChangeText that will trigger whenever the text inside the TextInput is changed and add a callback that will set our internal state accordingly.

[Code snippet — Medium embed: TextInput.js]

Now that we’re storing the name of our user, all that’s left is adding the component to the render method of our App and passing along the correct prop and displaying it on screen. In this case we’re calling the prop text and passing the string that we want to use to greet our user.

[Code snippet — Medium embed: AppWithGreeter.js]

Just like that we’ve created a new instance of our Greeter component and passed “Hello! What is your name?” to the greeter component.

Rendering this string in our component is as easy as accessing the props of our component and its value and incapsulate it in a Text component.

[Code snippet — Medium embed: PropTextRendering.js]

And that’s it! We’ve created a new component that makes use of props and state to render a few text elements to the screen of our app’s. With a bit of styling and adding a small condition to make sure we only show the Greeting when state is not in its initial state and it will look better already.

[Code snippet — Medium embed: App.js]

This was a very basic example but it showcases the simplicity that React Native brings to the mobile development world, and with its growing community it will only get better and better. If you want to get a bit more serious with using React Native there are a couple of concepts and libraries that you should know about and how they work.

• React-Redux: Provides data binding and state management to your application.
• React-Navigation: the official react native documentation recommends this library if you are just getting started to handle navigating in-between your components.
• Immutable.js: I’ve already talked about this before, but you’ll be thankful to add this to your application. It will help you prevent unwanted side-effects and make your application run faster because it integrated nicely with the change detection strategies that React uses.

That’s all for now! I hope this will serve you as a useful entry point to start developing your application and don’t forget to always test on real physical devices!

I love building products and I found my place to do so at Runtime-Revolution. If you are interested in who we are and what we do, make sure to reach out!