React Native Make a Phone Call – Open Phone Number in Dial Screen

This tutorial explains how to make a phone call in react native application using Linking component in react native application. Linking gives you a general interface to interact with both incoming and outgoing app links. In mobile applications you may have seen many times there is a calling button present and when you press the call button it would open the phone numbers on mobile dial pad screen. This functionality would give you more easiness in our application and helps to make a call from application.

Example to Make a Phone Call in React Native App :

Lets see the below steps that helps to make a phone call in react native application using Linking component in React Native.

Step 1: Create a new react native project, if you don’t know how to create a new project in react native just follow this tutorial.

Step 2: Open App.js File in your favorite code editor and erase all code and follow this tutorial.

Step 3: Through react , react-native packages import all required components.

import React, { Component } from 'react';
import { Text, StyleSheet, View, Linking, Platform, TouchableOpacity } from 'react-native';

Step 4: Create a function named as makeCall() in your App class. This Function first use the platform component to check the device is android or ios then if device is android then store the number value in phoneNumber variable. At last we would pass the phoneNumber variable in Lining component which would open this in our dial pad screen.
tel : Open the given number in android.
telprompt : Open the given number in iOS devices.

makeCall = () => {

    let phoneNumber = '';

    if (Platform.OS === 'android') {
      phoneNumber = 'tel:${1234567890}';
    } else {
      phoneNumber = 'telprompt:${1234567890}';
    }

    Linking.openURL(phoneNumber);
  };

Step 5: Implement render method inside the App class and wrapped the below layout design inside the root View component.

 render() {
    return (
      <View style={styles.container} >
        <TouchableOpacity onPress={this.makeCall} activeOpacity={0.7} style={styles.touchableButton} >
          <Text style={styles.TextStyle}> Click Here To Dial In Dial Screen</Text>
        </TouchableOpacity>
      </View>
    );
  }

Step 6 : Apply the below style sheet design. 

const styles = StyleSheet.create(
  {
    container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      margin: 20
    },
    touchableButton: {
      width: '80%',
      padding: 10,
      backgroundColor: '#9c27b0',
    },
    TextStyle: {
      color: '#fff',
      fontSize: 18,
      textAlign: 'center',
    }

  });

Complete Source Code for App.js 

Lets see the complete source code that helps to make a phone call in react native application using Linking component in React Native.

import React, { Component } from 'react';
import { Text, StyleSheet, View, Linking, Platform, TouchableOpacity } from 'react-native';


export default class App extends Component {

  makeCall = () => {

    let phoneNumber = '';

    if (Platform.OS === 'android') {
      phoneNumber = 'tel:${1234567890}';
    } else {
      phoneNumber = 'telprompt:${1234567890}';
    }

    Linking.openURL(phoneNumber);
  };

  render() {
    return (
      <View style={styles.container} >
        <TouchableOpacity onPress={this.makeCall} activeOpacity={0.7} style={styles.touchableButton} >
          <Text style={styles.TextStyle}> Click Here To Dial In Dial Screen</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create(
  {
    container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      margin: 20
    },
    touchableButton: {
      width: '80%',
      padding: 10,
      backgroundColor: '#9c27b0',
    },
    TextStyle: {
      color: '#fff',
      fontSize: 18,
      textAlign: 'center',
    }

  });

Screenshot : 

This is all about make a phone call in react native application using Linking component in React Native. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.