React Native Bootcamp : Wrap Up

Final Polishing

Our app looks all awesome, but there are a few place that we need to polish it.

the first one would be a loading screen. Whenever there’s a pause in the app there should be a loading indicator to indicate that some task is going on. It is a good user experience, and doesn’t confuse the user. So let’s list out the place where our app pauses for a bit.
- when the use logs in with Facebook, and waits for firebase auth.
- When we are uploading image to firebase storage, and adding moment to database.
- When we are getting moments on Main Screen.
  A Little Birdy told me that, I should implement only one Loading indicator. And you can implement remaining two by yourself. So, I will only implement loading indicator on only Login Screen and you have to implement remaining two yourself. So Let’s Load the Loading Indicator…

Loading Indicator for Login Screen
Thankfully React Native has inbuilt Component ActivityIndicator, which shows a Loading indicator. Let’s import that

ActivityIndicator is part of react-native so you’d import it from react-native module this way…

  import {
    AppRegistry,
    StyleSheet,
    ActivityIndicator,
    Text,
    View,
    Image
  } from 'react-native';

Now let’s add a boolean state to show and hide the Loading Indicator

  constructor(props){ 
  super(props);
  this.state = {
    progress_bar_animating : false
  }
}

Let’s show the Login button and Loading Indicator Conditionally…
```
  { this.state.progress_bar_animating && (
        <ActivityIndicator
          style={{height: 80}}
          size="large"
        />
      )}
  
```
Wrap the Login Button with the same condition, but with a !(not), So that loading indicator show when the Login Button hides and vice-versa.
Lastly, let’s change the state when the use Logs in. add the following lines inside last else condition of onLoginFinished prop.
this.setState({progress_bar_animating : true});

Creating the App

Wait what?? “Creating the App” what were we doing until now?🤔
Haha, By Creating the App I mean Generating the APK file, So that you can share your App with your friends and tell them how cool App developer ninja you are. So, Let’s get started.

First thing first, to be able to install the generated APK you must first sign it with a key. what’s a sign and what’s a key. In short a key is a file with all of your details ,which works as certificate that you can trust this app. so let’s create a keystore with keytool that comes with Java. Run the below command from the app directory inside android directory(android/app/)
keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000
This command creates a keystore with the name my-release-key.keystore alias my-key-alias. you should change these two to your preferred names. just remember those two, we’ll need them later. After you run this command it will prompt you for some of your details, just fill them in and also remember the password to your keystore.

Now edit the file gradle.properties in android directory, and add following lines

MYAPP_RELEASE_STORE_FILE=my-release-key.keystore
MYAPP_RELEASE_KEY_ALIAS=my-key-alias
MYAPP_RELEASE_STORE_PASSWORD=*****
MYAPP_RELEASE_KEY_PASSWORD=*****

change the details accordingly

Now change your android/app/build.gradle as follows

android {
  ...
  defaultConfig { ... }
  signingConfigs {
      release {
          if (project.hasProperty('MYAPP_RELEASE_STORE_FILE')) {
              storeFile file(MYAPP_RELEASE_STORE_FILE)
              storePassword MYAPP_RELEASE_STORE_PASSWORD
              keyAlias MYAPP_RELEASE_KEY_ALIAS
              keyPassword MYAPP_RELEASE_KEY_PASSWORD
          }
      }
  }
  buildTypes {
      release {
          ...
          signingConfig signingConfigs.release
      }
  }
}

Now from android directory run
./gradlew assembleRelease
With that you should have you apps APK file in android/app/app-release.apk
Download this file and install it in your phone, now you have your app running on your own mobile. Give yourself a pat on your shoulder. Coz now you’ve successfully created your own React Native App.