React Native or going mobile without knowing Swift

It’s no secret that we love Hackathons here at Geoblink. During the 9 months that I’ve been part of the team, I’ve had the chance to participate in two of them. For me, the main advantage in having these kind of events in-house is that I get to try new technologies, frameworks or tools that I’ve been craving for a while. That was the case in the last one we did, when a coworker and I had the chance to test React Native, the Facebook’s library based on React that wants to “bring modern web techniques to mobile”.

This isn’t supposed to be an in-depth tutorial on how to build an app using React Native, but a brief explanation on how this library could help us (as well as you and your team) to build robust mobile applications when your stack is purely based in web technologies, Javascript in particular.

For those who don’t really know what React Native is, but have heard about React, good news is that it’s basically the same. If you know React, you already know React Native, or as Facebook says “learn once, write anywhere”. React Native lets you write your app using the same UI components that you’re used to, but instead of being interpreted by a web browser, it compiles to Objective-C or Java, depending on the chosen platform (iOS or Android).

Pasted image at 2017_03_29 11_17 AM
Pasted image at 2017_03_29 11_17 AM (1)

 

Let’s take a look at the code from above, for example. The first one it’s a really simple login component using React, whereas the second has been written for React Native. Both of them share the same component lifecycle methods, the React ES6 class syntax and the common render method where you put your markup. Everything looks exactly the same, except for the markup where you define the layout of your app. While writing a React application, you use common JSX (You know, that HTML-ish language that React uses to render your layouts), but when you write your markup for React Native, you need to choose from a specific list of components that the library later compiles into whatever native code for the platform of choice. So, in this case, instead of using, for instance, an input of type password, you’d use the provided component TextInput with the property secureTextEntry. That easy and with these results!

geopoiter

Of course, things can get messy and way more complicated than this, but this is just a glance on how powerful this can be when you already have an app that is purely written in Javascript and you can’t invest on developing a whole other app using different programming languages. That’s when React Native shines, letting you focus in writing in the language you already know, while it takes care of the rest.

Don’t be surprised if you end up seeing Geoblink in the App Store weekly recommendations soon!

By Ricardo Boluda