Make phone call from React-native

Hi guys, In this article, we are going to learn about How to make phone call from React-native, In my last post I have explained how to open WhatsApp chatbox from the react-native application using React-native core library Linking component. In this post, we are using the same core component in this example to make a phone call so let’s start with an example

1. Create a new project

I am using my previous project which I had created to open WhatsApp from React-native application

react-native init projectName

2. Import the following components

import React, { Component } from "react";
import {
  View,
  StyleSheet,
  Text,
  TextInput,
  Button,
  Linking,
  Platform
} from "react-native";

3. Make a call from React-native app

As you see in the above arrow function we have to write platform dependant condition as for Android we have to use tel: XXXXXXXXXX and for iOS telprompt: XXXXXXXXXX and create URL and pass these URL to Linking component in parameter this will open device phone call screen with keypad

  call = () => {
    console.log("+++++++++callNumber ", this.state.mobileNo);
    let phoneNumber = this.state.mobileNo;
    if (Platform.OS !== "android") {
      phoneNumber = `telprompt:${this.state.mobileNo}`;
    } else {
      phoneNumber = `tel:${this.state.mobileNo}`;
    }
    Linking.canOpenURL(phoneNumber)
      .then(supported => {
        if (!supported) {
          Alert.alert("Number is not available");
        } else {
          return Linking.openURL(phoneNumber);
        }
      })
      .catch(err => console.log(err));
  };

4. Full source code

As you can see above code, I have defined the default state for phoneNo in the constructor.

import React, { Component } from "react";
import {
  View,
  StyleSheet,
  Text,
  TextInput,
  Button,
  Linking,
  Platform
} from "react-native";

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      mobileNo: ""
    };
  }
  // Function to make phone call from React-native Application
    call = () => {
      console.log("+++++++++callNumber ", this.state.mobileNo);
      let phoneNumber = this.state.mobileNo;
      if (Platform.OS !== "android") {
        phoneNumber = `telprompt:${this.state.mobileNo}`;
      } else {
        phoneNumber = `tel:${this.state.mobileNo}`;
      }
      Linking.canOpenURL(phoneNumber)
        .then(supported => {
          if (!supported) {
            Alert.alert("Number is not available");
          } else {
            return Linking.openURL(phoneNumber);
          }
        })
        .catch(err => console.log(err));
    };

  render() {
    return (
      <View style={styles.container}>
        <Text
          style={{ textAlign: "center", fontSize: 20, paddingVertical: 30 }}
        >
          Make phone call from React-native App
        </Text>
        <TextInput
          value={this.state.mobileNo}
          onChangeText={mobileNo => this.setState({ mobileNo })}
          placeholder={"Enter Mobile"}
          style={styles.input}
          keyboardType={"numeric"}
        />
        <View style={{ marginTop: 20 }}>
          <Button onPress={this.call} title="Make phone call" />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    padding: 30,
    backgroundColor: "#ffffff"
  },
  input: {
    width: 255,
    height: 44,
    padding: 10,
    margin: 10,
    backgroundColor: "#FFF",
    borderColor: "#000",
    borderRadius: 0.5,
    borderWidth: 0.5
  }
});

We make a phone call using React-native core component Linking there are other libraries available to make phone calls like react-native-phone-call to install this library please check this post

5. Output

Thank you 🙂