CODEWITHSUNDEEP
react-nativephone-call
Daemes
Daemes

Reputation: 16717

Phone call in react native

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;

Upvotes: 0

Views: 5042

Answers (4)

mdmostafa
mdmostafa

Reputation: 852

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.

Upvotes: 0

Fady Tarek Shawky
Fady Tarek Shawky

Reputation: 71

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}`)

Upvotes: 0

Engr.Aftab Ufaq
Engr.Aftab Ufaq

Reputation: 6212

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);
};

Upvotes: 1

Krismu
Krismu

Reputation: 503

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.

Upvotes: 1

Related Questions