DEV Community: Mohan Raj

Email Password Authentication using Firebase in React Native

Mohan Raj — Tue, 08 Feb 2022 09:57:51 +0000

In this tutorial, we will learn how to authenticate users with their email and password using Firebase's authentication module in a Non-Expo React Native application.

To learn more about Firebase, refer to this link.

Prerequisites

The basics of React and React Native will not be covered in this tutorial. If you are not comfortable with the basics, this is a helpful tutorial.

Overview

We'll be going through these steps in this article:

Development environment.
Cloning the starter code.
Setting up the Firebase project.
Setting up Firebase Authentication.
Creating an Account.
Sign in to Existing Account.
Authenticated Screen.
Signout.
Recap.

Development environment

IMPORTANT - We will not be using Expo in our project.

You can follow this documentation to set up the environment and create a new React app.

Make sure you're following the React Native CLI Quickstart, not the Expo CLI Quickstart.

Cloning the starter code

To focus more on the authentication module, you can clone the starter code from this repository on GitHub. Follow the Repository's README for instructions.

For the final code, you can look at this GitHub Repository.

This will be the folder structure of the application.

I've set up 2 screens in the screens/ directory:

Authentication.js: Screen to sign in or create an account.
Authenticated.js: Screen that the user can see only if he is logged in.

In the App.js, the Authentication screen is exported. As we write the code, we will conditionally display the Authenticated screen after authenticating the user.

Setting up the Firebase project

Head to the Firebase console and sign in to your account.

Create a new project.

Once you create a new project, you'll see the dashboard.

Now, click on the Android icon to add an Android app to the Firebase project.

You will need the package name of the application to register application. You can find the package name in the AndroidManifest.xml which is located in android/app/src/main/.

Now, proceed to the next step, you can download the google-services.json file. You should place this file in the android/app directory.

This file contains configurations that'll enable your application to access firebase services.

After adding the file, proceed to the next step. It will ask you to add some configurations to the build.gradle files.

First, add the google-services plugin as a dependency inside of your android/build.gradle file:

buildscript {
  dependencies {
    // ... other dependencies

    classpath 'com.google.gms:google-services:4.3.3'
  }
}

Then, execute the plugin by adding the following to your android/app/build.gradle file:

apply plugin: 'com.android.application'
apply plugin: 'com.google.gms.google-services'

You need to perform some additional steps to configure Firebase for iOS. Follow this documentation to set it up.

We should install the @react-native-firebase/app package in our app to complete the set up for Firebase.

npm install @react-native-firebase/app

Setting up Firebase authentication

Head over to the authentication section in the dashboard and click on the Get Started button. This will enable the authentication module in your project.

Next, you should enable email/password authentication in the sign-in methods. Once you've enabled it, press Save.

Let's install the @react-native-firebase/auth package in our app.

npm install @react-native-firebase/auth

Let's declare the dependency for the authentication module in the android/app/build.gradle file using the Firebase Android BoM

dependencies {
    // Add these lines
    implementation platform('com.google.firebase:firebase-bom:26.3.0')
    implementation 'com.google.firebase:firebase-auth'
}

With this, the Firebase authentication module is setup in our application.

Creating an user account

The Firebase auth module has a function called createUserWithEmailAndPassword that'll help to create a new user in the application with an email and a password.

For example:

auth().createUserWithEmailAndPassword('johndoe@gmail.com', 'helloworld123');

This will create a new user in the Firebase app with the email ID johndoe@gmail.com and his respective password. Two users in the same application can't have the same email ID.

This function will also sign in the user into the application after creating a user account.

In the App.js, let's import the auth module.

import auth from '@react-native-firebase/auth';

Let's write a function that will accept an email and a password and call the createUserWithEmailAndPassword to create a new user.

The createUserWithEmailAndPassword is an asynchronous function.

const createUser = (email, password) => {
  try {
    auth().createUserWithEmailAndPassword(email, password);
  } catch (error) {
    alert(error);
  }
};

Now, let's pass this function to the Authentication screen.

return <Authentication createUser={createUser} />;

When the user presses the create button, we should call this function. We should pass the email and the password from the state to this function when it is called.

<Button title="Create" onPress={() => props.createUser(email, password)} />

Now, when a user presses this button, the createUserWithEmailAndPassword is called with the email and password, and this will create a new user in the Firebase app. If there is any error, we'll display it to the user using alert().

He/She will also be logged in to the application after the user account is created. To track whether the user is authenticated or not, let's create a state and set the initial value to false.

const [authenticated, setAuthenticated] = useState(false);

The onAuthStateChanged event will be triggered whenever the authentication state of the user changes inside the application.

You can set an event handler for this listener. This handler will receive the user object. If the user object is null, it means the user is signed out, otherwise, they are signed in.

Let's set the authenticated state to true if the user object is not null in the onAuthStateChanged handler.

auth().onAuthStateChanged((user) => {
  if(user) {
    setAutheticated(true);
  }
})

Now, let's return the Authenticated screen if the user is authenticated in the application.

if (authenticated) {
  return <Authenticated />;
}

return <Authentication createUser={createUser} />;

Sign in user

The Firebase auth module has a function called signInWithEmailAndPassword that'll sign in the user into the application with an email and a password.

For example, this will sign in the user into the app with the email ID:

auth().signInWithEmailAndPassword('johndoe@gmail.com', 'helloworld123');

Let's write a function that will accept an email and a password and call the signInWithEmailAndPassword to sign in the user.

The signInWithEmailAndPassword is an asynchronous function.

const signin = (email, password) => {
  try {
    auth().signInWithEmailAndPassword(email, password);
  } catch (error) {
    alert(error);
  }
};

Now, let's pass this function to the Authentication screen.

return <Authentication signin={signin} createUser={createUser} />;

When the user presses the signin button, we should call this function. We should pass the email and the password from the state to this function when it is called.

<Button title="signin" onPress={() => props.signin(email, password)} />

Now, when a user presses the signin button, the signInWithEmailAndPassword is called with the email and password, and this allows the user into the app. If there is any error, we'll display it to the user using alert().

Signout

We should use the signOut method in the auth module to sign out a user from the application.

Let's import the auth module in Authenticated.js.

import auth from '@react-native-firebase/auth';

Let's call the signOut method when the user presses the signout button.

<Button title="Signout" onPress={() => auth().signOut()} />

Now, when the user presses the button, the auth module will sign the user out from the application. This will trigger the onAuthStateChanged listener. The handler will receive null instead of the user object.

Thus, we should set the authenticated state to false if we receive null.

auth().onAuthStateChanged((user) => {
  if(user) {
    setAuthenticated(true);
  } else {
    setAuthenticated(false);
  }
})

Let's Recap

We set up our development environment and created a React Native app.
We created a Firebase project.
We set up the authentication module and enabled email/password authentication in our project.
We cloned the starter code.
We added the dependencies to the build.gradle files.
We added a function to create a new user with the createUserWithEmailAndPassword method from the auth module.
We created a state to track the authentication state of the user and used the onAuthStateChanged handler to update the state.
We added a function to sign in a user with the signInWithEmailAndPassword method from the auth module.
We used the auth module to sign the user out from the application from the Authenticated screen.

Congratulations, 🥳 You did it.

Thanks for reading!

Facebook OAuth using Firebase in React Native

Mohan Raj — Wed, 05 May 2021 20:33:27 +0000

In this tutorial, we will learn how to authenticate users with their Facebook accounts using the authentication module in Firebase in a Non-Expo React Native application.

To learn more about Firebase, refer to this link.

Prerequisites

We will not cover the basics of React and React Native in this tutorial. If you are not comfortable with the basics, we highly recommended going over this tutorial before you continue further.

Overview

We'll be going through these steps in this article:

Development environment.
Cloning the starter code.
Setting up the Firebase project.
Setting up Facebook App
Setting up Firebase Authentication.
Sign-in
Display authenticated screen
Sign out
Recap

Development environment

IMPORTANT - We will not be using Expo in our project.

Follow this documentation to set up the development environment.

Make sure you're following the React Native CLI Quickstart, not the Expo CLI Quickstart.

Cloning the starter code

Clone the starter code from this GitHub repository.

You can check out the final code from this GitHub Repository.

This will be the folder structure of the application.

I've set up 2 screens in the screens/ directory:

Authentication.js: Screen with a Facebook Sign-in button to initiate the sign-in process.
Authenticated.js: Screen that the user can see only if he is logged in.

Setting up the Firebase project

Head to the Firebase console, sign in to your account and Create a new project.

You'll be presented with the dashboard once you create the new project.

Now, click on the Android icon to add an Android app to the Firebase project.

You'll need the package name of the application to register your application. You'll find the package name in the AndroidManifest.xml which is located in android/app/src/main/.

In the next step, you should download the google-services.json file and place it in the android/app directory.

This file contains configurations that'll enable your application to access firebase services.

In the next step, It'll ask you to add configurations to the build.gradle files.

First, add the google-services plugin as a dependency inside of your android/build.gradle file:

buildscript {
  dependencies {
    // ... other dependencies
    classpath 'com.google.gms:google-services:4.3.3'
  }
}

Then, execute the plugin by adding the following to your android/app/build.gradle file:

apply plugin: 'com.android.application'
apply plugin: 'com.google.gms.google-services'

You need to perform some additional steps to configure Firebase for iOS. Follow this documentation to set it up.

Finally, let's install the @react-native-firebase/app package in our app to complete the set up for Firebase.

npm install @react-native-firebase/app

Setting up Facebook App

Head to developers.facebook.com and create a developer account.

Go to the Apps section and create a new app.

Once you create an application, you will be greeted with the App Dashboard. Add the Facebook Login product to your app from the dashboard.

To find the App ID and the App secret, which will be required in the later steps, head to basic settings.

Once you make a copy of it, scroll down until you find Add Platform.

Once you click on it, Select Android.

Fill out the Package Name, which you can find the package name in the AndroidManifest.xml that is located in android/app/src/main/.

For the Class Name, fill it out as MainActivity.

For the Key Hash, you need to generate it using openSSL. You can download it from Google Code Archive.

Download the K version.

Once you've downloaded it, extract it and copy the folder to C:/.

Detect your keytool.exe, which can be found in the JDK directory inside the bin/ directory. The JDK is usually in a location like C:\Program Files\Java\jdk1.8.0_261\bin.

Now, inside the bin/ folder, run:

./keytool -exportcert -alias androiddebugkey -keystore "C:\Documents and Settings\Administrator.android\debug.keystore" | "C:\OpenSSL\bin\openssl" sha1 -binary |"C:\OpenSSL\bin\openssl" base64

Output:

4iuaxR+bpCEhMEQslBTwAePpz74=

Refer to this StackOverflow question for more details on how to generate a Key Hash.

For iOS setup, refer to this Quick Start Guide.

Setting up Firebase authentication

Head to the authentication section in the dashboard and click on the Get Started button. This will enable the authentication module of your project.

Then, enable Facebook authentication in the sign-in methods. Once you've enabled it, provide the App ID and the App secret from the Facebook Developer Console and press Save.

To complete the setup, you should add the OAuth redirect URI to your Facebook app configuration. Copy the OAuth redirect URI and head to the Facebook Developer console.

Under Products, head to Settings in Facebook Login. Paste the redirect URI under Valid OAuth Redirect URIs in Client OAuth Settings.

Now, let's head to the application and install the auth module.

Let's install the @react-native-firebase/auth package in our app.

npm install @react-native-firebase/auth

Let's declare the dependency for the authentication module in the android/app/build.gradle file using the Firebase Android BoM

dependencies {
    // Add these lines
    implementation platform('com.google.firebase:firebase-bom:26.3.0')
    implementation 'com.google.firebase:firebase-auth'
}

Next, let's install the React Native Facebook SDK.

npm install react-native-fbsdk

In android/build.gradle, add mavenCentral() under repositories in buildscript:

buildscript {
    repositories {
        google()
        jcenter()

        // Add this line
        mavenCentral()
    }
}

In android/app/build.gradle, add the following under dependencies:

implementation 'com.facebook.android:facebook-android-sdk:[5,6)'

Now, you should add your Facebook App ID to your project's strings file in android/app/res/values/strings.xml.

<resources>
  <string name="app_name">RNFirebaseFacebookAuth</string>
  <string name="facebook_app_id"><-- Your App ID here --></string>
</resources>

In the AndroidManifest.xml file, add a uses-permission element under manifest: (Ignore if already present)

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

Next, add a meta-data to the application element:

<application android:label="@string/app_name" ...>
    ...
    <meta-data android:name="com.facebook.sdk.ApplicationId" android:value="@string/facebook_app_id"/>
    ...
</application>

Follow this Getting Started Guide to set up the SDK for iOS.

Sign-in

In App.js, let's create a function called signIn that will be called when the user presses the Sign in button. Let's wrap all the code inside the function in a try/catch block to display any error that may arise during the sign in flow.

async function signIn() {
  try {

    // Code goes here

  } catch (error) {
    alert(error);
  }
}

Let's use the Login Manager to log in with permissions. We need to pass an array of permissions that the app needs to the function.

const result = await LoginManager.logInWithPermissions([
  'public_profile',
  'email',
]);

If the result contains an isCancelled property, it means the user cancelled the process. Let's throw an error which will then be handled by the catch block.

if (result.isCancelled) {
  throw 'User cancelled the login process';
}

Once signed in, we should get the users AccessToken.

const data = await AccessToken.getCurrentAccessToken();

If the data is empty, let's throw an error.

if (!data) {
  throw 'Something went wrong obtaining access token';
}

Now, we should create a credential using the access token and sign in the user into the app.

const facebookCredential = auth.FacebookAuthProvider.credential(data.accessToken);
return auth().signInWithCredential(facebookCredential);

Here is the complete code for the signIn function:

async function signIn() {
  try {
    // Login the User and get his public profile and email id.
    const result = await LoginManager.logInWithPermissions([
      'public_profile',
      'email',
    ]);

    // If the user cancels the login process, the result will have a 
    // isCancelled boolean set to true. We can use that to break out of this function.
    if (result.isCancelled) {
      throw 'User cancelled the login process';
    }


    // Get the Access Token 
    const data = await AccessToken.getCurrentAccessToken();

    // If we don't get the access token, then something has went wrong.
    if (!data) {
      throw 'Something went wrong obtaining access token';
    }

    // Use the Access Token to create a facebook credential.
    const facebookCredential = auth.FacebookAuthProvider.credential(data.accessToken);

    // Use the facebook credential to sign in to the application.
    return auth().signInWithCredential(facebookCredential);

  } catch (error) {
    alert(error);
  }
}

