My Challenges with React Native: Blog post 1

The goal of my independent study this semester was to learn and understand how to use React Native. For the purposes of this project, I will be creating short blog posts that outline my learning process, the challenges I experienced and links to several resources that I found to be most useful in this process.

What makes these blog posts unique? They are geared towards individuals who have no experience in mobile application development and aim to cover a few basic low-level challenges associated with development on Native that many of the existing blogs tend to miss (or assume that people know).

What is React Native? React Native is a Javascript framework used to write cross-platform mobile applications. As the name suggests, it is used to render native components and is based off of React (a Facebook Javascript library used to build web UI). However, unlike React (which renders browser DOM’s), React Native uses Objective-C APIs to render to iOS components, and Java APIs to render to Android components.

Why use React? React Native is popular because Android and iOS development is very different from another in terms of tools and codebases which often increases the cost of building a mobile application. However, with Native a single developer, with little knowledge of either codebases and without doing double work, can begin building mobile applications that are cross-platform.

Some technologies we should know about before we begin -

• Node.js — Node.js is a JavaScript runtime to build JavaScript code.
• npm — npm is the package manager for JavaScript. It is very useful because it contains several packages of reusable code. Through npm we can use and assemble these packages and significantly reduce the time and energy we spend in building features. It continues to remain the most popular package manager.
• Yarn — Yarn is also a package manager for Javascript. It’s newer that npm and replaces the existing workflow for the npm client while remaining compatible with the npm registry. It has the same features as npm but apparently operates faster, more securely, and more reliably.
• Create React Native App is the easiest way to get started with a React Native project, It is a new tool that was only release earlier in 2017 in March. Create react Native App is a collaboration between Facebook and Expo (formerly Exponent).

I use npm (and so will these blog posts) because I was slightly more familiar with it but one can use either npm or yarn. There are several resources online that can help us make the best decision.

Let’s get setup -

• We first need to install Node.js on our windows system

1. To do this, visit the official Node.js website to download the Windows installer
2. Now run the installer and follow the prompts until Node.js has finished getting setup on your system

• Potential Challenge: Which npm version to use?

1. npm automatically gets installed with node.js but npm versions keep changing
2. You might be asked to update npm to version 5. However, Create React Native App does not currently work with npm v5 due to bugs in npm and hence, you have to earlier versions (npm 4 works well for me)

• Use the following on your command line after you’ve run node and npm to install Create React Native App and get into your first app -

1. npm install -g create-react-native-app
2. create-react-native-app newProject
3. cd newProject
4. npm start

• One major challenge: React Native is new and thus, is constantly improving and changing. If you look for solutions to certain problems online (on stack overflow or other resources), you’ll notice that they ask you to use files like index.ios.js or index.android.js that are not in your own root folder. That’s because native has moved past having two index files for android and ios and simply uses index.js now for rendering components on both platforms.
• One minor challenge: You’ll have to install packages using npm (or yarn) as you install new features. There is some really cool development happening that will save you hours of coding but you have to find the right packages depending on what feature you’re trying to implement.
• How to test? As recommended by the official React Native Page, I’m currently using Expo to test my app components. Expo is a free and open source toolchain built around React Native to help you build native iOS and Android projects using JavaScript and React.
• With the command npm start we start the development server and there is a QR code printed in our terminal window that we can scan on our Expo app to test our application.