How to make phone call in React Native?

Question

I want to call to the value of Text component when I press it. But, actually, I haven't enough knowledge for that.

Can you, please, tell me, which library or component should I use?

score 339 · Accepted Answer · answered Nov 13 '18 at 20:09

339

If you look at the source code for react-native-phone-call, it's ultimately just a wrapper for:

import {Linking} from 'react-native'
Linking.openURL(`tel:${phoneNumber}`)

answered Nov 13 '18 at 20:09

Tim

6,265
5
29
24

score 71 · Answer 2 · edited Jul 25 '21 at 02:53

71

You can use this method to call numbers in android and ios, place this method in a utils file and use the method wherever you want. cheers

import { Linking, Alert, Platform } from 'react-native';

export const callNumber = phone => {
  console.log('callNumber ----> ', phone);
  let phoneNumber = phone;
  if (Platform.OS !== 'android') {
    phoneNumber = `telprompt:${phone}`;
  }
  else  {
    phoneNumber = `tel:${phone}`;
  }
  Linking.canOpenURL(phoneNumber)
  .then(supported => {
    if (!supported) {
      Alert.alert('Phone number is not available');
    } else {
      return Linking.openURL(phoneNumber);
    }
  })
  .catch(err => console.log(err));
};

**Update ( Andrey Patseiko's comment) **

Don't forget added to Info.plist ->

<key>LSApplicationQueriesSchemes</key> 
<array> 
  <string>tel</string> 
  <string>telprompt</string> 
</array>

edited Jul 25 '21 at 02:53

CanCoder

1,073
14
20

answered Jan 02 '19 at 12:41

Aakash Daga

1,433
10
7

10

And don't forget added to Info.plist -> LSApplicationQueriesSchemes tel telprompt – Andrey Patseiko Oct 01 '19 at 09:23
Thank you very much for the complete solution, and also thanks for @AndreyPatseiko for explaining about the Info.plist key. This is answer is way more complete than the one tagged as the "best answer" – Gabcvit Oct 23 '19 at 09:33
just do what tim said – ICW Jul 06 '22 at 13:53

score 31 · Answer 3 · answered Feb 27 '19 at 13:06

31

it is very simple for ios:

import {Linking} from 'react-native'

<Text onPress={()=>{Linking.openURL('tel:119');}} style={styles.funcNavText}>119</Text>

answered Feb 27 '19 at 13:06

hook zou

581
5
6

5

Great answer. Works both on iOS and android. No need to import Platform from react-native. – Dr. Younes Henni Sep 17 '19 at 13:51

ramashish tomar · Answer 4 · 2021-05-07T06:47:39.500

import React, { Component } from "react";
import {Linking,Platform,TouchableOpacity,Text} from "react-native";
export default class MakeCall extends Component {
 
 dialCall = (number) => {
    let phoneNumber = '';
    if (Platform.OS === 'android') { phoneNumber = `tel:${number}`; }
    else {phoneNumber = `telprompt:${number}`; }
    Linking.openURL(phoneNumber);
 };
 
 Render(){
        return(
                <TouchableOpacity
                   style={{
                   height: 30,
                   width: 30,
                   backgroundColor: "#329df4",
                   alignItems: "center",
                   justifyContent: "center",
                   borderRadius: 5
                   }}
                 onPress={()=>{this.dialCall(123456789)}}
                >
                <Text>Phone</Text>
                </TouchableOpacity>
              )
  }

}

score 8 · Answer 5 · answered Oct 08 '21 at 09:42

import { View,Linking,Text, Image,Platform,TouchableOpacity } from 'react-native';

 const onPressMobileNumberClick = (number) => {

        let phoneNumber = '';
        if (Platform.OS === 'android') {
          phoneNumber = `tel:${number}`;
        } else {
          phoneNumber = `telprompt:${number}`;
        }
  
        Linking.openURL(phoneNumber);
     }
  

 <TouchableOpacity 
       onPress={() => { onPressMobileNumberClick("9211886204") }} >
       <Text style={{ textDecorationLine: 'underline', textAlign: 'center', }>
               {"9211886204"}
       </Text>
   </TouchableOpacity>

score 7 · Answer 6 · answered Jul 16 '19 at 11:56

7

Simply onPress action with {Linking.openURL(tel:${phonenumber});} can be put

<Text onPress={()=>{Linking.openURL('tel:8777111223');} }>8777111223</Text>

ps:Dont forget to import Linking from 'react-native'

answered Jul 16 '19 at 11:56

Sjonchhe

790
8
16

score 6 · Answer 7 · answered Oct 03 '21 at 16:12

6

The simplest way of achieving this is like this

import { Linking } from "react-native";

Linking.openURL(`tel:${phoneNumber}`);

answered Oct 03 '21 at 16:12

AngelNext

158
2
9

1

It doesn't seem to work for me on iOS – Caleb C. Adainoo Jul 31 '22 at 11:21

score 6 · Answer 8 · answered Jul 22 '22 at 06:17

import {useNavigation} from '@react-navigation/native';
import React from 'react';
import {Linking,View, Button} from 'react-native';

export function LegalScreen() {
  const navigation = useNavigation();

  return (
    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
      <Button
        onPress={() => {Linking.openURL('tel:9873');}}
        title="Call Helpline"
      />
    </View>
  );
}

Just import Linking from react native and add this {Linking.openURL('tel:9873');}in onPress function. You can replace 9873 with any number you want.

score 5 · Answer 9 · answered May 13 '19 at 07:05

1. install react-native-phone-call package using npm

$ npm install --save react-native-phone-call

2. create a method called makeCall()

makeCall = (number) => {
     const args = {
         number: number, // String value with the number to call
         prompt: true // Optional boolean property. Determines if the user should be prompt prior to the call 
     }
    call(args).catch(console.error)
}

3. call the method in onPress event of a TouchableOpacity

<TouchableOpacity key={index} style={{width: '80%', height: 80, backgroundColor: 'rgb(186, 186, 186)',  alignItems:'center', justifyContent: 'space-between', borderBottomWidth: 0.5, borderBottomColor: '#000000'}}
             onPress={()=> this.makeCall(item.contactNumber)}
>

score 2 · Answer 10 · edited May 04 '21 at 12:46

2

An example:

<ButtonOrange onPress={() => { Linking.openURL(`tel:999990000`) }}>
    <ViewCenter>
        <Icon name="phone" size={18} color="#fff" />
        <ButtonText>Call</ButtonText>
    </ViewCenter>
</ButtonOrange>

edited May 04 '21 at 12:46

cokeman19

2,405
1
25
40

answered Jan 13 '21 at 18:21

Paulinho

21
2

score 0 · Answer 11 · answered Oct 31 '19 at 07:23

0

On android, react-native-send-intent is great to dial a phone number without opening android dialer app.

On iOS, use the openUrl method which do (almost) the same.

answered Oct 31 '19 at 07:23

Massale

56
1
9

I Want to know that is there any way to make a call without opening the dialer – Rover Dec 17 '20 at 14:35
I've made a native lib for this, but not published it to NPM yet. It still use the Phone app, but it won't ask user to confirm dialing. – Massale Jan 07 '21 at 15:02
you must publish it, if it's working great – Rover Jan 08 '21 at 06:51

How to make phone call in React Native?

11 Answers11

Linked