Display authenticated screen

The onAuthStateChanged event will be triggered whenever the authentication state of the user changes inside the application.

You can set an event handler for this listener. This handler will receive the user object. If the user object is null, it means the user is signed-out, otherwise, they are signed-in.

You can access the current authenticated user's details using auth().currentUser from anywhere in the application. The user object will contain the displayName, email, and photoURL that were copied from Facebook to Firebase.

To learn more about the user object, refer to this documentation.

Let's create a state to track whether the user is authenticated or not. We should set the default value to false.

const [authenticated, setAutheticated] = useState(false);

Let's set the authenticated state to true if the user object is not null in the onAuthStateChanged handler.

auth().onAuthStateChanged((user) => {
  if(user) {
    setAutheticated(true);
  }
})

If the user is authenticated, we should display the Authenticated screen.

if (authenticated) {
  return <Authenticated />;
}
return <Authentication signIn={signIn} />;

I'm using auth().currentUser in the Authenticated screen to display the email ID, name, and the user's profile picture.

const user = auth().currentUser;
return (
  <View style={styles.screen}>
    <Text style={styles.title}>You're Logged In</Text>
    <Image source={{ uri: user?.photoURL }} style={styles.image} />
    <Text style={styles.text}>{user?.displayName}</Text>
    <Text style={styles.text}>{user?.email}</Text>
    <View style={{ marginTop: 30 }}>
      <Button title="Signout" onPress={() => auth().signOut()} />
    </View>
  </View>
);

Sign out

We should use the signOut method in the auth module to sign a user out from the application.

Let's import the auth module in Authenticated.js.

import auth from '@react-native-firebase/auth';

Let's call the signOut method when the user presses the signout button.

<Button title="Signout" onPress={() => auth().signOut()} />

Thus, we should set the authenticated state to false if we receive null.

auth().onAuthStateChanged((user) => {
  if(user) {
    setAuthenticated(true);
  } else {
    setAuthenticated(false);
  }
})

Let's recap

We set up our development environment and created a React Native app.
We cloned the starter code.
We created a Facebook app with a developer account and enabled Facebook Login for the app.
We created a Firebase project and enabled Facebook authentication in our project with App ID and App Secret.
We installed the required packages and we added the dependencies to the build.gradle files.
We added the App ID to the strings.xml file and added some configurations to the AndroidManifest.xml file.
We wrote a function to login the user with their Facebook access token using the Facebook SDK.
We created a state to track the authentication state of the user and used the onAuthStateChanged handler to update the state.
We displayed the Authenticated screen when the user had been authenticated.
We used the auth module to sign out the user from the application from the Authenticated screen.

Congratulations, 🥳 You did it.

Thanks for reading.

Happy coding!

Google OAuth using Firebase with React Native

Mohan Raj — Wed, 31 Mar 2021 19:02:02 +0000

OAuth is an open standard for access delegation, commonly used as a way for Internet users to grant websites or applications to access information on other websites without giving them the passwords.

In this tutorial, we will learn how to authenticate users with their Google accounts using the authentication module in Firebase in a Non-Expo React Native application.

To learn more about Firebase, refer here.

Prerequisites

We will not cover the basics of React and React Native in this tutorial. If you are not comfortable with the basics, we highly recommended going over this tutorial before you continue further.

Overview

Development environment
Cloning the starter code
Setting up the Firebase project
Setting up Firebase Authentication
Sign-in
Display authenticated screen
Sign out
Recap

Development environment

IMPORTANT - We will not be using Expo in our project.

You can follow this documentation to set up the environment and create a new React app.

Make sure you're following the React Native CLI Quickstart and not the Expo CLI Quickstart.

Cloning the starter code

To focus more on the authentication module, You can clone the starter code from this repository on GitHub.

Follow the Repository's README for instructions.

For the final code, refer to this GitHub Repository.

Folder Structure of the repository:

I've set up 2 screens in the screens/ directory:

Authentication.js: Screen with a Google Sign-in button to initiate the sign-in process.
Authenticated.js: The user can see this screen only if he is logged in.

Setting up the Firebase project

Head to the Firebase console, sign in to your account, and then create a new project.

You'll see the dashboard after you create a new project.

Click on the Android icon to add an Android app to your Firebase project.

You'll need the package name of the application to register the application.

You can find the package name in the AndroidManifest.xml file which is located in android/app/src/main/.

You will also need the Debug signing certificate SHA-1. You can get that by running the following command in the project directory.

cd android && ./gradlew signingReport

This will generate the signing certificate of the application.

You will get an output something similar to this:

Task :app:signingReport
Variant: debugUnitTest
Config: debug
Store: C:\Users\Mohan\.android\debug.keystore
Alias: AndroidDebugKey
MD5: 5F:BB:9E:98:5E:E7:E6:29:19:28:61:4F:42:B9:74:AB
SHA1: 9E:61:75:0E:5C:F4:EB:B4:EB:9D:B3:13:5F:50:D6:AB:2E:4E:12:0D
SHA-256: 6C:BB:49:66:18:B9:7F:74:49:B5:56:D0:24:43:6A:1B:41:91:97:A3:2E:7C:4A:6E:59:40:8F:5C:74:6F:CC:93
Valid until: Friday, December 23, 2050

Make sure you are copying the SHA1 from Task :app:signingReport and not from any other Task.

Copy the SHA1 value and paste it into the Firebase console.

Now, proceeding to the next step, you will have to download the google-services.json file. You should place this file in the android/app directory.

This file contains configurations that'll enable your application to access firebase services.

After adding the file, proceed to the next step. It will ask you to add some configurations to the build.gradle files.

First, add the google-services plugin as a dependency inside of your android/build.gradle file:

buildscript {
  dependencies {
    // ... other dependencies
    classpath 'com.google.gms:google-services:4.3.3'
  }
}

Then, execute the plugin by adding the following to your android/app/build.gradle file:

apply plugin: 'com.android.application'
apply plugin: 'com.google.gms.google-services'

You need to perform some additional steps to configure Firebase for iOS. Follow this documentation to set it up.

Finally, we should install the @react-native-firebase/app package in our app to complete the set up for Firebase.

npm install @react-native-firebase/app

Setting up Firebase Authentication

Head over to the Authentication section in the dashboard and click on the Get Started button. This will enable the authentication module in your project.

Next, you should enable phone authentication in the sign-in methods. Once you've enabled it, press Save.

Now, let's head to the application and install the auth module.

Let's install the @react-native-firebase/auth package in our app.

npm install @react-native-firebase/auth

Let's declare the dependency for the authentication module in the android/app/build.gradle file using the Firebase Android BoM

dependencies {
    // Add these lines
    implementation platform('com.google.firebase:firebase-bom:26.3.0')
    implementation 'com.google.firebase:firebase-auth'
}

With this, the firebase authentication module is set up in our application.

Sign-in

The google-signin library is a wrapper around the official Google sign-in library.

We should use this library to create a credential, and then sign-in with Firebase.

First, we must initialize the Google SDK using your webClientId which can be found in the google-services.json file in android/app as the client/oauth_client/client_id property.

In App.js, let's import the google-signin library and the Firebase auth module.

import auth from '@react-native-firebase/auth';
import { GoogleSignin } from '@react-native-community/google-signin';

You should call the GoogleSignin.configure method with the webClientId to initialize the SDK. You should do this outside the App() function.

GoogleSignin.configure({
  webClientId:
    '260759292128-4h94uja4bu3ad9ci5qqagubi6k1m0jfv.apps.googleusercontent.com',
});

Now, that we have initialized the Google SDK, let's work on authenticating the user.

In the starter code, I've set up a function called onGoogleButtonPress in the App.js file. This function is passed down to the Authentication screen as a prop, and then, it is set as the onPress property of the Google sign-in button.

Thus, this function in the App.js file will be called when the Google sign-in button is pressed by the user.

Let's write the code to sign-in the user in the onGoogleButtonPress function.

async function onGoogleButtonPress() {
  // Sign-in Process here
}

First, we should get the user's idToken from Google using the GoogleSignin.signIn() method. It's an asynchronous function, so let's use the await keyword to wait for the promise to get resolved.

// Get the users ID token
const { idToken } = await GoogleSignin.signIn();

Now, we should create a Google credential using the idToken.

const googleCredential = auth.GoogleAuthProvider.credential(idToken);

With the Google credential that we have created for the user, we should use the signInWithCredential method from the Firebase auth module to sign-in the user into the app.

return auth().signInWithCredential(googleCredential);

This is the complete code for the onGoogleButtonPress function.

async function onGoogleButtonPress() {
  const { idToken } = await GoogleSignin.signIn();
  const googleCredential = auth.GoogleAuthProvider.credential(idToken);
  return auth().signInWithCredential(googleCredential);
}

Display authenticated screen

The onAuthStateChanged event will be triggered whenever the authentication state of the user changes inside the application.

You can set an event handler for this listener. This handler will receive the user object. If the user object is null, it means the user is signed-out, otherwise, they are signed-in.

To learn more about the user object, refer to this documentation.

Let's create a state to track whether the user is authenticated or not. We should set the default value to false.

const [authenticated, setAutheticated] = useState(false);

Let's set the authenticated state to true if the user object is not null in the onAuthStateChanged handler.

auth().onAuthStateChanged((user) => {
  if(user) {
    setAutheticated(true);
  }
})

If the user is authenticated, we should display the Authenticated screen component.

if (authenticated) {
  return <Authenticated />;
}

return <Authentication onGoogleButtonPress={onGoogleButtonPress} />;

I'm using auth().currentUser in the Authenticated screen to display the email address, name, and the user's profile picture.

const user = auth().currentUser;
return (
  <View style={styles.screen}>
    <Text style={styles.title}>You're Logged In</Text>
    <Image source={{ uri: user?.photoURL }} style={styles.image} />
    <Text style={styles.text}>{user?.displayName}</Text>
    <Text style={styles.text}>{user?.email}</Text>
    <View style={{ marginTop: 30 }}>
      <Button title="Signout" onPress={() => auth().signOut()} />
    </View>
  </View>
);

Sign out

We should use the signOut method in the auth module to sign a user out from the application.

Let's import the auth module in Authenticated.js.

import auth from '@react-native-firebase/auth';

Let's call the signOut method when the user presses the signout button.

<Button title="Signout" onPress={() => auth().signOut()} />

Now, when the user presses the button, the auth module will sign out the user from the application. This will trigger the onAuthStateChanged listener. The handler will receive null instead of the user object.

Thus, we should set the authenticated state to false if we receive null.

auth().onAuthStateChanged((user) => {
  if(user) {
    setAuthenticated(true);
  } else {
    setAuthenticated(false);
  }
})

Let's recap

We set up our development environment and created a React Native app.
We cloned the starter code.
We created a Firebase project and enabled Google authentication in our project.
We installed the required packages and we added the dependencies to the build.gradle files.
We configured the Google SDK and signed in the user when the user presses the Google sign-in button.
We created a state to track the authentication state of the user and used the onAuthStateChanged handler to update the state.
We displayed the Authenticated screen when the user has been authenticated.
We used the auth module to sign the user out from the application from the Authenticated screen.

Congratulations, 🥳 You did it.

Thanks for reading!

Happy coding.

Phone Number Authentication using Firebase in React Native

Mohan Raj — Fri, 12 Feb 2021 06:34:16 +0000

In this tutorial, we will learn how to authenticate users with their phone numbers using Firebase's authentication module in a Non-Expo React Native application.

Firebase

Firebase is a platform developed by Google for creating mobile and web applications. It was originally an independent company founded in 2011. In 2014, Google acquired the platform and it is now their flagship offering for app development.

Authentication Module

Firebase's authentication module provides backend services and SDKs to authenticate users in your app. It supports authentication using passwords, phone numbers, popular identity providers like Google, Facebook and Twitter, and more.

The native Firebase SDKs ensure that a user's authentication state between app sessions is persisted. The user can clear their authentication state by clearing the app's data/cache.

Prerequisites

The basics of React and React Native will not be covered in this tutorial. If you are not comfortable with the basics, this is a helpful tutorial.

Overview

We'll be going through these steps in this article:

Development environment.
Cloning the starter code.
Setting up the Firebase project.
Setting up Firebase Authentication.
Phone Number.
Verification code.
Authenticated screen.
Signout.
Test phone numbers.
Recap.

Development environment

IMPORTANT - We will not be using Expo in our project.

You can follow this documentation to set up the environment and create a new React app.

Make sure you're following the React Native CLI Quickstart, not the Expo CLI Quickstart.

Cloning the starter code

To focus more on the authentication module, you can clone the starter code from this repository on GitHub. Follow the Repository's README for instructions.

For the final code, you can look at this GitHub Repository.

This will be the folder structure of the application.

I've set up 3 screens in the screens/ directory:

PhoneNumber.js: Screen to enter the phone number.
VerifyCode.js: Screen to enter the one-time verification code.
Authenticated.js: Screen that the user can see only if he is logged in.

In the App.js, the PhoneNumber screen is exported. As we write the code for authentication, we will display various screens at various stages.

Setting up the Firebase project

Head to the Firebase console and sign in to your account.

Create a new project.

Once you create a new project, you'll see the dashboard.

Now, click on the Android icon to add an Android app to the Firebase project.

You will need the package name of the application to register the application. You can find the package name in the AndroidManifest.xml which is located in android/app/src/main/.

You will also need the Debug signing certificate SHA-1. You can get that by running the following command in the project directory.

cd android && ./gradlew signingReport

This will generate the signing certificate of the application.

You will get an output like this:

Task :app:signingReport

Variant: debugUnitTest
Config: debug
Store: C:\Users\Mohan\.android\debug.keystore
Alias: AndroidDebugKey
MD5: 5F:BB:9E:98:5E:E7:E6:29:19:28:61:4F:42:B9:74:AB
SHA1: 9E:61:75:0E:5C:F4:EB:B4:EB:9D:B3:13:5F:50:D6:AB:2E:4E:12:0D
SHA-256: 6C:BB:49:66:18:B9:7F:74:49:B5:56:D0:24:43:6A:1B:41:91:97:A3:2E:7C:4A:6E:59:40:8F:5C:74:6F:CC:93
Valid until: Friday, December 23, 2050

