React Native — from scratch to App Store

Plan

1. App idea
2. Technologies used
3. Development environment
4. Application structure
5. Introducing typescript
6. Introducing payments
7. Introducing push notifications
8. Introducing persistent redux stores
9. Apple review fixes
10. Most important tip
11. Conclusion

App idea

I moved to Berlin a year ago and faced quite unusual challenge. Every time when you need to interact with your local Administrative Office you have to get an appointment. And this is the issue, usually closest available appointment date is in one month, but if you are lucky and have enough spare time to refresh page with available appointments all day long, you can get one for the next week. But it is not our way, my friend and I decided to automate it.

Technologies used

• React Native

React Native · A framework for building native apps using React

• TypeScript

TypeScript - JavaScript that scales.

• Redux

Read Me · Redux

• I18n

i18next/react-i18next

• “redux-persist” module

rt2zz/redux-persist

• Node.js for backend API (not be covered in this article)

Used platform features:

• Push notifications
• In App purchases (renewable subscription)

Development environment

React Native provides nice level of abstraction on top of native mobile platforms and allows us to share almost whole application codebase across different platforms. It unifies almost all native APIs except few, in our case — push notifications (but we are still able to share some code) and InAppPurchases (totally different). As far as you don’t touch platform specific features of iOS or Android you can work on any operating system using android emulators, otherwise you need to choose an appropriate environment. In my case it was iOS app, it means I need machine with mac OS and phone with iOS. You definitely need a phone because it impossible to work with external push notifications on iPhone simulator.

Application structure

Project level

• android — native Android application project
• artifacts — source code of our react native application transpiled from typescript to regular javascript.
• ios — native iOS application project
• node_modules — node modules :)
• src — source code of our react native application

Source code level

• common — common functionality than can be used on any screen in application. The most interesting nested folder there is “services”. Here we have wrappers around some native platform functionality that was not fully unified by react native.
• screens — similar to “pages” in web application that contains all screens of our application. Here we have usual files for redux based application as “actionCreators”, “actions” and “reducer”
• i18n.calendar.ts and i18n.ts — translations for calendar and app itself
• index.base.tsx — universal entry point for both applications (Android and iOS)
• index.ios.tsx and index.android.tsx — platform specific entry point for react native builder
• autoMergeLevel2.js — modified cache invalidator for “redux-persist” module.

Introducing typescript

I found a nice article about adding typescript in react native application and I just want to share it with you and add few comments.

React Native with TypeScript

First of all I extracted common parts of index.ios.tsx and index.android.tsx into index.base.tsx to prevent copying of same code in two places.

And second improvement — I added build step for copying images from “src” folder into “artifacts” because typescript compiler can not move our images for us. This solution requires cpy module

Command for coping images:

“png”: “cpy ‘**/*.png’ ‘../artifacts/’ — cwd=src — parents”

In my case it’s only “png” but you can copy whatever you need, it will keep structure and nesting of files and folders.

Now my build command looks like this:

“build”: “npm run clean && npm run png && npm run tsc — “

Introducing payments

You can play with react native and iOS but if you need to introduce in app purchases or push notifications into an application you need to buy apple developer account. It will cost you 99 USD per year :(

When you get it you can add these features to your app using Xcode:

And here I also want to recommend you great article about iOS auto renewal subscriptions, but it can be adopted to other types of in app purchases as well. The article itself is not about react native but it gives a great guide how to prepare your developer account.

In-App Purchases: Auto-Renewable Subscriptions Tutorial

Now your developer account is ready. You can add payment into application and I would suggest this library. It has good examples and is easy to implement:

chirag04/react-native-in-app-utils

When it is done you can create sandbox users and test your InAppPurchase. To create test users you need to go to your https://itunesconnect.apple.com → “Users and Roles” → “Sandbox Testers” and add one.

Now you can use this account on your device:

Introducing push notifications

Actually it is nothing special about push notifications, only 4 steps:

1. Get real device, it is not possible to get push notification token on iPhone simulator
2. Generate all necessary certificates for development and production, as usual I would like to recommend good article that shows whole process step by step

Generate APNS certificate for iOS Push Notifications

3. Use “react-native-push-notification” module to add push notifications to your app

zo0r/react-native-push-notification

4. The only one important point is push notification token. From time to time token can be changed by operating system and to have the latest notification token you might request it on application start. It will not require user to approve push for your app every time because user already approved it once.

Introducing persistent redux stores

Often in mobile applications you have to store some data between user session. In burgeramtApp I needed to store information about user subscriptions because apple does not like when you request purchases automatically every time user opens your app.

The easiest way to do it in redux based application — save whole state of the app (or part of it) on a phone storage and restore it on application start. It requires small amount of changes and does not change regular application flow. To make it happen I chose “redux-persist” library

rt2zz/redux-persist

When I decided to introduce this library into my app they had outdated documentation (only for version 2) so I spent couple of days debugging “redux-persist” and trying to understand how to use it properly. But now documentation is updated and you just need to follow it.

Btw if for some reason you are using immutable.js in your redux stores you need to use “redux-persist-transform-immutable”

rt2zz/redux-persist-transform-immutable

Otherwise “redux-persist” will not work.

Apple review fixes

We have made 4 attempts to pass Apple review. Fortunately for us each review took about two days for apple review team (if it’s not long public holidays in US). All our issues were related to our renewable subscription. To avoid it you just need to follow guidelines but it was my first app and I had no idea about it. I would like to show our final version of purchase screen that includes all necessary fixes:

List of important points:

1. Explicitly show that this is auto-renewable subscription and shown prices for one subscription period.
2. Add “Terms of Use” and “Privacy Policy” buttons
3. Add “Restore Purchase”, do not restore purchases without actions from user, apple does not like it.
4. Add this long text as on bottom of my purchase screen, just copy it somewhere, this is mandatory to have it

Apple has really good and friendly review team so don’t be shy to ask some question about issues found during review. Sometimes you do not even need to fix some issue, just explain your position to review team and maybe you will be able to convince them ;)

One more thing — I heard some stories that apple doesn’t like “react native” apps in App Store, but I can’t prove it. We had no issues because of “react native”

Most important tip

Do not use auto release and don’t release your app right after passing review. Just wait couple days because your in app purchases will be reviewed and approved separately. We released our app immediately after review and had no inAppPurchas items for one day. I was not familiar with purchase items releases and spent those day in debugger trying to understand why I have it in debug version of app and not in production.

Conclusion

If you made it that long you are as interested in mobile development with javascript as I am. My experience with react native is only positive and I can recommend it. But to feel your self more comfortable it would be better to understand how native applications works and maybe create some “TODO LIST” app for iOS and (or) Android using truly native technologies.

One more useful link. This is Github repo with collection of articles, component and other helpful stuff for react native development:

jondot/awesome-react-native

In case you want to take a closer look at the app:

• BurgeramtApp website

Bürgeramt App - unofficial (private) application for Berlin Buergeramt

• BurgeramtApp iOS

Burgeramt App on the App Store