React Native – Make a Phone Call

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.

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.

A function is created 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.

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',
    }

  });