Phone call in react native

Question

I want to make a phone call in React Native, I am a beginner on react native so I came across this question which looks like mine => How to make phone call in React Native?

So, this is a part of my code but it's not working, when I click on the icon, nothing is happening and I have no error on my terminal, it's very weird. This is my code:

import React from 'react';
import { Image, Text, View, StyleSheet } from 'react-native';

import { Avatar } from "react-native-elements";
import { Linking } from 'react-native';

export const makeCall = () => {

    let phoneNumber = '';

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

    Linking.openURL(phoneNumber);
};

const Contacts = () => {

  return (
    <View style={styles.column}>
       <Avatar
         size={65}
         rounded
         overlayContainerStyle={{ backgroundColor: '#fff' }}
         icon={{ name: 'phone', color: '#113D78', type: 'font-awesome' }}
         onPress={() => makeCall}
         style={{
           width: 65,
           height: 65,
           borderRadius: 50,
           borderWidth: 2,
           borderColor: '#113D78',
         }}
     />
     <Text style={styles.subtitle}>Phone</Text>
   </View>
);

}

export default Contacts;

score 1 · Answer 1 · answered Aug 09 '21 at 09:50

1

Looks like you are not using the backticks for your phoneNumber string if you have a phoneNumber variable. Right now you are hardcoding the numbers so just use tel:12345678 without the curly brackets and dollar sign. Also, tel:${number} should work on both platforms if you use newer react-native versions. And keep in mind that opening calls is not supported on the iOS simulator, so you have to test on a real device or on android.

answered Aug 09 '21 at 09:50

Krismu

503
4
14

Thanks for the reply, I put on backticks and tested on my phone and it worked fine, but I use tel:+3312345678! I thought it worked on emulator too – Daemes Aug 13 '21 at 16:51

score 1 · Answer 2 · answered Aug 09 '21 at 09:55

your issue is here. in this function

export const makeCall = () => {

    let phoneNumber = '';

    if (Platform.OS === 'android') {
        phoneNumber = 'tel:${0123456789}';   // Error in this line
    } else {
        phoneNumber = 'telprompt:${0123456789}';
    }

    Linking.openURL(phoneNumber);
};

it should be like this

export const makeCall = () => {

    let phoneNumber = '';

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

    Linking.openURL(phoneNumber);
};

score 0 · Answer 3 · answered Dec 11 '21 at 15:45

0

this line of code should work on both platforms as you replace phoneNumber by the number you want to call.

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

answered Dec 11 '21 at 15:45

Fady Tarek Shawky

61
1
3

score 0 · Answer 4 · answered Apr 01 '22 at 11:10

The Template Literal you used in your code but it is not in right way. You used '...' single quote instead of backtick (``).

They were called template strings in prior editions of the ECMAScript 2015 specification.

Template literals are supported by Chrome 41, Firefox 34, and Edge 12 and above, but not supported by Internet Explorer.

You can explore more from here about this.

However, I used your code in my app and checked in emulator. It works right now.

You can use only string with single quote '...' and without &{...} as like bellow:

let phoneNumber = '';

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

    Linking.openURL(phoneNumber);

Or you have to use backtick (``) if you use ${...} because it means that you are using a variable or a number in a template string as like below:

let phoneNumber = ``;

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

    Linking.openURL(phoneNumber);

Hope you understood the use case as well.

Phone call in react native

4 Answers4