React Native Android App Publishing Checklist

Here’s a React Native Android App Publishing Checklist to help get your apps into the app store easily. Let me know if I’m missing something.

1 – Tidy Permissions

Remove any permissions you app doesn’t need. Two places:

AndroidManifest.xml

Step 1 – Add namespace

Add xmlns:tools="http://schemas.android.com/tools" to the manifest tag, so it becomes:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    package="com.basicpairs"
    android:versionCode="1"
    android:versionName="1.0">

Step 2 – Remove Permissions

Change the permissions already present in android/app/src/main/AndroidManifest.xml from:

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>

To:

    <uses-permission android:name="android.permission.INTERNET" tools:node="remove" />
    <uses-permission android:name="android.permission.READ_PHONE_STATE" tools:node="remove" />
    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" tools:node="remove" />
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" tools:node="remove" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" tools:node="remove" />

Note, that’s removing all permissions, you might not want that!

2 – App Icons

For android, you need to create different size icons and put them in different locations.

All the icons should be named ic_launcher.png and they should be placed in folders under /android/app/src/main/res/mipmap-*

Dimensions | Location
7272 | mipmap-hdpi.
48
48 | mipmap-mdpi.
9696 | mipmap-xhdpi.
144
144 | mipmap-xxhdpi.

3 – Version Number

This is especially important if you’re pushing an update.

Update android/app/build.gradle, setting versionName in defaultConfig to the new version you want.

4 – Create the Signed APK

The official documentation does a fantastic job of explaining how to do this https://facebook.github.io/react-native/docs/signed-apk-android.html.

Note, on Windows ~/.gradle/gradle.properties is C:\Users\<username>\.gradle\gradle.properties.

Save your keystore and credentials information somewhere safe

5 – Prepare Screenshots and Text

Text

When uploading the app to the play store, you get asked for quite a lot of information. Alongside the age group and other things, you will need:

  • Title of 30 chars (pink box)
  • Short Description of 80 chars (yellow box)
  • Full Description of 4000 char (orange box)

These appear in different places depending on whether you’re viewing the app on a desktop of mobile view. For example:

Mobile View of app in Play Store

Mobile View of app in Play Store

Mobile View of app in Play Store after clicking Read More

Mobile View of app in Play Store after clicking Read More

Desktop View of app in Play Store

Desktop View of app in Play Store

Screenshots

You get the chance to upload the following:

  • Images for Phone, Tablet, Android TV or Android Wear
  • 2 to 8 screenshots
  • 1 Hi-Res icon – 512×512
  • 1 Feature Graphic – 1024 x 500

The feature graphic is what you see in all the listings above.

6 – If you’re Updating the App

As well as updating the Version Number, make sure you provide a Change log. And no “various bug fixes”

Income Report for January 2017

I’m making my income reports, including traffic numbers, public. That way, anyone thinking of starting something similar can see real world numbers. There are a lot of other sites sharing their income, so why does the world need another one?

I’m sharing the figures from month 1, which isn’t that common. Also, I can’t see many income reports from mobile app developers. So I’m hoping that this is something unique.

My hope is that these reports will inspire someone else to try something themselves. Please let me know if you think I can improve them. I’m always looking for ways to improve.

Current Status

January has been a funny month. I successfully managed to get something on CodeCanyon, but I didn’t achieve much else. Unfortunately real life got in the way and most of my energy was spent trying to find a job.

I made “good” progress on Hangman, but it’s not ready to be released to the outside world.

I also managed to study a couple of open source React Native apps, https://github.com/FaridSafi/react-native-basketball and https://play.google.com/store/apps/details?id=name.ratson.uiexplorer&hl=en.

Hours this month

As always, I track the hours I’m spending on this project. It helps me track “return on investment” and highlights how much effort is required for something like this.

Topic Hours
Income Report for December 2016 1
CodeCanyon 2
Hangman + Posts 10
React.js TV Tracker Tutorial 5

Total Hours this month – 18

Traffic for MM YY

Audience Overview - January 2017

Audience Overview – January 2017

