Building Your First iOS App with JavaScript

With the increase in usage of mobile devices, web applications have

become more powerful these days. In fact, many organizations

considering a mobile app for the growth of their business and for

improving conversion rate.

Generally, we have four ways to build a mobile app such as:

1. native iOS

2. native Android

3. PhoneGap

4. Appcelerator Titanium

Even though we have already learned a lot in iOS development. But

being a developer, we always want to develop something cool and

useful. In this article, we will discuss the whole new idea of building

mobile apps with JavaScript, which require significant amount of learning

as the web development industry is always changing. Also, we need to

learn new languages and frameworks to meet the current requirement.

Though it's not widely known, we can write native-feeling iOS apps for

the iPhone and iPad in JavaScript and package it into an executable file

and distribute it accordingly across Windows, OS X and Linux.

Before we start, here are some things you should be familiar with:

JavaScript

Some ES2015 features, namely Classes, Arrow

Functions, Destructuring andTemplate Strings

Mac OS X Terminal

CSS (yup!)

React (optional)

Using Xcode, you'll create an iOS project from scratch, then install third

party modules and components, linking libraries, styling with flexbox,

creating a custom gesture listener, and many other things. Modify the

project's source code, and run your application on either the iOS

Simulator or a physical device.

We take this example Unsplash which fufilles all my wallpaper needs. On

the phone: Settings → Wallpaper .

1. Setting up A Blank React Native Project

Make sure you have Xcode 7.0 or higher installed. It can be downloaded

free from the App Store. Install Node too. Another important tool we’ll

need is npm

Run react-native in it SplashWalls.

This should fetch and install all the required modules and create a new

folder called SplashWalls.

Notice the Deployment Info section. It has some default settings applied.

Go ahead and hit the Run button at the top-left in Xcode

2. Fetching Wallpaper Data from the API

Here Unsplash.it API asking for wallpaper data.

3. Adding a Loading Screen

By the end of this section we will have a loading screen show up while

the JSON data is being downloaded.

4. Filtering and Picking Random Wallpapers

Here, we will filter through the wallpaper data and pick specified

number of random wallpapers.

5. Adding the Swiper Component

Include a Swiper component in our app that will allow us to display

wallpapers in a swipeable container.

Hope this article will help you learn how to build an iOS app with

JavaScript and keep you updated with the hot topics in mobile

application development.