You've probably noticed all the new games and apps in your social media news feed. Have you ever wondered what stays behind them? Have you ever wanted to own an app, which has your name on it? Great news! We are living in a time where this is simple as counting to ten.

Partner Learn to trade with Gero Nikolov, our partner Admiral Markets is official DAX30 partner.

Thanks to React Native you can build a native app for almost every modern platform out there based on iOS and Android. To make it even better when you choose to develop your app on React Native you'll be doing most of the work just once and it'll will be running on all of them.

As the three musketeers say: One for all, all for one!

What is React Native?

"React Native is an exciting framework that enables web developers to create robust mobile applications using their existing JavaScript knowledge. It offers faster mobile development, and more efficient code sharing across iOS, Android, and the Web, without sacrificing the end user's experience or application quality." - That's what people say. Let's see what will be our thoughts at the end!

How to start?

First of all you'll need to prepare your development environment, but before that I strongly advice you if you don't have previous experience with JavaScript to review its basics, write a few simple web apps and only then proceed with React Native. Otherwise your first experience may be not so good.

Now once you know what are the risks you are ready to start your environment setup!

Since this article is directed mainly to iOS applications we'll check what are the hidden stones of setting React Native with XCode and Cocoapods. As a starter you can check the official documents with all the needed commands, which you'll have to execute on your Mac in order to create your first React Native iOS application. When you open the docs you'll see that you have two options for starting your project:

  1. Expo CLI
  2. React Native CLI

Although the Expo Cli is simpler, I would suggest you to use the original React Native CLI because it has wider adoption in the community and it won't have any unexpected problems with some of the public packages, you'll be surprised but they are a lot. Which is the other interesting part of React Native. A lot of the packages are done in an Open Source manner and are built by the community itself. That means most of the problems which you are going to face are already solved by someone else and they are just in a "google search distance" from you!

The Example App

Geros FREE iOS Application, available on App Store for iPhones.

For the purposes of this article the team behind Geros made an Open Source version of the code, of the original Geros iOS App, which you can later download and review on your iPhone.

Before we start with the code review, let's see...

What's the idea of the app?

Geros is a portfolio app of Gero Nikolov. Solutions Architect and Senior FullStack developer who loves to advice people on all types of techy and business questions. In Geros you'll find interesting Articles and Projects which were written and developed by Gero himself. Geros is free and all of its contents are free as well, because knowledge is everything.

How can it help you?

Geros is very, very simple app with a very simple structure. You can use that structure as a backbone starter of your game changer app! In case you find something that is not correct, please feel free to contact Gero himself and he'll be more than happy to assist and fix the issue.

The Code Review

Geros Open Source repository can be found here. In it you'll find a simple documentation which explains what's in the package and where you can find the interesting parts of the project. We won't review the documentation here, instead you'll learn what's the purpose of each component used in the app.

App.js

App.js is the main file of each React Native application. You can look on it like index.html, index.php, index.js, or any other index. depending on your stack.

In it you'll find the two main components used at Geros:

  1. <PushNotificationManager>
  2. <ScreensStack />

Both of those components are developed and twitched for the purposes of the app and they are not coming directly from the core but they are using core functionalities.

<PushNotificationManager>

The PushNotificationManager component is responsible for receiving and parsing the push notifications from GeroNikolov.com to the Geros app. Its code can be found here. What's interesting about it is that it's using the WIX React Native Notifications package. When we were developing Geros we've found it to be one of the easiest and lightest notifications manager out there. Its documentation is also well maintained and well explained, you can find it here.

The PushNotificationManager component works in a close relationship with the NotificationListener.js abstract methods which makes the handling of push notifications easier. It consists of the following methods:

  1. notificationListener is responsible for setting a listener to a specified component. It can work with every component which will handle updates from notifications.
    1. handleNotification method. As you've noticed the notificationListener is assigning an interval to the specified _component which checks for new notifications and in case of one, it calls the _component.handleNotification() method. That's an abstract method which implementation is unique for each component and it depends on the purpose of the component.
  2. purgeNotificationListener is usually used on the componentWillUnmount hook in order to remove the listener from the component and free up operating memory. Important note to remember is that if you don't cleanup listeners or any kind of external methods which you are using in your components, you'll end up with tons of memory leaks and the end user experience won't be satisfying. Even worse you may brake some older physical devices by creating a heavy CPU and RAM usage.

<ScreensStack>

The ScreensStack component is a holder of all screens available in the Geros app, you can find its code here.

Since you've done it to the components/ folder it's time to share with you what's the correct React Native file structure, which was brought to Geros by my friend and professional Kamena Dacheva.

You've already noticed that in React Native the components names are written in CamelCase which makes the readability easier and more modern. Other good practice is to separate your components in their own folders. Doing that allows you to have unique Styles and Scripts for each of your components close to the functional Component code. Keeping that in mind should protect you for messy code structures and incomprehensible code relations.

Now when you know how to structure your project lets get back to the <ScreensStack> component contents and responsibilities.

In it you'll see it has two possible outcomes, one for when the user is not connected to the internet and one for when everything is working properly. For more complex apps I would suggest you to use the React Native Netinfo package. But in this case the checkup is done through a custom REST API which is hosted on the GeroNikolov.com web server. Let's assume the user is connected to the internet and everything is working correctly. In that case the user will see the <NavigationContainer> component.

<NavigationContainer>

Interesting part of the NavigationContainer is that, the whole page structure of the application is stored in it. That allows the user to navigate from page to page easily and in a natural to the OS way. It's using the React Navigation package which is another Open Source package with clean and well maintained documentation.

In the NavigationContainer every screen is represented by a standalone component. In Geros they are as follows:

  1. <HomeScreen> - Represents the Homepage of the app.
  2. <SingleArticleScreen> - Represents the Single Article page. Or in a simple manner, how the Article preview will look like.
  3. <SingleProjectScreen> - Represents the Single Project page. Or in a simple manner, how the Project preview will look like.
  4. <Blog> - Represents the Blog page. It consists of infinite scroll which loads posts from GeroNikolov.com dynamically.
  5. <Projects> - Represents the Projects page. It consists of infinite scroll which loads projects posts from GeroNikolov.com dynamically.
  6. <PP> - Represents the Privacy Policy page. Every app which will be uploaded to the App Store / Play Store should have one in order to comply with the store guidelines.

From here you can browse deeper in the components relations and get used to that structure, which you can later use for your portfolio or any other kind of app. Once you understand the basics and build your first iOS app you'll be ready to to proceed with the next section of this article - "How to deploy a React Native IOS app on the App Store?". A friendly suggestion is to bookmark this article for when you are ready to proceed with the AppStore deployment.

How to deploy a React Native IOS app on the App Store?

First of all you'll have to open your Apple Developer Account which consists of a small process with getting your license. But don't worry Apple made it simple as 1, 2, 3! After that I strongly suggest you to follow the steps from this article for preparation and submission of your first iOS app.

Useful note to remember: Instead of creating custom deployment certificates leave XCode to prepare them automatically for your. That's of course in case you don't really need them to be custom. That'll save you a lot of time and headaches. Also don't forget to update your Info file with the all the background processes your app will be using. Those processes are registered under the Permitted background task scheduler identifiers and they are just IDs which are automatically assigned to those processes.

Partner Learn to trade with Gero Nikolov, trade Gold without commission!

Final words

Once you publish your app to the App Store, make sure to contact me with a link to it. I'll be more than happy to review it and give you some feedback on possible processes and design optimization.