3 Things to Know About Android as React Native Developer

in Mobile by Adam , Mobile Developeron March 10th, 2018

For the last year we’ve been using React Native more and more. During this time we’ve worked on several projects that had teams build up from developers with different backgrounds: native or frontend.

When you want to build a mobile app for both iOS and Android it is ideal to have at least one person in a team with the knowledge about each platform, but it is not always possible. In these situations, developers have to quickly gain knowledge about other OS’s specifics or ask their colleagues for help.

That’s why we came up with the idea to gather few important things you should know about Android if you are coming either from frontend or iOS background.

Side note: This article won’t describe every detail about the subject. The main goal is to have all the important points in one place. I will also provide you links to the documentation or other sources where you will find more details about each topic.

Android project structure

The first thing to know is the basics about Android project structure; what folders or files you can find there and what they are responsible for. There is definitely more than I will show you here, but I would like to focus on files that you will most likely need to change during the development.

 files that will be discussed
The picture shows the files that will be discussed

AndroidManifest.xml is the file that describes your app. This is the place where you can set your app name, icon and other attributes as part of the application tag. It also contains information about user permissions that needs to be granted by the user in order to work correctly. Another useful tag in the manifest you can use is uses-feature. By adding it you can define what feature your app needs in order to be fully functional e.g. NFC. If its property required is set to “true”, then your app will not be available on devices which do not support that feature.

Another important file is build.gradle. It is actually two files because you can find two of them; one in at root folder and another in an app folder. The first one is the main build file for the whole project. It is used mostly for things that are common for all modules. In your newly created React Native app you have only one module (app folder) so its build file will have much more information. Apart from the things like dependencies or repositories, that will be mostly edited by the react native linking functionality, you will also find android section.

There are a couple of important properties so let’s go through each one.


android {
    compileSdkVersion 26
    defaultConfig {
        applicationId "com.adamg.sampleproject"
        minSdkVersion 16
        targetSdkVersion 26
        versionCode 1
        versionName "1.0"
    }
    ...
}

compileSdkVersion - it tells Gradle what version of Android SDK to compile your app with. It is recommended to compile with the latest SDK.

minSdkVersion - it describes the minimum Android OS version that your app will support. React Native supports all Android versions higher than 4.1 (API 16).

targetSdkVersion - it specifies the Android version your app is targeting. You can read more about these three properties in a very detailed post here.

versionName - this is the version of your app that will be visible to users.

versionCode - this is basically an integer number that describes your build version. It is used to determine which application file is newer. You will not be able to upload new .apk with this number lower or equal to the previous version.

Res folder contains all application resources such as layouts, drawables or UI strings. In React Native you will most likely keep icons or images in a global folder (outside Android project) so you can share it with iOS version of the app, but here you will keep for instance your app icon. I will describe how you can do in the next section.

Setting your app icon

If you’ve read this article up to this point you should already know that we have to put the app icon file inside res folder and then set it in the AndroidManifest.xml file. But let’s go a step back and see how we can easily create this icon and import it to your project.

Android is used on different devices that have different screen resolutions. Because of that we need to generate our icon in a couple of different sizes. The easiest way to do this is to use Image Asset Studio in Android Studio. Here is a detailed instruction on how do do it. Alternatively, you can use Android Asset Studio but currently it does not support adaptive icons.

Both solutions will generate you icons in different sizes that you can import to your project. If you used the second proposition, check the gif below to see how to quickly import your files to the correct folders just by copying and pasting generated folders to the res folder. After that you only have to set the icon in the AndroidManifest.xml file. It may not be required if you didn’t change default file name.

importing iconAndroid Studio

Signing your app

Now you know how to setup your android app, and you also know how to add your beautiful icon. You have implemented your first screen in React Native and you want to distribute your app for testing purposes, let’s say, on Fabric. After building the app and trying to upload it the error message appears, saying something like “You must sign your app in order to upload it”. So what does this signing mean?

Android requires that all .apk files are signed with a certificate. You can think about it as a digital fingerprint of your app. Thanks to this, no one without this certificate can build your app (even with the full source code) nor update existing app with the original one.

How to sign the app?

1. Generate your keystore file and key using Android Studio. This process is quite long to describe, so check the official instructions here.

2. Add signing configuration to your build.gradle file (the one in the app folder). This step is not required but we all like to automate things. This will make it possible to build and sign your .apk with a single command ./gradlew assembleRelease.

To accomplish that, add these lines to your build file.


android {
    ...
    defaultConfig { ... }
    signingConfigs {
        release {
            storeFile file("my-release-key.jks")
            storePassword "password"
            keyAlias "my-alias"
            keyPassword "password"
            v2SigningEnabled false
        }
    }
    buildTypes {
        release {
            signingConfig signingConfigs.release
            ...
        }
    }
}
   

This will automatically sign your app, but it is not an ideal solution. The build.gradle file is strictly related to the project so you have to keep it in your version control system, but you not necessarily want to keep keystore passwords there as well. So, to improve this a little bit, we can add new file in the root project directory named keystore.properties and write there all the secret data.


storePassword=password
keyPassword=password
keyAlias=my-alias
storeFile=myStoreFileLocation

After this step, we can edit the build file. First thing we have to do is to import the file and then read the values from it. See the update build.gradle below:


def keystorePropertiesFile = rootProject.file("keystore.properties")
def keystoreProperties = new Properties()
keystoreProperties.load(new FileInputStream(keystorePropertiesFile))

android {
    ...
    defaultConfig { ... }
    signingConfigs {
        release {
            storeFile file(keystoreProperties['storeFile'])
            storePassword keystoreProperties['storePassword']
            keyAlias keystoreProperties['keyAlias']
            keyPassword keystoreProperties['keyPassword']
            v2SigningEnabled false
        }
    }
    buildTypes {
        release {
            signingConfig signingConfigs.release
            ...
        }
    }
}
   

Thanks to this you can add the keystore.properties file to the .gitignore so it won’t be uploaded to your repository.

Summary

That would be it for now. I hope that after reading this post you will feel at least a little bit more comfortable while navigating through your Android project. There is still much to learn! I did not cover things like app release or fastlane configuration, but I didn’t want this to be to long :)


← back to the blog

You May Also Like

RxJava and Retrolambda for Android

by Damian in on January 10th, 2017

RxJava can make your life easier and you can build better Android apps. How? Check this valuable lesson.

How to Find the Best Technical Partner for Your Startup

by Damian in on November 14th, 2015

Finding Tech People to your startup is not an easy game. It takes time, energy and money. So how to build a strong Tech Team without losing your patience and motivation? Let’s find out.

Interested in Creating a Successful Project?

Contact us and together we'll bring your ideas to life!