Guide React Native - create an application for iOS. Part 1.1

Translation from here .
Continued here.

The idea to create mobile applications on JS is not new. We have seen that frameworks such as Ionic or PhoneGap cope with this task and have attracted a fair amount of developers.

Nevertheless, neither these frameworks, nor the idea to create mobile applications in JavaScript never attracted me. I always thought, why not learn Swift / Objective-C or Java and just make real applications? Of course, this will require a significant amount of training effort, but is continuous training not something that we, the developers, do and should do well? Quickly learn new languages ​​and frameworks? Then what's the point? As for me, the obvious advantages of such an approach never outweighed the doubts.

Until I read the article Chalk + Chisel , which drew attention to the following:

I thought React Native was just a little experiment. And he believed that the present native application should still be written in native languages. If I had to rewind time a couple of months in advance, I could confidently say that I would never again write under iOS on Objective-C or Swift.

What! Are you serious?
')
Reading such a serious statement made me give a try to React Native. Why not? I already used React and I liked it. React Native is so similar to React that you will feel like a fish in water if you are already developing React. If not, then fortunately React is so simple that it can turn your head.

What application will we create?

I could never find a normal wallpaper search app for my iPhone in the App store.
On the desktop, Unsplash is all that is needed to satisfy all my needs. On the same phone: Settings → Wallpapers :(

Thus, unlike other manuals, where you create unnecessary “Hello World!” Counters for anyone, in this we will make an application that can load random photos from Unsplash, show them in an aesthetically appealing way and provide an opportunity to save them in Camera Roll (Apparently, the analogue of the “Gallery” in Android, although there is still some kind of My Photo Stream - note of the translator). I liked this app more than I thought. Therefore, even if at the end of this guide, you will not be impressed by React Native, you will have a cool application for searching and saving wallpapers. Is not that great?

Before we begin, I will list what you should already be familiar with at this moment:

1. Javascript
2. Some features of ES2015 , such as classes, pointer functions, destructuring, and string patterns ($ {name}) (in Russian )
3. Mac OS X command line (terminal)
4. CSS (unexpected!)
5. React (optional)

And one more, as I said, we will create an iOS application. What does it mean that you work on a Mac. Under Android, you can create applications in both Linux and Windows. And iOS is only in OS X, so it means that you are running MacOS X.

Remark

By the end of this tutorial, you will be familiar enough with React Native to write your own applications. We will look at setting up a project in Xcode, installing third-party modules and components, importing libraries, styling an application using flexbox, creating custom gesture handlers, and other things.

If you haven’t used React before, we’ll take a look at it in this guide. This is a new cool JS library with great potential and, I don’t think that it will cease to be supported in the near future.

For your convenience, the manual is divided into two parts. Each part consists of five sections. In each section, we move one step closer to our goal. I recommend that you, if you have started, complete the task in each section started, as they are short, so that you can understand the general concept at each stage and not lose concentration.

The source code of the application can be viewed on the GitHub repository .

1. Creating an empty React Native project

Make sure you have Xcode version 7.0 or higher installed. It can be downloaded for free from the App Store.
Most likely (if you are a web developer and read this in 2016) you already have a Node installed. If not, install it. Another important tool to install is npm (node ​​package manager - package manager for Node - comment of the translator). Node comes pre-installed with npm, you need to update it, because updates are released quite often. Follow the instructions .

That's all we need. Now in the terminal type the command npm install -g react-native-cli . This command will install the React Native package globally (key (-g). This means that from any project created in the node you can access the package installed globally. The global packages themselves are installed in the directory (under windows) ... node> node_modules> npm> node_modules - a comment of the translator).

If all this seems incomprehensible to you or you cannot perform any step, you will be helped by the official documentation (also my little note about launching android studio under window7 with amd processors - comment of the translator).

Navigate to the folder where your projects are stored via the command line and type react-native init SplashWalls in the terminal react-native init SplashWalls .

This command will load all the necessary modules in a new folder called SplashWalls.



SplashWalls folder contents

One of the great features of React Native is that you are writing an application for Android and iOS using JS, most of which is used in both applications. There are two files in the directory: index.android.js, index.ios.js , whose names speak for themselves. To develop for a specific platform, you need to change the corresponding file, or both, if you are developing for both platforms.

Since we are developing an iOS application, we will delete the index.android.js file and the corresponding folder. We will work with the index.ios.js file. This file is run first when you launch your application.

Then go to the ios folder and run the SplashWalls.xcodeproj file. In Xcode, you will see the following popup:

Pay attention to the warning that we see in the screenshot: "No matching profiles found." Let's fix it.

First change the text in the Bundle Identifier field. You must make sure that the name you enter corresponds to the reverse DNS notification (domain_zone.domain_name.pack_name, for example adobe.com> com.adobe.package - for example, translator). This agreement allows you to distinguish your app on the App Store. I will use com.nashvail.me.tutorial.SplashWalls.

Next, select your name in the list:

Click on Fix Issue.

While we are here, pay attention to the item Deployment Info. We need to change something here:

Change the settings as follows:

We create an application for portrait view only and hide the status bar. Climb up and click the Run button in the upper left corner of Xcode. This will bring up the terminal window, as shown in the screenshot below. This may take some time.

Upon completion, you should get the following result in the emulator of the mobile device:

This concludes section 1 and proceeds to the next.

Continued here.