React Native

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

  });

Shaiv Roy

Hy Myself shaiv roy, I am a passionate blogger and love to share ideas among people, I am having good experience with laravel, vue js, react, flutter and doing website and app development work from last 7 years.

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button