How to Build an iOS App Using JavaScript

The concept of building mobile apps with JavaScript is not new. There have been frameworks like Ionic and PhoneGap that have attempted to tackle this challenge, with some degree of success. However, I have always been skeptical about the idea of building mobile apps with JavaScript. Why not just learn Swift/Objective-C or Java and build real apps? After all, as developers, we are constantly learning new languages and frameworks. So, what’s the point?

But then I stumbled upon an article from Chalk + Chisel that changed my perspective. The article made a bold assertion about the potential of React Native. It got me curious, so I decided to give it a try. And I’m glad I did!

React Native – A Familiar Territory

If you are already familiar with React, you’ll feel right at home with React Native. It is so similar to React that the learning curve is minimal. Even if you’re new to React, it is easy to wrap your head around it. That’s what convinced me to give it a shot.

What We Will Be Building

I’ve always struggled to find the perfect wallpaper app for my iPhone. I love using Unsplash on my desktop, but on my phone, it’s just not the same. So, in this tutorial, we will build a wallpaper app that pulls random stunning wallpapers from Unsplash, displays them in a beautiful way, and allows you to save your favorite wallpapers to the Camera Roll.

But even if React Native fails to impress you by the end of this tutorial, you’ll still end up with a really cool wallpaper app. So, let’s get started!

Setting Up a Blank React Native Project

Before we dive into the code, let’s make sure we have everything set up. Make sure you have Xcode 7.0 or higher installed. If you’re a web developer, chances are you already have Node installed. If not, go ahead and install Node. We will also need npm, so make sure to update it.

Once you have all the necessary tools, open the terminal and run the following command to install React Native globally on your system:

npm install -g react-native-cli

Now, navigate to the desired location on your computer and create a new React Native project by running the following command in the terminal:

react-native init MyApp

This will set up a new project called “MyApp” in a folder with the same name. The next step is to open the project in Xcode. Navigate to the “ios” folder of your project and open the “MyApp.xcodeproj” file.

Takeaways

By the end of this tutorial, you will be familiar enough with React Native to start writing your own apps. We will cover everything from setting up the project in Xcode to installing third-party modules and components, styling with flexbox, and much more.

If you’re new to React, don’t worry! This tutorial will also set you up with React and provide you with a solid foundation to build upon.

This tutorial has been divided into two parts for your convenience. Each part consists of five sections that build upon each other. I recommend completing each section in one go to fully grasp the concepts.

For your reference, the final code for the app we’re building can be found in this GitHub repo.

Conclusion

In this first part of the tutorial, we laid the groundwork for building an iOS app using JavaScript. We set up a blank React Native project, learned about React Native’s similarities to React, and got a glimpse of what we will be building.

In the next part, we will dive deeper into React Native and explore more advanced concepts. We will add actual images to our app, create custom gestures with the PanHandler API, link a library in Xcode, and much more. So, stay tuned for the next part of this exciting tutorial!

Remember, if you have any questions or get stuck along the way, feel free to reach out. Happy coding!