How to Make Phone Calls Using Android and React Native
This blog post will take you through a project, which will show you how to use the Vonage Client SDK to build a React Native Android app which will call a phone number. If you would like to explore using the Client SDK with iOS, check out this blog post.
- Android Studio, with JDK 8 or newer to build and run the app on an emulator.
- A GitHub account.
- Our Command Line Interface. It can be installed with
npm install nexmo-cli@beta -g.
- Homebrew to install the React Native dependencies.
Vonage API Account
To complete this tutorial, you will need a Vonage API account. If you don’t have one already, you can sign up today and start building with free credit. Once you have an account, you can find your API Key and API Secret at the top of the Vonage API Dashboard.
This tutorial also uses a virtual phone number. To purchase one, go to Numbers > Buy Numbers and search for one that meets your needs.
Set Up React Native
To build and run a React Native app, you first need to install the dependencies, Node and Watchman. You can do so using Homebrew. In your terminal run:
If you already have Node installed, ensure it is Node 12 or newer. You can find more information about getting your environment set up in the React Native documentation.
Clone the Project
You can clone the project to your local machine by running the following command in your terminal:
Then change directory into the new folder
Now that you have cloned the project, you can install the project dependencies. You can install the React Native specific dependencies by running
npm install. This command will install the dependencies listed in the
package.json file. A dependency you should note is
react-native-permissions, an open-source project that provides a unified way to request permissions on both iOS and Android.
React Native also needs some environment variables to be set up. Edit your
Once done, load the config into the current shell using the
source command. You can find more detailed instructions in the React Native documentation.
The Vonage Application
To create the application, we will be using our command-line interface. If you have not set up the CLI yet, do so by running the command nexmo setup API_KEY API_SECRET in your terminal, where the API Key and Secret are the API key and secret found on your account’s settings page.
Create an NCCO
A Call Control Object (NCCO) is a JSON array that you use to control the flow of a Voice API call. The NCCO must be public and accessible by the internet. To accomplish that, you will be using a GitHub Gist that provides a convenient way to host the configuration.
Go to https://gist.github.com and enter
call.json into the "Filename including extension" box. The contents of the gist will be the following JSON:
Create the gist, then click the “Raw” button to get a URL for your NCCO. Keep note of it for the next step.
Create a Vonage Application
You now need to create a Vonage Application. An application contains the security and configuration information you need to connect to Vonage. In your terminal, create a Vonage application using the following command replacing
GIST_URL with the URL from the previous step:
A file named
.nexmo-app is created in your project directory and contains the newly created Vonage Application ID and the private key. A private key file named
private.key is also created.
Create a JWT
The Client SDK uses JWTs for authentication. The JWT identifies the user name, the associated application ID and the permissions granted to the user. It is signed using your private key to prove that it is a valid token. Create a user for your application, you can do so by running
nexmo user:create name="Alice" to create a user called Alice. Then create a JWT for the Alice user by running the following command replacing
APP_ID with your application ID from earlier:
Run the Project
First, you will need to prepare an Android device for the project to run on. Open the project’s
android directory in Android Studio. The project will start loading and download the dependencies, including the Client SDK, via the Gradle Sync. You can view the dependencies on the Android app's
build.gradle file ( android/app/build.gradle). In the toolbar at the top, look for the AVD Manager button:
If you already have an emulator setup, run it. If not, click the Create Virtual Device button and go through the wizard. Make sure to create a device with API level 29 or newer as required by React Native.
With all the dependencies installed and the emulator running, you can now run the project. Start Metro with
npx react-native start. With that running, open a new terminal window in the same directory and run
npx react-native run-android. This command will build and run the android project for the emulator you prepared. The app consists of a label showing the connection status, a label to show the call status and an action button.
If you open the
App.tsx folder you can take a look at how this is built in the
If you are have used React before, this syntax will be familiar to you. A
Text component is used for the labels, a
Pressable component for the button, along with the styling CSS at the top. All three components make use of state. State data is parameters for components that will change over time. The state is initialized at the top of the
App class in the constructor with default information. You can paste the JWT you created in the previous step and save the file (CMD + S). The simulator will reload, and now when you press the login button, the Client SDK will connect. You now will be able to place a phone call.
How to Communicate With Native Code
As mentioned earlier, the project uses the
react-native-permissions library to make working with permissions across platforms easier. In the
AndroidManifest.xml file. :
The Client SDK
App.tsx and the native Android code. There are two ways of doing this depending on the direction of the information.
componentDidMount function in the
onCallStateChange, which will update the UI and action that the button performs.
If you open the
android directory of the project you will see a class called
EventEmitter ( android/app/src/main/java/com/rnapptophone/EventEmitter.java). The
These functions are called from the
ClientManager class ( iandroid/app/src/main/java/com/rnapptophone/ClientManager.java). The
ClientManager class is a wrapper around the Client SDK. Both classes extend the
ReactContextBaseJavaModule class, which requires both subclasses to return a name as a String which is used as the
ClientManager.java makes use of an annotation,
Originally published at https://learn.vonage.com/blog/2021/04/22/how-to-make-phone-calls-using-android-and-react-native/