Make sure you are copying the SHA1 from Task :app:signingReport and not from any other Task.

Copy the SHA1 value and paste it into the Firebase console.

Now, proceed to the next step, you can download the google-services.json file. You should place this file in the android/app directory.

This file contains configurations that'll enable your application to access firebase services.

After adding the file, proceed to the next step. It will ask you to add some configurations to the build.gradle files.

First, add the google-services plugin as a dependency inside of your android/build.gradle file:

buildscript {
  dependencies {
    // ... other dependencies

    classpath 'com.google.gms:google-services:4.3.3'
  }
}

Then, execute the plugin by adding the following to your android/app/build.gradle file:

apply plugin: 'com.android.application'
apply plugin: 'com.google.gms.google-services'

You need to perform some additional steps to configure Firebase for iOS. Follow this documentation to set it up.

Finally, we should install the @react-native-firebase/app package in our app to complete the set up for Firebase.

npm install @react-native-firebase/app

Setting up Firebase Authentication

Head over to the Authentication section in the dashboard and click on the Get Started button. This will enable the authentication module in your project.

Next, you should enable phone authentication in the sign-in methods. Once you've enabled it, press save.

Firebase must be able to verify that the requests are coming from your app.

There are two ways to accomplish this:

SafetyNet: If the user has a device with Google Play Services installed, then Firebase can verify whether the request is legitimate.

In the Google Cloud console, enable the Android Device Verification API for your project. The default Firebase API Key will be used and needs to be permitted to access the DeviceCheck API.

reCAPTCHA: If SafetyNet cannot be used, Firebase does a reCAPTCHA verification. The reCAPTCHA challenge can often be completed without the user having to solve anything.

Now, let's head to the application and install the auth module.

Let's install the @react-native-firebase/auth package in our app.

npm install @react-native-firebase/auth

Let's declare the dependency for the authentication module in the android/app/build.gradle file using the Firebase Android BoM

dependencies {
    // Add these lines
    implementation platform('com.google.firebase:firebase-bom:26.3.0')
    implementation 'com.google.firebase:firebase-auth'
}

When reCAPTCHA is used for device verification, the application will open the browser for the reCAPTCHA test. So, we should also add implementation "androidx.browser:browser:1.2.0" in the android/app/build.gradle file.

dependencies {
    implementation platform('com.google.firebase:firebase-bom:26.3.0')
    implementation 'com.google.firebase:firebase-auth'

    // Add this line
    implementation "androidx.browser:browser:1.2.0
}

With this, the firebase authentication module is set up in our application.

Phone Number

In App.js, let's import the auth module from Firebase.

import auth from '@react-native-firebase/auth';

We should use the signInWithPhoneNumber method in the auth module. It accepts a phone number in the form of a string as its argument. It is an async function, thus it returns a Promise.

The phone number should contain the country code in it.

auth().signInWithPhoneNumber('+91 1234567890');

This will trigger the Firebase servers to send a verification code to the given phone number.

The signInWithPhoneNumber method returns an object with a confirmation method that is used to verify the one-time code sent to the number.

Let's create a state using the useState hook to hold the confirmation method.

import React, { useState } from 'react';

const [confirm, setConfirm] = useState(null);

Now, let's write a function that accepts a phone number as an argument and calls the signInWithPhoneNumber function with the given phone number.

We should use async/await to wait for the promise to be resolved. If the promise is resolved, let's set the returned confirmation method to the confirm state using the setConfirm method.

async function signIn(phoneNumber) {
  try {
    const confirmation = await auth().signInWithPhoneNumber(phoneNumber);
    setConfirm(confirmation);
  } catch (error) {
    alert(error);
  }
}

We should pass this function to the PhoneNumber screen as a prop, and call this function when the user presses the button.

return <PhoneNumber onSubmit={signIn} />;

In PhoneNumber.js, I've already set up a state that holds the phone number from the input. Let's call the function that we passed and send the phone number as the argument.

To call a function when the user presses a button, you should pass the function to the onPress property of the button.

<Button title="Phone Number Sign In" onPress={() => props.onSubmit(phoneNumber)} />

Now, when the user presses the button, the signInWithPhoneNumber method from the auth module is called and it will trigger the Firebase servers to send a verification code to the given phone number. It will also return a method that should be used to confirm the verification code.

Verification Code

When the confirmation method is available, we should display the VerifyCode screen instead of the PhoneNumber screen.

if (confirm) return <VerifyCode />;

return <PhoneNumber onSubmit={signIn} />;

Now that we have displayed the screen, let's write a function to confirm the verification code.

The confirm method is an async method. If the verification code is correct, the promise will be resolved. If not, it'll be rejected.

We should also make sure to clear the confirm method from the state once it serves its purpose.

async function confirmVerificationCode(code) {
  try {
    await confirm.confirm(code);
    setConfrim(null);
  } catch (error) {
    alert('Invalid code');
  }
}

Let's pass this function to the VerifyCode screen as a prop, and call this function when the user presses the confirm button.

if (confirm) return <VerifyCode onSubmit={confirmVerificationCode} />;

return <PhoneNumber onSubmit={signIn} />;

In VerifyCode.js, I've already set up a state that holds the verification code from the input. Let's call the function that we passed and pass the verification code as the argument.

<Button title="Confirm OTP" onPress={() => props.onSubmit(code)} />

Now, when the user presses the button, the confirm method is called and that will verify whether the code is correct or not. The user will be authenticated into the app if the verification code is correct. If not, we will display an error message to the user.

Authenticated screen

The onAuthStateChanged event will be triggered whenever the authentication state of the user changes inside the application.

You can set an event handler for this listener. This handler will receive the user object. If the user object is null, it means the user is signed-out, otherwise, they are signed-in.

You can access the current authenticated user's details using auth().currentUser from anywhere in the application.

To learn more about the user object, refer to this documentation.

Let's create a state to track whether the user is authenticated or not. We should set the default value to false.

const [authenticated, setAutheticated] = useState(false);

Let's set the authenticated state to true if the user object is not null in the onAuthStateChanged handler.

auth().onAuthStateChanged((user) => {
  if(user) {
    setAutheticated(true);
  }
})

If the user is authenticated, we should display the Authenticated screen.

if (authenticated) return <Autheticated />;

if (confirm) return <OTPScreen onSubmit={confirmOTP} />;

return <PhoneNumber onSubmit={signIn} />;

Signout

We should use the signOut method in the auth module to sign out a user from the application.

Let's import the auth module in Authenticated.js.

import auth from '@react-native-firebase/auth';

Let's call the signOut method when the user presses the signout button.

<Button title="Signout" onPress={() => auth().signOut()} />

We should set the authenticated state to false if we receive null.

auth().onAuthStateChanged((user) => {
  if(user) {
    setAuthenticated(true);
  } else {
    setAuthenticated(false);
  }
})

Test phone numbers

Firebase provides support for testing phone numbers.

In the Firebase Console, click on the "Phone numbers for testing" dropdown in the "Phone" authentication provider.

Enter a new phone number and a test code.

Once added, the number can be used with the signInWithPhoneNumber method. The firebase server will not send a verification code to a test number. You should enter the test code that you specified here in the application to sign-in.

Result

Here is the sign-in flow if the Device Verification API works properly.

If the Device Verification API is not enabled, or if SafetyNet can't be reached, the auth module will use a reCAPTCHA to verify the request.

Let's Recap

We set up our development environment and created a React Native app.
We created a Firebase project.
We set up the authentication module and enabled phone number authentication in our project.
We enabled the Device Verification API in the Google Cloud Console for our project.
We cloned the starter code.
We added the dependencies to the build.gradle files.
We used the auth module to send a verification code to the given phone number.
We added a method to confirm the verification code.
We created a state to track the authentication state of the user and used the onAuthStateChanged handler to update the state.
We used the auth module to sign the user out from the application from the Authenticated screen.
We learned how to add Test numbers from the Firebase console.

Congratulations, 🥳 You did it.

Thanks for reading!

Node.js CLI Input

Mohan Raj — Thu, 04 Feb 2021 19:28:29 +0000

In this tutorial, we will learn how to get user input in a Node.js CLI application. To do this, you will need to listen to STDIN (Standard Input), which Node.js exposes as process.stdin, a readable stream.

Streams are used to deal with I/O. You can learn more about it in this documentation.

Prerequisites

You should have an understanding of the JavaScript language.
You should have Node.js installed on your computer.

Overview

Project Setup
Readline Package
Callback Hell
Async Iterator
Readline Sync Package
Recap

Project setup

To get started, let’s set up our project.

Create a new directory called node-cli-input.

Inside the directory, run:

npm init -y

This will generate a package.json file.

Once that's done, create a new file called index.js to write our code.

Readline package

The readline package is a built-in package in Node.js. readline is a wrapper around the standard I/O.

Let's import the readline package into our index.js file.

const readline = require('readline');

We should create a new readline interface object using the readline.createInterface() method and configure the readable and writable streams. Let's set the input and output streams to process.stdin and process.stdout respectively.

const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout
});

We can ask a question to the user using the rl.question() method.

The rl.question() method takes 2 arguments:

String: This string will be displayed as the question to the user.
Callback function: The rl.question() method will wait until the user provides input. Once the user provides input, this callback function will be executed. The callback function will get the user's input as an argument.

NOTE: We should close the streams using the rl.close() method inside the callback function. If not closed, the process will remain in an idle state.

For example:

rl.question("Your favorite color? ", (input) => {
  console.log(input);
  rl.close();
});

Output:

Your favorite color? Black
Black

You can add an event listener for the close streams event using the rl.on() method.

rl.on('close', () => {
  console.log('Streams Closed')
})

Output:

Your favorite color? Black
Black
Streams Closed

You can learn more about the readline package from it's documentation.

Callback hell

The problem with the rl.question() method is, it doesn't return a Promise. Thus, we can't use async/await to pause the flow of the program until the user provides the input.

If you want to get multiple user inputs in sequence, you have to do it within a callback function, like this:

rl.question("Question 1? ", (answer1) => {
  // do stuff

  rl.question("Question 2? ", (answer2) => {
    // do stuff

    rl.question("Question 3? ", (answer3) => {
      // do stuff

      rl.question("Question 4? ", (answer4) => {
        console.log(answer1, answer2, answer3, answer4);
        rl.close();
      });
    });
  });
});

As you can see, this can quickly get out of control and the code will be hard to manage.

Async iterator

Asynchronous iteration allows us to iterate over data that comes asynchronously, on-demand. You can create an async iterator that iterates through each line in the input stream.

If you'd like to learn more about Async iterators, refer to this article.

for await (const line of rl) {
  // Each line in from the input stream will be available successively here as `line`.
}

We can't use the await keyword outside of an async function. So, we need to wrap all of our code inside an async function.

async function main() {
  // do your stuff here

  for await (const line of rl) {
    // Each line in from the input stream will be available here as `line`.
  }
}

main();

Let's create a new function called input() to prompt the user and get input.

We can use the Symbol.asyncIterator of the readline object to get the next value in the input stream.

async function input(prompt) {
  console.log(prompt);
  return (await rl[Symbol.asyncIterator]().next()).value;
}

Now, we can use this function to get the value from the input stream and use the await keyword to pause the execution until we get the input from the user.

async function main() {
  const name = await input("May I have your name? ");
  const color = await input("Your favorite color? ");

  console.log(name, color);
  rl.close();
}

main();

Readline sync package

If you don't mind installing an external package, that will increase the bundle size of the CLI application you are building, you can use the readline-sync package to get the input from the user in a synchronous manner.

Let's install the readline-sync by running:

npm install readline-sync

Now, let's import the package.

const readlineSync = require("readline-sync");

Similar to the readline package, you can use the readlineSync.question() method to prompt the user for input.

Unlike the readline package, you don't have to pass a callback function to this function. The readlineSync.question() method will return the user's input.

let input = readlineSync.question('May I have your name? ');
console.log(`Hi ${input}!`);

The readlineSync package also has other functions like readlineSync.keyInYN(), readlineSync.keyInSelect(), etc.

The readlineSync.keyInYN() is used to get the user's response from a single key without pressing the Enter key. The function will return true if "Y" was pressed or false if something else was pressed.

if (readlineSync.keyInYN('Yes?')) {
  // 'Y' key was pressed.
} else {
  // Another key was pressed.
}

The readlineSync.keyInSelect() is used to prompt a user to choose an item from a list. The function will return the number the user selected. The user doesn't have to press the Enter button when we use this function.

let colors = ['Black', 'White', 'Gray', 'Yellow', 'Blue'];

let index = readlineSync.keyInSelect(colors, 'Favorite Color?');
console.log(colors[index]);

Output:

[1] Black
[2] White
[3] Gray
[4] Yellow
[5] Blue
[0] CANCEL

Favorite Color? [1...5 / 0]: 2
White

You can learn more about the readline-sync package and the other methods that are available from it's npm page.

Let's recap

We used the readline package to prompt input from the user.
We added an event listener for the readline stream's close event.
We used the async iterator to write an async function to get the input from the user to prevent callback hell.
We used the readline-sync package to prompt input from the user synchronously.

Congratulations, 🥳 You did it.

Thanks for reading!

Landmark Recognition using Firebase ML in React Native

Mohan Raj — Tue, 02 Feb 2021 06:01:11 +0000

In this tutorial, we will be building a Non-Expo React Native application to recognize landmarks from images using Firebase's machine learning kit.

Firebase

Firebase is a platform developed by Google for creating mobile and web applications. It was originally an independent company founded in 2011. In 2014, Google acquired the platform, and it is now their flagship offering for app development. Wikipedia

Firebase's ML Kit is a mobile SDK that brings Google's machine learning expertise to Android and iOS apps. There's no need to have deep knowledge of neural networks or model optimization to get started with the ML kit. On the other hand, if you are an experienced ML developer, it provides APIs that help you use custom TensorFlow Lite models in your mobile apps. Firebase ML Docs.

Prerequisites

To proceed with this tutorial:

