Creating Our First Native App Using React Native: The Simple Steps

The presence in the mobile world of any project is as important as having a website. Thanks to React Native we can easily create native apps for iOS and Android and that is why in this article we will make a short introduction, explaining what a project with this framework is and how it is structured.

The rise of mobile in the world of new technologies

If there is something that we cannot deny today, it is that mobile is taking more and more prominence in the world of new technologies and more on the Internet. Doing a simple search in Google we will see how there are thousands of graphs with many numbers indicating that the use of mobile phones by users is increasing makes being prepared for this fact to become important in our business. This leads technology to also adapt to it, producing new solutions or tools. Going further at a technological level, we can observe the birth of new frameworks oriented to the mobile world, such as Ionic Framework, Titanium or React Native.

React Native: developing native apps using Javascript

React Native is a framework developed by Facebook that allows you to develop native iOS and Android apps using Javascript. Yes, you read that right, native apps using Javascript, without Objective-C or Java involved. But where is the catch? React Native leads as a “bridge” where its function is to translate the React Native code into Objective-C, in the case of iOS, and Java in Android.

It is something magical that allows web programmers to develop native apps without having to learn new very specific programming languages ​​for each of the platforms. With the framework, you can even create a custom tab bar. Interested? Just click here!

Apart from the fact that the React Native syntax is quite clear and simple, in addition to inheriting the same design as React, providing flexibility and reuse in the code. Finally, it would be necessary to add that the source code that we develop, in our first app, will be 100% shared with iOS and Android. This means that the Javascript code that we make will serve us both for the app on iOS and Android.

First step

Before pressing any key we will have to prepare the environment to be able to make our first app.

Install Xcode

In order to simulate the iOS app, we will need Apple’s development software, Xcode. We are only going to use the built-in iOS simulator to be able to open and fiddle with our app.

Install node

On Mac, it can be installed without problems using Homebrew without having to download it manually and install it since this last procedure usually gives problems.

Install React Native

Once we have the node installed on our computer we can install React Native.

Initialize the app in React Native

Now that we have all the environment ready to start programming our first app with React Native, we will go to the terminal again and place ourselves in a folder where we want the source code of the project to be colored and we will execute a command, where we tell React Native that starts a new project with the name of octuweb.

Structure of files and folders of our app code

After waiting a long time and seeing a few messages in the terminal, we can see that React Native has created a folder called octuweb that contains all the files necessary to develop the app. We also see that the last two messages that React Native have left in the terminal already tell us how to open our app with the simulator.

Create an application!

Everything is ready to create your first application, open a console and run. This will create an expo project with everything you need to run the app (something like `create-react-app` for the web) and with` npm start` to start the development server.