Looks about the same to me.

Audience Stats - January 2017

Audience Stats – January 2017

But there’s actually a pretty good increase in the number of users and sessions.

Page Views Top 10 - January 2017

Page Views Top 10 – January 2017

It’s a shame that the tutorials aren’t near the top. Perhaps there’s something to learn there. They are the hardest posts to write, yet aren’t very popular.

Acquisition Overview - January 2017

Acquisition Overview – January 2017

Direct and Organic search has seen a big increase. Social has taken a dive as I’ve only shared 1 of my posts on Reddit. That’s a lot less than I normally try.

Monthly Income

Description Value
AdSense £0.19
Chitika Ads £0.19
Chitika Referal £0
TsoHost Referal £0
Amazon Associates £0

Total Income £0.38

Monthly Expenses

Description Value
Site Hosting £1.25 (£14.99 a year)

Total Expenses £1.25

Profit over time

Total Profit £1.25 – £0.38 = £-0.87

Income Over Time - January 2017

Income Over Time – January 2017

Back to negligible amounts of loss.

Analysis

Not a great deal to report. Unsurprisingly, putting little effort in doesn’t help.

There’s a nice increase in overall sessions (18%), but ad revenue has dipped a little. But with such low numbers, there’s no point analysing it further.

Lessons learned this month

Finding a Contract Job Takes Time

Celebrating getting your first contract takes equally as long 😉

Progress this month

Like every month, I set myself some targets in my previous income report.

  1. Create a Hangman game for the web and android – Failure – not quite
  2. Join CodeCanyon and make BasicPairs available – Success
  3. Investigate 3 open source React Native apps – Success

Things I achieved or I think are worth celebrating are:

Nothing relevant to this site.

Target for the next month

I’m struggling here. I’ve started a new job so don’t have anywhere near the time I used to.

  1. Create a Hangman game for the web and android.
  2. Settle into a routine where this site gets some attention.

Dev Diary – Hangman in React Native – Part 2

This is the second part of my dev diary building hangman in React Native.

In part one I looked at the “competition” and created a simple prototype . It was more of a still image with what I was roughly aiming for, but that’s ok. In this part, I’m going show the progress I’ve made so far, the new things I’ve learned and what’s next.

Sign-Up To Get the Code

As with all of my games, I release the source code. It’s yours to do with whatever you like.

Want to re-skin the app and publish it in the app store feel free. I’d love to hear how you use my stuff.

Only those who sign-up to my Game Development mailing list will get the code.



* indicates required

Progress So Far

I have so far concentrated on getting the layout and game functional. It’s not pretty, but the player can:

  • Start a new game
  • See how many lives they have left
  • Guess letters
  • Lose the game
  • Win the game
  • Start a new game

See for yourself:

Hangman Functional Animated Gif

Hangman Functional Animated Gif

What’s more, all these features work in both the Android version (above) and the web version. Try the HTML 5 version of Hangman for yourself.

New Techniques

Flexbox

React Native uses flexbox so I had no choice to use that for my last app, but I’d not used it much for a web app. Rather than worry about older browsers, I just went for it this time.

Most of the styles from the React Native app ported straight across. For others, it was a simple case of swapping “justify-content” for “align-items” and adding a “display: flex”.

Massive credit goes to Dave Geddes for creating Flexbox Zombies Story Course. If you want to learn flexbox, I cannot recommend it enough.

NavigationExperimental

The top level component in my last react native app ended up with a big “if…else if….else if….” block at the top. It worked, but wasn’t particularly flexible. I also couldn’t get the android back button to work.

After some research, it sounded like I needed to use Navigator. As that’s been deprecated, I switched to NavigationExperimental.

I got up to speed thanks to Linton Ye’s post http://www.reactnativediary.com/2016/06/23/navigation-examples-1.html.

What’s Next?

I have a few minor things to add like hints and categories, but the main thing is making it look better.

I’d like to avoid just switching images, but at the moment I don’t know how. Watch this space!

Let me know your thoughts

I’d love to hear what you think about it so far. Please leave any comments or questions below.