You'll need a basic knowledge of React & React Native.
You'll need a Firebase project with the Blaze plan enabled to access the Cloud Vision APIs.

Overview

We'll be going through these steps in this article:

Development environment.
Installing dependencies.
Setting up the Firebase project.
Setting up Cloud Vision API.
Building the UI.
Adding media picker.
Recognize Landmarks from Images.
Additional Configurations.
Recap.

You can take a look at the final code in this GitHub Repository.

Development environment

IMPORTANT - We will not be using Expo in our project.

You can follow this documentation to set up the environment and create a new React app.

Ensure you're following the React Native CLI Quickstart, not the Expo CLI Quickstart.

Installing dependencies

You can install these packages in advance or while going through the article.

"@react-native-firebase/app": "^10.4.0",
"@react-native-firebase/ml": "^10.4.0",
"react": "16.13.1",
"react-native": "0.63.4",
"react-native-image-picker": "^3.1.3"

To install a dependency, run:

npm i --save <package-name>

After installing the packages, for iOS, go into your ios/ directory, and run:

pod install

IMPORTANT FOR ANDROID

As you add more native dependencies to your project, it may bump you over the 64k method limit on the Android build system. Once you reach this limit, you will start to see the following error while building your Android application.

Execution failed for task ':app:mergeDexDebug'.

Use this documentation to enable multidexing.
To learn more about multidex, view the official Android documentation.

Setting up the Firebase project

Head to the Firebase console and sign in to your account.

Create a new project.

Once you create a new project, you'll see the dashboard. Upgrade your project to the Blaze plan.

Now, click on the Android icon to add an android app to the Firebase project.

You will need the package name of the application to register application. You can find the package name in the AndroidManifest.xml file which is located in android/app/src/main/.

Once you enter the package name and proceed to the next step, you can download the google-services.json file. You should place this file in the android/app directory.

After adding the file, proceed to the next step. It will ask you to add some configurations to the build.gradle files.

First, add the google-services plugin as a dependency inside of your android/build.gradle file:

buildscript {
  dependencies {
    // ... other dependencies

    classpath 'com.google.gms:google-services:4.3.3'
  }
}

Then, execute the plugin by adding the following to your android/app/build.gradle file:

apply plugin: 'com.android.application'
apply plugin: 'com.google.gms.google-services'

You need to perform some additional steps to configure Firebase for iOS. Follow this documentation to set it up.

We should install the @react-native-firebase/app package in our app to complete the set up for Firebase.

npm install @react-native-firebase/app

Setting up Cloud Vision API

Head to Google Cloud Console and select the Google project you are working on. Go to the API & Services tab.

In the API & Service tab, navigate to the Libraries section.

Search for Cloud Vision API.

Once you open the API page, click on the Enable button.

Once you've enabled the API, you'll see the Cloud Vision API Overview page.

With this, you have successfully set up the Cloud Vision API for your Firebase project. This will enable us to use the ML Kit for landmark recognition.

Building the UI

We'll be writing all of our code in the App.js file.

Let's add two buttons to the screen to take a photo and pick an image.

import { StyleSheet, Text, ScrollView, View, TouchableOpacity } from 'react-native';

export default function App() {
  return (
    <ScrollView contentContainerStyle={styles.screen}>
      <Text style={styles.title}>Landmark Recognition</Text>
      <View>
        <TouchableOpacity style={styles.button}>
          <Text style={styles.buttonText}>Take Photo</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.button}>
          <Text style={styles.buttonText}>Pick a Photo</Text>
        </TouchableOpacity>
      </View>
    </ScrollView>
  );
}

Styles:

const styles = StyleSheet.create({
  screen: {
    flex: 1,
    alignItems: 'center',
  },
  title: {
    fontSize: 35,
    marginVertical: 40,
  },
  button: {
    backgroundColor: '#47477b',
    color: '#fff',
    justifyContent: 'center',
    alignItems: 'center',
    paddingVertical: 15,
    paddingHorizontal: 40,
    borderRadius: 50,
    marginTop: 20,
  },
  buttonText: {
    color: '#fff',
  },
});

Adding media picker

Let's install the react-native-image-picker to add these functionalities.

npm install react-native-image-picker

The minimum target SDK for the React Native Image Picker is 21. If your project targets an SDK below 21, bump up the minSDK target in android/build.gradle.

After the package is installed, import the launchCamera and launchImageLibrary functions from the package.

import { launchCamera, launchImageLibrary } from 'react-native-image-picker';

Both functions accept two arguments. The first argument is options for the camera or the gallery, and the second argument is a callback function. This callback function is called when the user picks an image or cancels the operation.

Check out the API Reference for more details about these functions.

Now let's add 2 functions, one for each button.

const onTakePhoto = () => launchCamera({ mediaType: 'image' }, onImageSelect);

const onSelectImagePress = () => launchImageLibrary({ mediaType: 'image' }, onImageSelect);

Let's create a function called onImageSelect. This is the callback function that we are passing to the launchCamera and the launchImageLibrary functions. We will get the details of the image that the user picked in this callback function.

We should start the landmark recognition only when the user did not cancel the media picker. If the user canceled the operation, the picker will send a didCancel property in the response object.

const onImageSelect = async (media) => {
  if (!media.didCancel) {
    // Landmark Recognition Process
  }
};

You can learn more about the response object we get from the launchCamera and the launchImageLibrary functions here.

Now, pass these functions to the onPress prop of the TouchableOpacity for the respective buttons.

<View>
  <TouchableOpacity style={styles.button} onPress={onTakePhoto}>
    <Text style={styles.buttonText}>Take Photo</Text>
  </TouchableOpacity>
  <TouchableOpacity style={styles.button} onPress={onSelectImagePress}>
    <Text style={styles.buttonText}>Pick a Photo</Text>
  </TouchableOpacity>
<View>

Let's create a state to display the selected image on the UI.

import { useState } from 'react';

const [image, setImage] = useState();

Now, let's add an Image component below the buttons to display the selected image.

<View>
  <TouchableOpacity style={styles.button} onPress={onTakePhoto}>
    <Text style={styles.buttonText}>Take Photo</Text>
  </TouchableOpacity>
  <TouchableOpacity style={styles.button} onPress={onSelectImagePress}>
    <Text style={styles.buttonText}>Pick a Photo</Text>
  </TouchableOpacity>
  <Image source={{ uri: image }} style={styles.image} />
</View>

Styles for the Image:

image: {
  height: 300,
  width: 300,
  marginTop: 20,
  borderRadius: 10,
},

If the user did not cancel the operation, we will set the image state with the URI of the selected image in the onImageSelect function.

const onImageSelect = async (media) => {
  if (!media.didCancel) {
    setImage(media.uri);
  }
};

Recognize Landmarks from Images

Let's install the package for Firebase ML.

npm install @react-native-firebase/ml

Once the package is installed, let's import the package.

import ml from '@react-native-firebase/ml';

We should use the cloudLandmarkRecognizerProcessImage method in the ml package to process the image and get the landmarks in the image.

We will pass the URI of the selected image to this function.

const landmarks = await ml().cloudLandmarkRecognizerProcessImage(media.uri);

The function will process the image and return the list of landmarks that are identified in the image along with:

The 4-point coordinates of the landmarks on the image.
Latitude & Longitude of the landmarks.
The confidence the Machine Learning service has in its results.
An entity ID for use on Google's Knowledge Graph Search API.

Let's set up a state to store the results and render them in the UI. Since the result will be an array of landmarks, let's set the initial state to an empty array.

const [landmarks, setLandmarks] = useState([]);

Let's set the state to the response of the cloudLandmarkRecognizerProcessImage function.

const onImageSelect = async (media) => {
  if (!media.didCancel) {
    setImage(media.uri);
    const landmarks = await ml().cloudLandmarkRecognizerProcessImage(
      media.uri,
    );
    setLandmarks(landmarks);
  }
};

We'll use this state to render the details in the UI.

{landmarks.map((item, i) => (
  <View style={{ marginTop: 20, width: 300 }} key={i}>
    <Text>LandMark: {item.landmark}</Text>
    <Text>BoundingBox: {JSON.stringify(item.boundingBox)}</Text>
    <Text>Coordinates: {JSON.stringify(item.locations)}</Text>
    <Text>Confidence: {item.confidence}</Text>
    <Text>Confidence: {item.entityId}</Text>
  </View>
))}

Additional Configurations

The cloudLandmarkRecognizerProcessImage method accepts an optional configuration object.

maxResults: Sets the maximum number of results of this type.
modelType: Sets model type for the detection. By default, the function will use the STABLE_MODEL. However, if you feel that the results are not up-to-date, you can optionally use the LATEST_MODEL.
apiKeyOverride: API key to use for ML API. If not set, the default API key from firebase.app() will be used.
enforceCertFingerprintMatch: Only allow registered application instances with matching certificate fingerprints to use ML API.

Example:

import ml, { MLCloudLandmarkRecognizerModelType } from '@react-native-firebase/ml';

await ml().cloudImageLabelerProcessImage(imagePath, {
  maxResults: 2, // undefined | number
  modelType: MLCloudLandmarkRecognizerModelType.LATEST_MODEL, // LATEST_MODEL | STABLE_MODEL
  apiKeyOverride: "<-- API KEY -->",  // undefined | string,
  enforceCertFingerprintMatch: true, // undefined | false | true,
});

Let's Recap

We set up our development environment and created a React Native app.
We created a Firebase project.
We set up the Cloud Vision API to use the Landmark Recognizer in the Firebase ML Kit.
We built a simple UI for the app.
We added the react-native-image-picker package to pick images using the gallery or capture images using the camera.
We installed the Firebase ML package.
We used the cloudLandmarkRecognizerProcessImage function in the ml package to recognize the landmarks in the images.
We displayed the results in the UI.
We learned about the additional configurations that we can pass to the cloudLandmarkRecognizerProcessImage function.

Congratulations, 🥳 You did it.

Thanks for Reading!

Image Labelling using Firebase ML in React Native

Mohan Raj — Wed, 27 Jan 2021 06:51:07 +0000

Image labeling gives you insight into the content of images. In this tutorial, we will be building a Non-Expo React Native application to label the image provided using the machine learning kit from Firebase.

Firebase

Firebase's ML kit is a mobile SDK that brings Google's machine learning expertise to Android and iOS apps. There's no need to have a deep knowledge of neural networks or model optimization to get started with the ML kit.

On the other hand, if you are an experienced ML developer, it also provides APIs that help you use custom TensorFlow Lite models in your mobile apps.

Prerequisites

To proceed with this tutorial:

You will need a basic knowledge of React & React Native.
You will need a Firebase project with the Blaze plan enabled to access the Cloud Vision APIs.

Overview

We'll be going through these steps in this article:

Development environment.
Installing dependencies.
Setting up the Firebase project.
Setting up Cloud Vision API.
Building the UI.
Adding media picker.
Labeling the image using Firebase ML.
Additional configurations.
Recap.

You can take a look at the final code in this GitHub Repository.

Development environment

IMPORTANT - We will not be using Expo in our project.

You can follow this documentation to set up the environment and create a new React app.

Make sure you're following the React Native CLI Quickstart, not the Expo CLI Quickstart.

Installing dependencies

You can install these packages in advance or while going through the article.

"@react-native-firebase/app": "^10.4.0",
"@react-native-firebase/ml": "^10.4.0",
"react": "16.13.1",
"react-native": "0.63.4",
"react-native-image-picker": "^3.1.3"

To install a dependency, run:

npm i --save <package-name>

After installing the packages, for iOS, go into your ios/ directory, and run:

pod install

IMPORTANT FOR ANDROID

As you add more native dependencies to your project, it may bump you over the 64k method limit on the Android build system. Once you reach this limit, you will start to see the following error while attempting to build your Android application.

Execution failed for task ':app:mergeDexDebug'.

Use this documentation to enable multidexing.
To learn more about multidex, view the official Android documentation.

Setting up the Firebase project

Head to the Firebase console and sign in to your account.

Create a new project.

Once you create a new project, you'll see the dashboard. Upgrade you project to the Blaze plan.

Now, click on the Android icon to add an Android app to the Firebase project.

You will need the package name of the application to register application. You can find the package name in the AndroidManifest.xml that is located in android/app/src/main/.

Once you enter the package name and proceed to the next step, you can download the google-services.json file. You should place this file in the android/app directory.

After adding the file, proceed to the next step. It will ask you to add some configurations to the build.gradle files.

First, add the google-services plugin as a dependency inside of your android/build.gradle file:

buildscript {
  dependencies {
    // ... other dependencies

    classpath 'com.google.gms:google-services:4.3.3'
  }
}

Then, execute the plugin by adding the following to your android/app/build.gradle file:

apply plugin: 'com.android.application'
apply plugin: 'com.google.gms.google-services'

You need to perform some additional steps to configure Firebase for iOS. Follow this documentation to set it up.

We should install the @react-native-firebase/app package in our app to complete the set up for Firebase.

npm install @react-native-firebase/app

Setting up Cloud Vision API

The Cloud Vision API allows developers to integrate vision detection features within applications like face and landmark detection, image labeling, optical character recognition (OCR), and tagging of explicit content.

The ML Kit uses the Cloud Vision API to label the images.

Head to Google Cloud Console and select the Google project that you are working on. Go to the API & Services tab.

In the API & Service tab, head to the Libraries section.

Search for Cloud Vision API.

Once you open the API page, click on the Enable button.

Once you've enabled the API, you'll see the Cloud Vision API Overview page.

With this, you have set up the Cloud Vision API for your Firebase project. This will enable us to use the ML Kit for labeling the images.

Building the UI

We'll be writing all of our code in the App.js file.

Let's start by adding 2 buttons to the screen to take a photo and pick a photo.

import { StyleSheet, Text, ScrollView, View, TouchableOpacity } from 'react-native';

export default function App() {
  return (
    <ScrollView contentContainerStyle={styles.screen}>
      <Text style={styles.title}>Image Labeling</Text>
      <View>
        <TouchableOpacity style={styles.button}>
          <Text style={styles.buttonText}>Take Photo</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.button}>
          <Text style={styles.buttonText}>Pick a Photo</Text>
        </TouchableOpacity>
      </View>
    </ScrollView>
  );
}

