React Native: Making Your Life Easier and Brighter

January 30, 2017 - 9 minutes read

To start off, I’m going to say a little about myself, so that you’d have an idea where I’m coming from. I am a software programmer. I had been working in the embedded field a few years back, and recently, I started venturing into web programming using Javascript. BUT, I am not that techie who can pull something off to magically solve your computer-related headaches. I am not the friend you can run to, to help you when you encounter the Blue Screen of Death, or to troubleshoot sudden network problems that obstructs your SNS usage. As you may have guessed, in short, I am not that certified geek you can look up to. But there are two things I know for sure. I am a tech enthusiast, and I want to create something to help people have a better experience of life.

With this in mind, I realized that one way for me to achieve this is to develop a useful mobile application that can be used by millions and millions of people around the world. But, I am faced with two major hurdles. Coming up with an idea is one thing, and equipping one’s self with enough technical weapons to make it happen is another. As someone with neither an in-depth background (I wasn’t a computer major back in university) nor intensive experience in mobile development, I wasn’t sure how to start, and I didn’t have the confidence to turn this dream into a reality.

Several years ago, being an Apple lover, though without much motivation, I tried learning Objective-C. Looking at the complicated syntax made me back away too soon. Looking back, I think I was such a coward. Then, Swift came and I looked into it it very briefly. It was a lot simpler than Objective-C, but I wanted to learn and invest my time on something that could help me develop for both iOS and Android platforms. I’m choosy, am I not? Or perhaps I was a bit too lazy to even start. But then, Facebook’s React Native caught my attention. I am thankful and glad it was open sourced. And my initial reaction? It’s like that of somebody who has fallen in love: “I finally found you.”

So now, I’m going to talk about why I found hope in React Native, and if you have a similar dream as mine, perhaps this too can inspire you to move forward even just a little, slowly but surely. Here are my reasons:

  1. Language. First and foremost, React Native is pretty much focused on Javascript, and in particular, it uses JavaScriptCore in iOS. As somebody already working with Javascript, I can follow it without much need to study new syntax. Hence, I feel more confident, at ease, and at home with it. It gives me a starting point, rather than having to begin from scratch. Thanks to it, building a mobile app with Javascript that can keep up with a native one has been made possible.
  2. Style. It is declarative, so it is a lot easier to understand and maintain compared to imperative code. Set up the view, specify where the data should appear, pass the props and state, and React Native takes charge of automatically re-rendering the screen whenever the state is changed. Basically, each React Component requires a render function. Meanwhile, the constructor is the place to initialize state as needed. I believe that simplicity is best. Also, people can more quickly gain confidence that what they’re doing is on the right track.
  3. Approach. React Native boasts of the ‘Learn Once, Apply Everywhere.’ perspective. Basically, it’s a single technology that can be used among different platforms. It is said that React Native was brought to life with two primary considerations: user experience and developer efficiency. I believe it satisfied both.
  4. Performance. It is so efficient that you can instantly reload your app (by pressing Cmd+R) without having to recompile and wait. Also, React Native runs Javascript on a background thread, so it doesn’t have to interfere with the main thread during program execution. This allows a React Native app to be comparably as responsive as a native one written in Objective-C or Swift.
  5. Layout. React Native uses Flexbox for the layout of its components. It’s like dealing with CSS stylesheets where you can specify flexDirection, alignItems, and justifyContent, among many others. It is said that this is far more easily understandable and superior than using Auto Layout of iOS. I can’t personally attest to this yet because I do not have experience in native iOS programming, but all the positive comments out there give me a strong impression that it is worth a try, and will spare me from a lot of layout headaches in the future.
  6. Interoperability. React Native is designed to smoothly combine with native code, in case React’s existing capabilities are not enough for your app, like for native features which are not yet supported, which you need to build on your own. Since this is a more advanced topic, you may want to refer to Facebook’s official tutorial page for  “Native Modules” https://facebook.github.io/react-native/docs/native-modules-ios.html for details.
  7. Tools. The simulator shows very informative debug logs in the so-called ‘Red Screen of Death’. We can easily trace the line where the error occurred. We can also use Chrome Developer Tools to debug a React Native application by selecting “Debug JS Remotely” from the Developer Menu (Cmd+D). Unfortunately, it is currently not yet possible to use the “React” tab (from the React Developer Tools Chrome extension) to inspect app widgets.  Facebook recommends using Nuclide’s “React Native Inspector” as workaround.
  8. Installation. React Native is small in size (unlike Angular 2), because it is basic and minimal, and we can just add other libraries to it as needed. I assure you that you can go through the installation procedure detailed here in a breeze: https://facebook.github.io/react-native/docs/getting-started.html
  9. Updates. Apple has allowed updating the app over the air using JavaScriptCore without having to going through the App Store review process again.

Mindfulness advocates say that whatever situation arises, we should strive to respond, and not react. But, for this specific situation of mine, my response is to choose React. Pardon me for the poor humor, but yes, I do believe I can go a long way with it. Now, I am looking into various tutorials for a rich hands-on experience, and I came across this 2-hour YouTube collaborative tutorial video which I highly recommend: “Introduction to React Native – Building a React Native app from scratch” (https://www.youtube.com/watch?v=r5OPRhelEIU). I really learned a lot from it, especially about the Navigator and ListView components. The dialogues between Jordan and Will were very helpful to understand important concepts as well. I will keep you posted once I myself have a decent demo app ready.