How to make phone call in React Native?

React NativePhone Call

React Native Problem Overview


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?

enter image description here enter image description here

React Native Solutions


Solution 1 - React Native

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

Solution 2 - React Native

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>

Solution 3 - React Native

it is very simple for ios:

import {Linking} from 'react-native'

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

Solution 4 - React Native

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

}

Solution 5 - React Native

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'

Solution 6 - React Native

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>

Solution 7 - React Native

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

Solution 8 - React Native

The simplest way of achieving this is like this

import { Linking } from "react-native";

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

Solution 9 - React Native

An example:

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

Solution 10 - React Native

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.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionJust AheadView Question on Stackoverflow
Solution 1 - React NativeTimView Answer on Stackoverflow
Solution 2 - React NativeAakash DagaView Answer on Stackoverflow
Solution 3 - React Nativehook zouView Answer on Stackoverflow
Solution 4 - React Nativeramashish tomarView Answer on Stackoverflow
Solution 5 - React NativeSjonchheView Answer on Stackoverflow
Solution 6 - React NativeSourabh GeraView Answer on Stackoverflow
Solution 7 - React NativeCodemakerView Answer on Stackoverflow
Solution 8 - React NativeAngelNextView Answer on Stackoverflow
Solution 9 - React NativePaulinhoView Answer on Stackoverflow
Solution 10 - React NativeMassaleView Answer on Stackoverflow