Styles:

const styles = StyleSheet.create({
  screen: {
    flex: 1,
    alignItems: 'center',
  },
  title: {
    fontSize: 35,
    marginVertical: 40,
  },
  button: {
    backgroundColor: '#47477b',
    color: '#fff',
    justifyContent: 'center',
    alignItems: 'center',
    paddingVertical: 15,
    paddingHorizontal: 40,
    borderRadius: 50,
    marginTop: 20,
  },
  buttonText: {
    color: '#fff',
  },
});

Adding media picker

Let's install the react-native-image-picker to add these functionalities.

npm install react-native-image-picker

The minimum target SDK for the React Native Image Picker is 21. If your project targets an SDK below 21, bump up the minSDK target in android/build.gradle.

After the package is installed, import the launchCamera and launchImageLibrary functions from the package.

import { launchCamera, launchImageLibrary } from 'react-native-image-picker';

Both functions accept 2 arguments. The first argument is the options for the camera or the gallery, and the second argument is a callback function. This callback function is called when the user picks an image or cancels the operation.

Check out the API Reference for more details about these functions.

Now let's add 2 functions, one for each button.

const onTakePhoto = () => launchCamera({ mediaType: 'image' }, onImageSelect);

const onSelectImagePress = () => launchImageLibrary({ mediaType: 'image' }, onImageSelect);

We should only start the image labeling when the user doesn't cancel the media picker. If the user cancels the operation, the picker will send a didCancel property in the response object.

const onImageSelect = async (media) => {
  if (!media.didCancel) {
    // Image Labeling Process
  }
};

You can learn more about the response object that we get from the launchCamera and the launchImageLibrary functions here.

Now, pass these functions to the onPress prop of the TouchableOpacity for the respective buttons.

<View>
  <TouchableOpacity style={styles.button} onPress={onTakePhoto}>
    <Text style={styles.buttonText}>Take Photo</Text>
  </TouchableOpacity>
  <TouchableOpacity style={styles.button} onPress={onSelectImagePress}>
    <Text style={styles.buttonText}>Pick a Photo</Text>
  </TouchableOpacity>
<View>

Let's create a state to display the selected image on the UI.

import { useState } from 'react';

const [image, setImage] = useState();

Now, let's add an Image component below the buttons to display the selected image.

<View>
  <TouchableOpacity style={styles.button} onPress={onTakePhoto}>
    <Text style={styles.buttonText}>Take Photo</Text>
  </TouchableOpacity>
  <TouchableOpacity style={styles.button} onPress={onSelectImagePress}>
    <Text style={styles.buttonText}>Pick a Photo</Text>
  </TouchableOpacity>
  <Image source={{ uri: image }} style={styles.image} />
</View>

Styles for the Image:

image: {
  height: 300,
  width: 300,
  marginTop: 20,
  borderRadius: 10,
},

If the user did not cancel the operation, we should set the image state with the URI of the selected image using the onImageSelect function.

const onImageSelect = async (media) => {
  if (!media.didCancel) {
    setImage(media.uri);
  }
};

Label the image using Firebase ML

Let's install the package for Firebase ML.

npm install @react-native-firebase/ml

Once the package is installed, let's import the package.

import ml from '@react-native-firebase/ml';

We should use the cloudImageLabelerProcessImage method in the ml package to process the image and label the image.

We will pass the URI of the selected image to this function.

const labels = await ml().cloudImageLabelerProcessImage(media.uri);

The function will process the image and return the list of labels along with the confidence the Machine Learning service has in that label.

Let's set up a state to store the results and render them in the UI. Since the result will be an array of labels, let's set the initial state to an empty array.

const [labels, setLabels] = useState([]);

Let's set the state to the response of the cloudImageLabelerProcessImage function.

const onImageSelect = async (media) => {
  if (!media.didCancel) {
    setImage(media.uri);
    const label = await ml().cloudImageLabelerProcessImage(media.uri);
    setLabels(label);
  }
};

We'll use this state to render the details in the UI.

{labels.map((item, i) => (
  <View style={{ marginTop: 20, width: 300 }} key={i}>
    <Text>Label: {item.text}</Text>
    <Text>Confidence: {item.confidence}</Text>
  </View>
))}

Additional configurations

The cloudImageLabelerProcessImage method accepts an optional configuration object.

confidenceThreshold: Sets confidence threshold in the range of [0.0 - 1.0] of detected labels. Only labels detected with confidence higher than this threshold are returned.
apiKeyOverride: This is the API key to use for the ML API. If not set, the default API key from firebase.app() will be used.
enforceCertFingerprintMatch: Only allow registered application instances with matching certificate fingerprints to use ML API.

Example:

await ml().cloudImageLabelerProcessImage(imagePath, {
  confidenceThreshold: 0.8, // undefined | number
  apiKeyOverride: "<-- API KEY -->",  undefined | string,
  enforceCertFingerprintMatch: true, // undefined | false | true,
});

Let's Recap

We set up our development environment and created a React Native app.
We created a Firebase project.
We set up the Cloud Vision API to use the image labeler in the Firebase ML Kit.
We built a simple UI for the app.
We added the react-native-image-picker package to pick images using the gallery or capture images using the camera.
We installed the Firebase ML package.
We used the cloudImageLabelerProcessImage method in the ml package to label the image.
We displayed the results in the UI.
We learned about additional configurations that we can pass to the cloudImageLabelerProcessImage function.

Congratulations, 🥳 You did it.

Thanks for Reading!

React Native Firebase Storage

Mohan Raj — Fri, 22 Jan 2021 18:40:08 +0000

In this tutorial, we will be building a Non-Expo React Native application to upload images and videos to Firebase cloud storage.

Firebase

Firebase is a platform developed by Google used to create mobile and web applications. It was originally an independent company founded in 2011.

In 2014, Google acquired the platform and it is now their flagship offering for app development. Cloud Storage for Firebase is a powerful and cost-effective storage service. The Cloud Storage SDK supports file uploads and downloads for your apps. You can use the cloud storage SDK to store images, audio, video, or other user-generated content.

Prerequisites

The fundamentals of React and React Native will not be covered in this tutorial. If you are not comfortable with the fundamentals, this is a helpful tutorial that you can go through before beginning with this project.

Overview

We'll be going through these steps in this article:

Development environment.
Setting up the Firebase project.
Setting up Firebase storage.
Installing dependencies.
Building the UI.
Adding media picker.
Uploading media.
Adding upload progress.
Adding pause/resume upload.
Get the download URL.
Recap.

You can take a look at the final code in this GitHub Repository.

Development environment

IMPORTANT - We will not be using Expo in our project.

You can follow this documentation to set up the environment and create a new React app.

Make sure you're following the React Native CLI Quickstart, not the Expo CLI Quickstart.

Installing dependencies

You can install these in advance or while going through the article.

"@react-native-firebase/app": "^10.4.0",
"@react-native-firebase/storage": "^10.4.0",
"react": "16.13.1",
"react-native": "0.63.4",
"react-native-image-picker": "^3.1.3",

To install a dependency, run:

npm i --save <package-name>

After installing the packages, for iOS, go into your ios/ directory, and run:

pod install

IMPORTANT FOR ANDROID

As you add more native dependencies to your project, it may bump you over the 64k method limit on the Android build system. Once you reach this limit, you will start to see the following error while attempting to build your Android application.

Execution failed for task ':app:mergeDexDebug'.

Use this documentation to enable multidexing.
To learn more about multidex, view the official Android documentation.

Setting up the Firebase project

Head to the Firebase console and sign in to your account.

Create a new project.

Once you create a new project, you'll see the dashboard.

Now, click on the Android icon to add an Android app to the Firebase project.

You will need the package name of the application to register the application. You can find the package name in the AndroidManifest.xml that is located in android/app/src/main/.

Once you enter the package name and proceed to the next step, you can download the google-services.json file. You should place this file in the android/app directory.

This file contains configurations that'll enable your application to access firebase services.

After adding the file, proceed to the next step. It will ask you to add some configurations to the build.gradle files.

First, add the google-services plugin as a dependency inside of your android/build.gradle file:

buildscript {
  dependencies {
    // ... other dependencies

    classpath 'com.google.gms:google-services:4.3.3'
  }
}

Then, execute the plugin by adding the following to your android/app/build.gradle file:

apply plugin: 'com.android.application'
apply plugin: 'com.google.gms.google-services'

You need to perform some additional steps to configure Firebase for iOS. Follow this documentation to set it up.

Finally, we should install the @react-native-firebase/app package in our app to complete the set up for Firebase.

npm install @react-native-firebase/app

Setting up Firebase storage

Head over to the Storage section in the dashboard and click on the Get Started button.

A modal will pop up with information about the storage rules. By default, only authenticated users can read and write from the cloud storage. Since we are not going to cover authentication in this tutorial, we will change the rules and set the cloud storage to open.

Do not set your cloud storage as open in a production application. This will allow anyone to read and write to your cloud storage, compromising all the data in your cloud storage.

On the next step, it will ask you for the storage bucket location.

Once this is done, you'll see this screen. You can upload files and delete files manually from this screen.

Now, let's edit the cloud storage rules and set the cloud storage bucket as open. Switch to the Rules tab.

Now, replace the existing rules with this.

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if true;
    }
  }
}

If you'd like to learn more about cloud storage rules, refer here.

Building the UI

In the App.js, let's add 4 buttons to the screen.

Take a Photo.
Record Video.
Pick a Photo.
Pick a Video.

import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';

export default function App() {
  return (
    <View style={styles.screen}>
      <Text style={styles.title}>Firebase Storage</Text>
      <View>
        <TouchableOpacity style={styles.button}>
          <Text style={styles.buttonText}>Take Photo</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.button}>
          <Text style={styles.buttonText}>Record Video</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.button}>
          <Text style={styles.buttonText}>Pick a Photo</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.button}>
          <Text style={styles.buttonText}>Pick a Video</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
}

Styles:

const styles = StyleSheet.create({
  screen: {
    flex: 1,
    alignItems: 'center',
  },
  title: {
    fontSize: 35,
    marginVertical: 40,
  },
  button: {
    backgroundColor: '#47477b',
    color: '#fff',
    justifyContent: 'center',
    alignItems: 'center',
    paddingVertical: 15,
    paddingHorizontal: 40,
    borderRadius: 50,
    marginTop: 20,
  },
  buttonText: {
    color: '#fff',
  },
});

Adding media picker

Now, the first 2 buttons should open the camera to take a photo and record a video respectively, and the next 2 buttons should open the gallery to pick an image and video respectively.

Let's install the react-native-image-picker to add these functionalities.

npm install react-native-image-picker

The minimum target SDK for the React Native Image Picker is 21. If your project targets an SDK below 21, bump up the minSDK target in android/build.gradle.

After the package is installed, import the launchCamera and launchImageLibrary functions from the package.

import { launchCamera, launchImageLibrary } from 'react-native-image-picker';

Both functions accept 2 arguments. The first argument is options for the camera or the gallery, and the second argument is a callback function. This callback function is called when the user picks a media or cancels the operation.

Check out the API Reference for more details about these functions.

Now let's add 4 functions, one for each button.

const onTakePhoto = () => launchCamera({ mediaType: 'image' }, onMediaSelect);

const onTakeVideo = () => launchCamera({ mediaType: 'video' }, onMediaSelect);

const onSelectImagePress = () =>
  launchImageLibrary({ mediaType: 'image' }, onMediaSelect);

const onSelectVideoPress = () =>
  launchImageLibrary({ mediaType: 'video' }, onMediaSelect);

Let's create a function called onMediaSelect. This is the callback function that we passed to the launchCamera and the launchImageLibrary functions. We will get the details of the media that the user picked in this callback function. We'll use that to upload the media to the cloud storage.

We should start the upload process only when the user did not cancel the media picker. If the user cancelled the operation, the picker will send a didCancel property in the response object.

const onMediaSelect = async (media) => {
  if (!media.didCancel) {
    // Upload Process
  }
};

You can learn more about the response object that we get from the launchCamera and the launchImageLibrary functions here.

Now, pass the 4 functions to the onPress prop of the TouchableOpacity for the respective buttons.

For example:

<TouchableOpacity style={styles.button} onPress={onTakePhoto}>
  <Text style={styles.buttonText}>Take Photo</Text>
</TouchableOpacity>

Uploading media

Let's install the package for Firebase storage.

npm install @react-native-firebase/storage

Once the package is installed, let's import the package.

import storage from '@react-native-firebase/storage';

To upload a file to the cloud storage, we should create a reference object.

A reference is a pointer to a file in your bucket. This file can either exist already, or it may not exist yet.

We need to use the ref method to create a reference.

const reference = storage().ref('<filename>');

You can also specify a file located in a nested directory:

const reference = storage().ref('/directory1/directory2/filename.png');

Now, we should use the putFile method in the reference object to upload the image from the user's device to the cloud storage. The putFile method accepts a path to the file on the user's device.

The callback function that we passed to launchCamera and the launchImageLibrary functions will get the URI of the image in the response object. We need to pass the URI to the putFile method.

const onMediaSelect = async (media) => {
  if (!media.didCancel) {
    const reference = storage().ref(media.fileName);
    const task = reference.putFile(media.uri);
  }
};

Once the media has been uploaded, you can take a look at it in the Firebase console.

We don't have any visual feedback while the media is uploading. Let's add that in the next step.

Adding upload progress

The state of the Task object that is returned from the putFile method will keep changing while the file is getting uploaded. We can add an event handler to handle this state change.

task.on('state_changed', (taskSnapshot) => {
  // Handle Event Here
});

The callback function that we pass will receive a TaskSnapshot object. It'll contain the number of bytes transferred and the total number of bytes of the file.

We can use this information to display the upload progress.

Let's create 2 states in the application: One to maintain whether the file is getting uploaded and the other for the TaskSnapshot object.

const [uploading, setUploading] = useState(false);
const [uploadTaskSnapshot, setUploadTaskSnapshot] = useState({});

Let's set the uploading state to true when the onMediaSelect is called.

