Hello everyone and welcome into this article, React Native Linking Phone Call Example.

Where we are going to explore how to make a phone call in react native using Linking.
This example will be simple and straight forward and will work cross platform.
The concept is to call the linking API in React Native with some arguments, and it will use the default Phone dialer in the device.
Or the user can select other options, like Skype etc.
You can use your own UI inside your app to control the appearance and feel of the phone experience and that’s what we are going to do.

UI Concept

The concept of this app example is very simple.
One input text to get the user phone number input and a call icon button.
But you can have it as you want.
If you are familiar with my older article React Native Flatlist Example.
You can see that you can even launch the call from a Flatlist as an example.

React Native Linking Phone Call Example

Let’s Get Started

For this example we won’t need to install any libraries to achieve our goal.
The only library I will install is @expo/vector-icons, to use the phone Ionicons.
You can get it by installing this library using NPM or Yarn

yarn add @expo/vector-icons

Then import Ionicon 

import { Ionicons } from "@expo/vector-icons"

Now, let’s get started by our initial state, which will only have one property, the phone number

  state={
    phoneNumber:""
  }

next, our render method, with the UI we need for the app

      <View style={styles.container}>
        <TextInput 
          onChangeText={(text)=>this.setState({phoneNumber:text})}
          style={styles.input} 
          placeholder="911" 
          keyboardType="number-pad"/>
        <TouchableOpacity onPress={()=> this.call()}>
          <Ionicons name="ios-call" style={styles.callTxt}/>
        </TouchableOpacity>
      </View>

The render method will contain a root view and 2 main components.
A TextInput, to handle the user phone number typing.
And the Icon button to launch the call function.
You can see in our TextInput we have a new property keyboardType=”number-pad”
Which basically uses the Numbers keyboard instead of the all characters keyboard.
Since we are only needing numbers for a phone call app. we can use keyboardType=”number-pad”.
Notice, you can use multiple options for your UI, including email, address…
You can check the entire list here React Native KeyboardType
And the Icon we are using is the ios-call from Ionicons.
You can check the full icons list Expo Icons Directory

Finally the styles

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#ececeb',
    alignItems: 'center',
    justifyContent: 'center',
  },
  input:{
    height:50,
    fontSize:40,
    color:"#000",
    marginBottom:20
  },
  callTxt:{
    backgroundColor:"#42b883",
    padding:10,
    borderRadius:30,
    width:80,
    textAlign:"center",
    color:"#fff",
    fontSize:30
  }
});

Final Result

React Native Linking Phone Call Final Result

And your you have it a React Native Linking Phone Call Example simple and easy.
I have added this project into Github and Expo.Io, feel free to use it at your will
Take care and Happy Coding.