const onMediaSelect = async (media) => {
  if (!media.didCancel) {
    setUploading(true);
    const reference = storage().ref(media.fileName);

Now, we need to set the TaskSnapshot object on the state_changed event handler.

task.on('state_changed', (taskSnapshot) => {
  setUploadTaskSnapshot(taskSnapshot);
});

Let's display the progress in the UI using these states along with an activity indicator and a status text. This should be displayed only when a file is being uploaded.

import { ActivityIndicator } from 'react-native';

{uploading && (
  <View style={styles.uploading}>
    <ActivityIndicator size={60} color="#47477b"></ActivityIndicator>
    <Text style={styles.statusText}>Uploading</Text>
    <Text style={styles.statusText}>
      {`${((uploadTaskSnapshot.bytesTransferred / uploadTaskSnapshot.totalBytes) * 100).toFixed(2)}% / 100%`}
    </Text>
  </View>
)}

Styles:

center: {
  flex: 1,
  width: '100%',
  justifyContent: 'center',
  alignItems: 'center',
  paddingHorizontal: 50,
},
uploading: {
  marginTop: 80,
  justifyContent: 'center',
  alignItems: 'center',
},
statusText: {
  marginTop: 20,
  fontSize: 20,
},

Adding pause/resume upload

Let's add a state to maintain whether the upload is paused or not. This will be a boolean state.

const [paused, setPaused] = useState(false);

Let's add a button to Pause/Resume the upload when a file is being uploaded.

{uploading && (
  <View style={styles.uploading}>
    <ActivityIndicator size={60} color="#47477b"></ActivityIndicator>
    <Text style={styles.statusText}>Uploading</Text>
    <Text style={styles.statusText}>
      {`${((uploadTaskSnapshot.bytesTransferred / uploadTaskSnapshot.totalBytes) * 100).toFixed(2)}% / 100%`}
    </Text>
    <TouchableOpacity style={styles.button}>
      <Text style={styles.buttonText}>{paused ? 'Resume' : 'Pause'}</Text>
    </TouchableOpacity>
  </View>
)}

To pause/resume the upload, we need to use the Task object. It has 2 methods: pause and resume. Since the task object is inside the onMediaSelect function, let's set up a state outside and assign the Task object to that state when it's created.

const [uploadTask, setUploadTask] = useState();

const onMediaSelect = async (media) => {
  if (!media.didCancel) {
    setUploading(true);
    const reference = storage().ref(media.fileName);
    const task = reference.putFile(media.uri);
    setUploadTask(task);

Now, we can write a function to toggle between pause and resume.

const togglePause = () => {
  if (paused) uploadTask.resume();
  else uploadTask.pause();
  setPaused((paused) => !paused);
};

Pass this function to the onPress pass of the pause button.

<TouchableOpacity style={styles.button} onPress={togglePause}>
  <Text style={styles.buttonText}>{paused ? 'Resume' : 'Pause'}</Text>
</TouchableOpacity>

Let's update the status text to paused and hide the activity indicator if the upload is paused.

{!paused && <ActivityIndicator size={60} color="#47477b"></ActivityIndicator>}
<Text style={styles.statusText}>
  {paused ? 'Paused' : 'Uploading'}
</Text>

Get the download URL

The putFile method returns a Task object.

We can add a .then() to it that will get called when the upload is completed. If not, the .catch() will be called.

const onMediaSelect = async (media) => {
  const reference = storage().ref(media.fileName);
  const task = reference.putFile(media.uri);
  task.then(async () => {
    // Get Download URL Here
  });
};

We can get the download URL using the reference to the storage location.

task.then(async () => {
  const downloadURL = await reference.getDownloadURL();
});

Let's create a button that will open the link in your phone's browser.

To do so, let's create a state to store the download URL and access it outside this function.

const [downloadURL, setDownloadURL] = useState();

Let's set the URL once we get it.

task.then(async () => {
  const downloadURL = reference.getDownloadURL();
  setDownloadURL(downloadURL);
});

Now, let's create a button in the UI. This button will only be displayed when a download URL is available.

{downloadURL && (
  <TouchableOpacity
    style={[styles.button, style.mediaButton]}>
    <Text style={styles.buttonText}>View Media</Text>
  </TouchableOpacity>
)}

Styles:

mediaButton: {
  position: 'absolute',
  bottom: 0,
  marginBottom: 50,
  width: 300,
},

We need to use the Linking module from react-native to open the link in the phone's browser. Let's import it.

import { Linking } from 'react-native';

To open the link, we should use the openURL method in the Linking module.

<TouchableOpacity
  style={[styles.button, styles.mediaButton]}
  onPress={() => Linking.openURL(downloadURL)}>
  <Text style={styles.buttonText}>View Media</Text>
</TouchableOpacity>

Now, the button should open the media that we uploaded on the phone's browser.

Let's Recap

We set up our development environment and created a React Native app.
We created a Firebase project.
We set up cloud storage for our Firebase project.
We updated the cloud storage rules to be open for everyone. Keep in mind that you should never keep it open in a production environment.
We built a simple UI for the app.
We added the react-native-image-picker package to pick images/videos using the gallery and capture images/video using the camera.
We installed the Firebase cloud storage package.
We created a cloud storage reference using the ref function.
We uploaded our file to the location which was being pointed by the reference we created.
We added an event handler for the state_changed event during upload and used the TaskSnapshot object to get the upload progress.
We added a button to pause/resume the upload.
We got the download URL from the reference and added a button to open it in the phone's browser.

Congratulations, 🥳 You did it.

Thanks for Reading!

Text Recognition using Firebase ML in React Native

Mohan Raj — Thu, 21 Jan 2021 04:48:04 +0000

Firebase ML Kit's text recognition APIs can recognize text in any Latin-based character set. They can also be used to automate data-entry tasks such as processing credit cards, receipts, and business cards. In this tutorial, we will be building a Non-Expo React Native application to recognize text from an image using Firebase's ML kit.

Cloud Vision APIs allow developers to easily integrate vision detection features within applications, including image labeling, face, and landmark detection, optical character recognition (OCR), and tagging of explicit content. Cloud Vision Docs.

Firebase

Prerequisites

To proceed with this tutorial:

You will need a basic understanding of React & React Native.
You will need a Firebase project with the Blaze plan enabled to access the Cloud Vision APIs.

Overview

We'll be going through these steps in this article:

Development environment.
Installing dependencies.
Setting up the Firebase project.
Setting up Cloud Vision API.
Building the UI.
Adding media picker.
Recognize text from the Image.
Additional configurations.
Recap.

You can take a look at the final code in this GitHub Repository.

Development environment

IMPORTANT - We will not be using Expo in our project.

You can follow this documentation to set up the environment and create a new React app.

Make sure you're following the React Native CLI Quickstart, not the Expo CLI Quickstart.

Installing dependencies

You can install these packages in advance or while going through the article.

"@react-native-firebase/app": "^10.4.0",
"@react-native-firebase/ml": "^10.4.0",
"react": "16.13.1",
"react-native": "0.63.4",
"react-native-image-picker": "^3.1.3"

To install a dependency, run:

npm i --save <package-name>

After installing the packages, for iOS, go into your ios/ directory, and run:

pod install

IMPORTANT FOR ANDROID

As you add more native dependencies to your project, it may bump you over the 64K method limit on the Android build system. Once you reach this limit, you will start to see the following error while attempting to build your Android application.

Execution failed for task ':app:mergeDexDebug'.

Use this documentation to enable multidexing.
To learn more about multidex, view the official Android documentation.

Setting up the Firebase project

Head to the Firebase console and sign in to your account.

Create a new project.

Once you create a new project, you'll see the dashboard. Upgrade your project to the Blaze plan.

Now, click on the Android icon to add an Android app to the Firebase project.

You will need the package name of the application to register the application. You can find the package name in the AndroidManifest.xml which is located in android/app/src/main/.

Once you enter the package name and proceed to the next step, you can download the google-services.json file. You should place this file in the android/app directory.

After adding the file, proceed to the next step. It will ask you to add some configurations to the build.gradle files.

First, add the google-services plugin as a dependency inside of your android/build.gradle file:

buildscript {
  dependencies {
    // ... other dependencies

    classpath 'com.google.gms:google-services:4.3.3'
  }
}

Then, execute the plugin by adding the following to your android/app/build.gradle file:

apply plugin: 'com.android.application'
apply plugin: 'com.google.gms.google-services'

You need to perform some additional steps to configure Firebase for iOS. Follow this documentation to set it up.

We should install the @react-native-firebase/app package in our app to complete the set up for Firebase.

npm install @react-native-firebase/app

Setting up Cloud Vision API

Head to Google Cloud Console and select the Google project that you are working on. Go to the API & Services tab.

In the API & Service tab, head to the Libraries section.

Search for Cloud Vision API.

Once you open the API page, click on the Enable button.

Once you've enabled the API, you'll see the Cloud Vision API Overview page.

With this, you have set up the Cloud Vision API for your Firebase project. This will enable us to use the ML Kit to recognize text from images.

Building the UI

We'll be writing all of our code in the App.js file.

Let's add 2 buttons to the screen to take a photo and pick a photo.

import { StyleSheet, Text, ScrollView, View, TouchableOpacity } from 'react-native';

export default function App() {
  return (
    <ScrollView contentContainerStyle={styles.screen}>
      <Text style={styles.title}>Text Recognition</Text>
      <View>
        <TouchableOpacity style={styles.button}>
          <Text style={styles.buttonText}>Take Photo</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.button}>
          <Text style={styles.buttonText}>Pick a Photo</Text>
        </TouchableOpacity>
      </View>
    </ScrollView>
  );
}

Styles:

const styles = StyleSheet.create({
  screen: {
    flex: 1,
    alignItems: 'center',
  },
  title: {
    fontSize: 35,
    marginVertical: 40,
  },
  button: {
    backgroundColor: '#47477b',
    color: '#fff',
    justifyContent: 'center',
    alignItems: 'center',
    paddingVertical: 15,
    paddingHorizontal: 40,
    borderRadius: 50,
    marginTop: 20,
  },
  buttonText: {
    color: '#fff',
  },
});

Adding media picker

Let's install the react-native-image-picker to add these functionalities.

npm install react-native-image-picker

The minimum target SDK for the React Native Image Picker is 21. If your project targets an SDK below 21, bump up the minSDK target in android/build.gradle.

After the package is installed, import the launchCamera and launchImageLibrary functions from the package.

import { launchCamera, launchImageLibrary } from 'react-native-image-picker';

Check out this API reference for more details about these functions.

Now let's add 2 functions, one for each button.

const onTakePhoto = () => launchCamera({ mediaType: 'image' }, onImageSelect);

const onSelectImagePress = () => launchImageLibrary({ mediaType: 'image' }, onImageSelect);

We should start the text recognition only when the user did not cancel the media picker. If the user canceled the operation, the picker will send a didCancel property in the response object.

const onImageSelect = async (media) => {
  if (!media.didCancel) {
    // Text Recognition Process
  }
};

You can learn more about the response object that we get from the launchCamera and the launchImageLibrary functions here.

Now, pass these functions to the onPress prop of the TouchableOpacity for the respective buttons.

<View>
  <TouchableOpacity style={styles.button} onPress={onTakePhoto}>
    <Text style={styles.buttonText}>Take Photo</Text>
  </TouchableOpacity>
  <TouchableOpacity style={styles.button} onPress={onSelectImagePress}>
    <Text style={styles.buttonText}>Pick a Photo</Text>
  </TouchableOpacity>
<View>

Let's create a state to display the selected image on the UI.

import { useState } from 'react';

const [image, setImage] = useState();

Now, let's add an image component below the buttons to display the selected image.

<View>
  <TouchableOpacity style={styles.button} onPress={onTakePhoto}>
    <Text style={styles.buttonText}>Take Photo</Text>
  </TouchableOpacity>
  <TouchableOpacity style={styles.button} onPress={onSelectImagePress}>
    <Text style={styles.buttonText}>Pick a Photo</Text>
  </TouchableOpacity>
  <Image source={{uri: image}} style={styles.image} resizeMode="contain" />
</View>

Styles for the image:

image: {
  height: 300,
  width: 300,
  marginTop: 30,
  borderRadius: 10,
},

If the user did not cancel the operation, let's set the image state with the URI of the selected image in the onImageSelect function.

const onImageSelect = async (media) => {
  if (!media.didCancel) {
    setImage(media.uri);
  }
};

Recognize the text from the image

Let's install the package for Firebase ML.

npm install @react-native-firebase/ml

Once the package is installed, let's import the package.

import ml from '@react-native-firebase/ml';

We should use the cloudDocumentTextRecognizerProcessImage method in the ml package to process the image and recognize text from it.

We will pass the URI of the selected image to this function.

const processingResult = await ml().cloudDocumentTextRecognizerProcessImage(media.uri);

The function will process the image and return the text recognized in the image along with an array of blocks of recognized text.

Each block will contain details about:

The bounding rectangle of the detected block of text in the image.
The confidence the machine learning service has in the result.
A list of recognized languages in that block.
An array of paragaraphs recognized in the block of text.

To learn more about the result object, refer to the documentation.

Let's set up a state to store the result and render it in the UI.

const [result, setResult] = useState({});

Let's set the state to the response of the cloudDocumentTextRecognizerProcessImage function.

const onImageSelect = async (media) => {
  if (!media.didCancel) {
    setImage(media.uri);
    const processingResult = await ml().cloudDocumentTextRecognizerProcessImage(media.uri);
    console.log(processingResult);
    setResult(processingResult);
  }
};

We'll use this state to render the recognized text in the UI.

<View style={{marginTop: 30}}>
  <Text style={{fontSize: 30}}>{result.text}</Text>
</View>

Additional configurations

The cloudDocumentTextRecognizerProcessImage method accepts an optional configuration object.

languageHints: In most cases, not setting this yields the best results since it enables automatic language detection. For languages based on the Latin alphabet, setting language hints is not needed. In rare cases, when the language of the text in the image is known, setting a hint will help get better results (although it will be a significant hindrance if the hint is wrong).
apiKeyOverride: API key to use for the ML API. If not set, the default API key from firebase.app() will be used.
enforceCertFingerprintMatch: Only allow registered application instances with a matching certificate fingerprints to use ML API.

Example:

await ml().cloudDocumentTextRecognizerProcessImage(imagePath, {
  languageHints: ["en"], // string[]
  apiKeyOverride: "<-- API KEY -->",  // undefined | string,
  enforceCertFingerprintMatch: true, // undefined | false | true,
});

Let's Recap

We set up our development environment and created a React Native app.
We created a Firebase project.
We set up the Cloud Vision API to use the image text recognizer in the Firebase ML Kit.
We built a simple UI for the app with 2 buttons.
We added the react-native-image-picker package to pick images using the gallery or capture images using the camera.
We installed the Firebase ML package.
We used the cloudDocumentTextRecognizerProcessImage method in the ml package to recognize the text from the image.
We displayed the result in the UI.
We learned about the additional configurations that we can pass to the cloudDocumentTextRecognizerProcessImage function.

Congratulations, 🥳 You did it.

Thanks for Reading!

Text to Speech Using the Web Speech API in JavaScript

Mohan Raj — Mon, 18 Jan 2021 05:41:04 +0000

The Web Speech API is used to incorporate voice data into web apps. In this tutorial, we will build a simple webpage that uses the Web Speech API to implement text to speech. You can check the browser compatibility for the Web Speech API here.

Prerequisites

To follow along with this tutorial, you should have:

A basic understanding of HTML and JavaScript.
A code editor. I'll be using Visual Studio Code.
A browser to view the webpage, preferably Google Chrome or Mozilla Firefox.

Project directory

Create a new directory for the project and create two new files called index.html and textToSpeech.js.

project-directory/
|-index.html
|-textToSpeech.js

The HTML page

In the HTML file, let's set up:

An empty select menu. We will fill the empty select menu with the list of voices available using JavaScript.
Range sliders for volume, pitch, and rate.
A textarea to type in.
Control buttons for the speech.

I've used Bootstrap 5 to style the webpage. If you are new to Bootstrap, check out their documentation to get a better understanding.

<html lang="en">
  <head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="index.css" />
    <title>Text to Speech</title>
  </head>
  <body class="container mt-5 bg-dark">
    <h1 class="text-light">Text to Speech</h1>
    <p class="lead text-light mt-4">Select Voice</p>

    <!-- Select Menu for Voice -->
    <select id="voices" class="form-select bg-secondary text-light"></select>

    <!-- Range Slliders for Volume, Rate & Pitch -->
    <div class="d-flex mt-4 text-light">
      <div>
        <p class="lead">Volume</p>
        <input type="range" min="0" max="1" value="1" step="0.1" id="volume" />
        <span id="volume-label" class="ms-2">1</span>
      </div>
      <div class="mx-5">
        <p class="lead">Rate</p>
        <input type="range" min="0.1" max="10" value="1" id="rate" step="0.1" />
        <span id="rate-label" class="ms-2">1</span>
      </div>
      <div>
        <p class="lead">Pitch</p>
        <input type="range" min="0" max="2" value="1" step="0.1" id="pitch" />
        <span id="pitch-label" class="ms-2">1</span>
      </div>
    </div>

    <!-- Text Area  for the User to Type -->
    <textarea class="form-control bg-dark text-light mt-5" cols="30" rows="10" placeholder="Type here..."></textarea>

    <!-- Control Buttons -->
    <div class="mb-5">
      <button id="start" class="btn btn-success mt-5 me-3">Start</button>
      <button id="pause" class="btn btn-warning mt-5 me-3">Pause</button>
      <button id="resume" class="btn btn-info mt-5 me-3">Resume</button>
      <button id="cancel" class="btn btn-danger mt-5 me-3">Cancel</button>
    </div>
  </body>
  <script src="./textToSpeech.js"></script>
</html>

The JavaScript file

Let's create an instance of the SpeechSynthesisUtterance class. We'll configure this instance with various properties.

let speech = new SpeechSynthesisUtterance();

Properties

Now, let's configure some properties on this SpeechSynthesisUtterance instance.

There are six properties on the SpeechSynthesisUtterance instance that we can tweak.

They are:

Language:

The language property gets and sets the language of the utterance. If unset, the <html lang="en"> lang value will be used, or the user-agent default if the <html lang="en"> lang is unset.

It accepts a DOMString representing a BCP 47 language tag.

speech.lang = "en";

Text:

The text property gets and sets the text that will be synthesized when the utterance is spoken. The text can be provided as plain text. In our case, the text property must be set when the start button is clicked.

Let's add a click listener to the button. When the button is clicked, we should get the text value from the textarea and set it to this property.

You can learn more about event listeners here.

document.querySelector("#talk").addEventListener("click", () => {
  speech.text = document.querySelector("textarea").value;
});

Volume:

The volume property gets and sets the volume of the utterance. It is a float that represents the volume value, between 0 (lowest) and 1 (highest). The default value is 1 if this property is unset.

Let's add an onInput listener to the volume range slider and adjust the volume property when the value of the slider changes. We've already set the min, max, and default value of the slider in the HTML tag.

Let's also set the  that displays the value of the volume in the webpage next to the range slider.

document.querySelector("#rate").addEventListener("input", () => {
  // Get rate Value from the input
  const rate = document.querySelector("#rate").value;

  // Set rate property of the SpeechSynthesisUtterance instance
  speech.rate = rate;

  // Update the rate label
  document.querySelector("#rate-label").innerHTML = rate;
});

Rate:

The rate property gets and sets the rate of the utterance. It is a float representing the rate value which can range between 0.1 (lowest) and 10 (highest). The default value is 1 if this property is unset.

Let's add an onInput listener to the rate range slider and adjust the rate property when the value of the slider changes. We've already set the min, max, and default value of the slider in the HTML tag.

Let's also set the  that displays the value of the rate in the webpage next to the range slider.

document.querySelector("#volume").addEventListener("input", () => {
  // Get volume Value from the input
  const volume = document.querySelector("#volume").value;

  // Set volume property of the SpeechSynthesisUtterance instance
  speech.volume = volume;

  // Update the volume label
  document.querySelector("#volume-label").innerHTML = volume;
});

Pitch:

The pitch property gets and sets the pitch of the utterance. It is a float representing the pitch value that can range between 0 (lowest) and 2 (highest). The default pitch is 1 if this property is unset.

Let's add an onInput listener to the pitch range slider and adjust the pitch property when the value of the slider changes. We've already set the min, max, and default value of the slider in the HTML tag.

Let's also set the  that displays the value of the pitch in the webpage next to the range slider.

document.querySelector("#pitch").addEventListener("input", () => {
  // Get pitch Value from the input
  const pitch = document.querySelector("#pitch").value;

  // Set pitch property of the SpeechSynthesisUtterance instance
  speech.pitch = pitch;

  // Update the pitch label
  document.querySelector("#pitch-label").innerHTML = pitch;
});

Voice:

The voice property gets and sets the voice that will be used to speak the utterance. This should be set to one of the SpeechSynthesisVoice objects. If it is not set, the most suitable default voice available for the utterance's language setting will be used.

To set the voice of the utterance, we need to get the list of available voices in the window object. When the window object loads, the voices will not be available immediately. It's an async operation. An event will be triggered when the voices are loaded. We can set a function that should be executed when the voices are loaded.

window.speechSynthesis.onvoiceschanged = () => {
  // On Voices Loaded
};

We can get the list of voices using window.speechSynthesis.getVoices(). It'll return an array of SpeechSynthesisVoice objects that are available. Let's store the list in a global array and update the select menu on the web page with the list of available voices.

let voices = []; // global array

window.speechSynthesis.onvoiceschanged = () => {
  // Get List of Voices
  voices = window.speechSynthesis.getVoices();

  // Initially set the First Voice in the Array.
  speech.voice = voices[0];

  // Set the Voice Select List. (Set the Index as the value, which we'll use later when the user updates the Voice using the Select Menu.)
  let voiceSelect = document.querySelector("#voices");
  voices.forEach((voice, i) => (voiceSelect.options[i] = new Option(voice.name, i)));
};

Now that we have updated the voice menu, let's add an onChange event listener on it to update the SpeechSynthesisUtterance instance's voice. When a user updates the voice, we will use the index number (which is set as the value for each option) and the global array of voices to update the voice.

document.querySelector("#voices").addEventListener("change", () => {
  speech.voice = voices[document.querySelector("#voices").value];
});

Controls

Let's add controls to the SpeechSynthesis instance.

Start:

We should pass the SpeechSynthesisUtterance instance to the window.speechSynthesis.speak() method when the start button is clicked. This will start converting the text to speech. The text property must be set before calling this method.

NOTE: If you start another text to speech while an instance is already running, it'll get queued behind the one that is currently running.

document.querySelector("#talk").addEventListener("click", () => {
  speech.text = document.querySelector("textarea").value;
  window.speechSynthesis.speak(speech);
});

Pause:

We can pause the SpeechSynthesisUtterance instance that's running at the moment using window.speechSynthesis.pause(). Let's select the pause button and add a click event listener to it and pause the SpeechSynthesisUtterance instance when the button is clicked.

document.querySelector("#pause").addEventListener("click", () => {
  window.speechSynthesis.pause();
});

Resume:

We can resume the SpeechSynthesisUtterance instance that's paused at the moment using window.speechSynthesis.resume(). Let's select the resume button and add a click event listener to it and resume the SpeechSynthesisUtterance instance when the button is clicked.

document.querySelector("#resume").addEventListener("click", () => {
  window.speechSynthesis.resume();
});

Cancel:

We can cancel the SpeechSynthesisUtterance instance that's running at the moment using window.speechSynthesis.cancel(). Let's select the cancel button and add a click event listener to it and cancel the SpeechSynthesisUtterance instance when the button is clicked.

document.querySelector("#resume").addEventListener("click", () => {
  window.speechSynthesis.resume();
});

The final version of textToSpeech.js:

// Initialize new SpeechSynthesisUtterance object
let speech = new SpeechSynthesisUtterance();

// Set Speech Language
speech.lang = "en";

let voices = []; // global array of available voices

window.speechSynthesis.onvoiceschanged = () => {
  // Get List of Voices
  voices = window.speechSynthesis.getVoices();

  // Initially set the First Voice in the Array.
  speech.voice = voices[0];

  // Set the Voice Select List. (Set the Index as the value, which we'll use later when the user updates the Voice using the Select Menu.)
  let voiceSelect = document.querySelector("#voices");
  voices.forEach((voice, i) => (voiceSelect.options[i] = new Option(voice.name, i)));
};

document.querySelector("#rate").addEventListener("input", () => {
  // Get rate Value from the input
  const rate = document.querySelector("#rate").value;

  // Set rate property of the SpeechSynthesisUtterance instance
  speech.rate = rate;

  // Update the rate label
  document.querySelector("#rate-label").innerHTML = rate;
});

document.querySelector("#volume").addEventListener("input", () => {
  // Get volume Value from the input
  const volume = document.querySelector("#volume").value;

  // Set volume property of the SpeechSynthesisUtterance instance
  speech.volume = volume;

  // Update the volume label
  document.querySelector("#volume-label").innerHTML = volume;
});

document.querySelector("#pitch").addEventListener("input", () => {
  // Get pitch Value from the input
  const pitch = document.querySelector("#pitch").value;

  // Set pitch property of the SpeechSynthesisUtterance instance
  speech.pitch = pitch;

  // Update the pitch label
  document.querySelector("#pitch-label").innerHTML = pitch;
});

document.querySelector("#voices").addEventListener("change", () => {
  // On Voice change, use the value of the select menu (which is the index of the voice in the global voice array)
  speech.voice = voices[document.querySelector("#voices").value];
});

document.querySelector("#start").addEventListener("click", () => {
  // Set the text property with the value of the textarea
  speech.text = document.querySelector("textarea").value;

  // Start Speaking
  window.speechSynthesis.speak(speech);
});

document.querySelector("#pause").addEventListener("click", () => {
  // Pause the speechSynthesis instance
  window.speechSynthesis.pause();
});

document.querySelector("#resume").addEventListener("click", () => {
  // Resume the paused speechSynthesis instance
  window.speechSynthesis.resume();
});

document.querySelector("#cancel").addEventListener("click", () => {
  // Cancel the speechSynthesis instance
  window.speechSynthesis.cancel();
});

Result

You can take a look at the project that's been deployed using GitHub Pages here.

You can also check out the final code in this GitHub Repository.

Let's recap

We created an HTML page with a select menu for the voices, a text area, and control buttons.
We created a new JavaScript file and linked it to the HTML file.
We created a new SpeechSynthesisUtterance object.
We tweaked the six properties of the SpeechSynthesisUtterance instance. They are Pitch, Volume, Text, Voice, Rate, and Language.
We added listeners on the control button to control the SpeechSynthesisUtterance instance when they are clicked. They are Start, Pause, Resume, and Cancel.

Congratulations, 🥳 You did it.

Thanks for reading!

Dark Mode for React Applications using Context API and Hooks

Mohan Raj — Sun, 17 Jan 2021 15:23:51 +0000

In this tutorial, we will use React's Context API and Reducers in a React application to maintain the state for the theme of the application (dark/light).

Goals

By the end of this tutorial, you’ll know:

How the Context API works.
When to use the Context API instead of Redux.
How to implement dark mode in a React application using React's Context API.

Prerequisites

We will not cover the fundamentals of React in this tutorial. If you are not comfortable with the fundamentals, here is a helpful tutorial that you can go through before beginning with this project.

Overview

We'll be going through these steps in this article:

Context API.
When to use the Context API instead of Redux.
Reducers.
Cloning the starter code.
Adding the Context and Reducer.
Consuming the Context.
Recap.

Context API

According to the official documentation, Context API provides a way to pass data through the component tree without having to pass props down manually at each level.

In other words, React’s Context API is there to solve a simple problem. How to manage state that is required in multiple components (not necessarily a direct child component) without passing it all the way down.

The context API consists of three building blocks:

A Context Object.
A Context Provider.
A Context Consumer.

We need to create a Context object using the createContext method.

const Context = createContext();

Every Context object comes with a Provider component. All the components that consume the context must be a descendant of the Provider component. The Provider component accepts a value prop that will be passed to the consuming components.

<Context.Provider value={value}>
  {/* Children */}
</Context.Provider>;

To subscribe to the Context object, we will use the useContext hook and pass the Context object created by createContext to it.

When a component subscribes to the Context object, it will read the current context value from the closest matching Provider above it in the tree.

const context = useContext(Context);

When to use the Context API instead of Redux

Redux serves as a centralized store for the state that needs to be used across your entire application. It has rules ensuring that the state can only be updated in a predictable manner. Since Redux is an external library, it is supported by other frameworks such as Angular, Flutter, etc.

If you want to learn more about Redux, check out this tutorial.

Context API is a perfect alternative to Redux when building small applications. It is much easier to implement. Furthermore, it results in a smaller bundle size and improved project maintainability.

However, the Context API is not built for high-frequency updates at the time of writing this article. You should, therefore, only use it for low-frequency updates like the theme and authentication. This is because whenever the context's value changes, the descendant components of the Provider will be re-rendered.

Reducers

A Reducer is a function that takes 2 arguments, the current state, and an action. Based on the type of action, the function will return a new state.

For example:

const reducer = (state, action) => {
  switch (action.type) {
    case "TYPE_1":
      return new_state;

    case "TYPE_2":
      return new_state;

    default:
      return state;
  }
};

The useReducer hooks take 2 arguments, the reducer function, and the initial state. It will return the current state value and a function called dispatch which should be used to manipulate the state.

const [state, dispatch] = useReducer(reducer, initialState);

If you pass this state and dispatch to the value prop of the Context Provider, you can consume the state and update it using the dispatch from any consumer.

Cloning the starter code

To focus more on the use of the context API and reducers, I've prepared a starter code. You can clone it from this repository on GitHub. Follow the Repository's README for instructions.

If you'd like to take a look at the final code, please refer to this GitHub Repository.

In the starter code, I've set up a simple screen with text and a button to switch to dark mode. I've also written all the CSS styles required for the dark mode and the light mode. Take a look at them or feel free to edit them in src/App.css.

Adding the Context and Reducer

In the src folder, create a new file called ThemeContext.js.

The next step is to create a Context object for the theme. We need to export this object from this file. This allows us to import it into the component where we want to consume this context.

export const ThemeContext = createContext();

Now, We should write a HOC (Higher Order Component) that'll be used to wrap any component with the Context provider.

In this HOC, we need to use the useReducer hook to create a state and the dispatch function to update that state and pass it to the provider component's value prop.

We need to write a reducer function to switch between dark mode and light mode.

Realistically, you won't need a reducer for this simple state update. You can just use a normal state and setState from the useState hook. But, for the sake of learning how to use reducers along with the Context API, I'll be using reducers to update the theme state.

The initial state will be:

const initialState = { darkMode: false };

The reducer function will be:

const themeReducer = (state, action) => {
  switch (action.type) {
    case "LIGHTMODE":
      return { darkMode: false };
    case "DARKMODE":
      return { darkMode: true };
    default:
      return state;
  }
};

Now, we need to pass this themeReducer function and the initialState to the useReducer hook.

const [state, dispatch] = useReducer(themeReducer, initialState);

Now, let's write the HOC and export it from this file. We should pass the state and the dispatch function to the value prop of the Provider.

export function ThemeProvider(props) {
  const [state, dispatch] = useReducer(themeReducer, initialState);

  return <ThemeContext.Provider value={{ state: state, dispatch: dispatch }}>{props.children}</ThemeContext.Provider>;
}

Consuming the Context

We should wrap the ThemeProvider HOC around the component from which we want to consume the context. Since the theme is supposed to affect the application globally, let's wrap it around the App component.

In the index.js file, import the ThemeProvider, as shown below.

import { ThemeProvider } from "./ThemeContext";

Now, let's wrap <App></App> with <ThemeProvider></ThemeProvider>.

ReactDOM.render(
  <React.StrictMode>
    <ThemeProvider>
      <App />
    </ThemeProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

This will make the theme context available for all the descendants of the App component.

In the App.js file, import the ThemeContext and the useContext hook.

import React, { useContext } from "react";
import { ThemeContext } from "./ThemeContext";

We need to pass the ThemeContext object to the useContext hook.

const theme = useContext(ThemeContext);

The useContext hook will return the object that we passed to the value prop of the provider.

So, to access the dark mode state, we use theme.state.darkMode.

const darkMode = theme.state.darkMode;

We can now use this state to alternate between the CSS classes that we need to apply for the elements.

For example,

<div className={`bg ${darkMode ? "bg-dark" : "bg-light"}`}>

Now, do the same for the h1 and the p tags.

<h1 className={`heading ${darkMode ? "heading-dark" : "heading-light"}`}>
  {darkMode ? "Dark Mode" : "Light Mode"}
</h1>
<p className={`para ${darkMode ? "para-dark" : "para-light"}`}>
  ...
</p>

Next, we should use the dispatch function to update the state between dark mode and light mode.

In Button.js, let's import the ThemeContext and the useContext hook.

import React, { useContext } from "react";
import { ThemeContext } from "./ThemeContext";

Similar to what we did in the App.js file, we need to pass the ThemeContext object to the useContext hook.

const theme = useContext(ThemeContext);
const darkMode = theme.state.darkMode;

When the user clicks the swtich theme button, we should call the dispatch function with the correct type. If the current theme is in light mode, the dispatch type should be of dark mode and vice-versa.

Let's write a function for when the user clicks on the button and pass it to the onClick property of the button.

export default function SwitchButton() {
  const theme = useContext(ThemeContext);
  const darkMode = theme.state.darkMode;

  const onClick = () => {
    if (darkMode)
      theme.dispatch({ type: "LIGHTMODE" });
    else
      theme.dispatch({ type: "DARKMODE" });
  };

  return (
    <button className={`btn ${darkMode ? "btn-dark" : "btn-light"}`} onClick={onClick}>
      {darkMode ? "Switch to Light Mode" : "Switch to Dark Mode"}
    </button>
  );
}

Now, when you click on the button, the theme should change.

Let's Recap

We learned about the Context API.
We learned about when to use Context API.
We learned about Reducers and how to use them along with the Context API.
We built an application that uses context API and reducers to implement dark mode in the application.

Congratulations, You did it.

Thanks for reading!

Speech Recognition Using the Web Speech API in JavaScript

Mohan Raj — Sun, 17 Jan 2021 15:19:56 +0000

The Web Speech API is used to incorporate voice data into web apps. In this tutorial, we will build a simple webpage that uses the Web Speech API to implement speech recognition. You can check the browser compatibility for the Web Speech API here.

Prerequisites

To follow along with this tutorial, you should have:

A basic understanding of HTML and JavaScript.
A code editor. I'll be using Visual Studio Code.
A browser to view the webpage, preferably Google Chrome or Firefox.

Cloning the starter code

To focus more on speech recognition, I've prepared some starter code. You can clone it from this repository on GitHub. Follow the Repository's README for instructions.

For the final code, you can look at this GitHub Repository.

In the starter code, I've set up a language and dialect select menu, two buttons to start/stop the speech recognition, and a box to display the transcript. I've used Bootstrap to style the webpage.

Let's code

First, create a new JavaScript file and name it speechRecognition.js. Next, add the script to the HTML file using the script tag after the body tag.

Adding the script tag after the body tag will make sure that the script file is loaded after all the elements have been loaded to the DOM which aids performance.

<script src="./speechRecognition.js"></script>

Now, inside the script file, let's check if the webkitSpeechRecognition class is available in the window object. If not, let's console.log so that it's not available.

if ("webkitSpeechRecognition" in window) {

  // Speech Recognition Stuff goes here

} else {
  console.log("Speech Recognition Not Available")
}

Initialization

Everything we write from now on goes inside the if condition.

Let's create a webkitSpeechRecognition object.

let speechRecognition = new webkitSpeechRecognition();

Properties

Now, let's configure some properties on this speechRecognition object.

Continuous listening

The speech recognition object can either stop listening after the user stops speaking or it can keep listening until the user stops it. If you only want to recognize a phrase or a word, you can set this to false. For this tutorial, let's set it to true.

speechRecognition.continuous = true;

Interim results

Interim results are results that are not yet final. If you enable this property, the speechRecognition object will also return the interim results along with the final results. Let's set it to true.

speechRecognition.interimResults = true;

Language

This is the language that the user will speak in. You need to use locale codes to set this property. Please note that not all languages are available in this feature yet.

Let's set the language that the user has chosen from the select menu. You need to select the Dialect select menu and use its value for the language property.

speechRecognition.lang = document.querySelector("#select_dialect").value;

Events & callbacks

You can provide callbacks for events like onStart, onEnd, onResult, and onError.

onStart

This event is triggered when speech recognition is started by the user. Let's pass a callback function that will display that the speech recognition instance is listening on the webpage.

In the starter code, there is a  element with an ID called status that says Listening.... It's been hidden by setting the display property of the element to none using CSS.

Let's set it to display: block when the speech recognition starts.

speechRecognition.onstart = () => {
  document.querySelector("#status").style.display = "block";
};

onEnd

This event is triggered when the speech recognition is ended by the user. Let's pass a callback function that will hide the status  element in the webpage.

Let's set it to display: none when the speech recognition starts.

speechRecognition.onend = () => {
  document.querySelector("#status").style.display = "none";
};

onError

This event is triggered when there is some sort of error in speech recognition. Let's pass a callback function that will hide the status  element in the webpage.

Let's set it to display: none when the speech recognition starts.

speechRecognition.onError = () => {
  document.querySelector("#status").style.display = "none";
};

onResult

This event is triggered when the speechRecognition object has some results from the recognition. It will contain the final results and interim results. Let's pass a callback function that will set the results to the respective  inside the transcript box.

This is the HTML code for the transcript box on the web page. The interim results span is colored in a different color to differentiate between the interim results and the final results.

<div class="p-3" style="border: 1px solid gray; height: 300px; border-radius: 8px;">
  <span id="final" class="text-light"></span>
  <span id="interim" class="text-secondary"></span>
</div>

We need to set the interim results to the span with the ID interim and the final results to the span with the ID final.

The result event will pass an event object to the callback function. This object will contain the results in the form of an array. Each element in the array will have a property called isFinal denoting whether that item is an interim result or a final result.

Let's declare a variable for the final transcript outside the callback function and a variable for the interim transcript inside the callback function.

let final_transcript = "";

speechRecognition.onresult = (event) => {
  // Create the interim transcript string locally because we don't want it to persist like final transcript
  let interim_transcript = "";
};

Now let's build a string from the results array. We should run it through a loop and add the result item to the final transcript if the result item is final. If not, we should add it to the interim results string.

// Loop through the results from the speech recognition object.
for (let i = event.resultIndex; i < event.results.length; ++i) {
  // If the result item is Final, add it to Final Transcript, Else add it to Interim transcript
  if (event.results[i].isFinal) {
    final_transcript += event.results[i][0].transcript;
  } else {
    interim_transcript += event.results[i][0].transcript;
  }
}

Finally, let's update the DOM with the transcript values.

document.querySelector("#final").innerHTML = final_transcript;
document.querySelector("#interim").innerHTML = interim_transcript;

This is the complete code snippet for the onResult event.

let final_transcript = "";

speechRecognition.onresult = (event) => {
  // Create the interim transcript string locally because we don't want it to persist like final transcript
  let interim_transcript = "";

  // Loop through the results from the speech recognition object.
  for (let i = event.resultIndex; i < event.results.length; ++i) {
    // If the result item is Final, add it to Final Transcript, Else add it to Interim transcript
    if (event.results[i].isFinal) {
      final_transcript += event.results[i][0].transcript;
    } else {
      interim_transcript += event.results[i][0].transcript;
    }
  }

  // Set the Final franscript and Interim transcript.
  document.querySelector("#final").innerHTML = final_transcript;
  document.querySelector("#interim").innerHTML = interim_transcript;
};

Start/Stop recognition

Finally, let's start and stop the recognition.

We need to set the onClick property of the start and stop buttons to start and stop the speech recognition.

document.querySelector("#start").onclick = () => {
  speechRecognition.start();
};
document.querySelector("#stop").onclick = () => {
  speechRecognition.stop();
};

Here is the final code for speechRecognition.js:

if ("webkitSpeechRecognition" in window) {
  // Initialize webkitSpeechRecognition
  let speechRecognition = new webkitSpeechRecognition();

  // String for the Final Transcript
  let final_transcript = "";

  // Set the properties for the Speech Recognition object
  speechRecognition.continuous = true;
  speechRecognition.interimResults = true;
  speechRecognition.lang = document.querySelector("#select_dialect").value;

  // Callback Function for the onStart Event
  speechRecognition.onstart = () => {
    // Show the Status Element
    document.querySelector("#status").style.display = "block";
  };
  speechRecognition.onerror = () => {
    // Hide the Status Element
    document.querySelector("#status").style.display = "none";
  };
  speechRecognition.onend = () => {
    // Hide the Status Element
    document.querySelector("#status").style.display = "none";
  };

  speechRecognition.onresult = (event) => {
    // Create the interim transcript string locally because we don't want it to persist like final transcript
    let interim_transcript = "";

    // Loop through the results from the speech recognition object.
    for (let i = event.resultIndex; i < event.results.length; ++i) {
      // If the result item is Final, add it to Final Transcript, Else add it to Interim transcript
      if (event.results[i].isFinal) {
        final_transcript += event.results[i][0].transcript;
      } else {
        interim_transcript += event.results[i][0].transcript;
      }
    }

    // Set the Final transcript and Interim transcript.
    document.querySelector("#final").innerHTML = final_transcript;
    document.querySelector("#interim").innerHTML = interim_transcript;
  };

  // Set the onClick property of the start button
  document.querySelector("#start").onclick = () => {
    // Start the Speech Recognition
    speechRecognition.start();
  };
  // Set the onClick property of the stop button
  document.querySelector("#stop").onclick = () => {
    // Stop the Speech Recognition
    speechRecognition.stop();
  };
} else {
  console.log("Speech Recognition Not Available");
}

Result

You can take a look at the deployed version of the project here.

Let's Recap

We cloned the starter code from the GitHub repository.
We created a new JavaScript file and linked it to the HTML file.
We checked whether the webkitSpeechRecognition class was available on the window object.
We created a new instance of the webkitSpeechRecognition class.
We set some properties like continuous, interimResults, and language on that speech recognition instance.
We added callback methods for different events like onStart, onEnd, onError, and onResult.
We set the onClick property of the start and stop buttons to start and stop the speech recognition.

Congratulations, 🥳 You did it.

Thanks for reading!