Introduction –
Here we are going to discuss about “How to Make a Phone Call in React Native App“, if you want to show the number anywhere in your app and want to when you click on it, it should open the mobile default dialer are you able to call on that number.
And one more thing we are not going to use any third party library, we integrate it using react native component Linking.
I’m a big fan of React Native, because it is very easy to implement complicated concepts and designs, in below example i am going to explain you in detail how to create a very simple mobile default dialer opening functionality.
Output Example –
![How to Make a Phone Call in React Native App](https://www.itechinsiders.com/wp-content/uploads/2020/10/imgonline-com-ua-twotoone-HwDQCXiCuzrg-1024x653.jpg)
So let’s start to integrate…
Built-in URL Schemes –
![How to Make a Phone Call in React Native App](https://www.itechinsiders.com/wp-content/uploads/2020/10/Screenshot-2020-10-30-at-5.03.01-PM.png)
Step 1 – Creating App
Create the app first for integrating phone calling functionality.
react-native init phoneNumberExample
Step 2 – Import the Linking
Here we use the Linking of react native, you can import the Linking where you want to integrate it.
import {Linking} from 'react-native'
Step 3 – State Declaration
Here we declare the state for storing the mobile number.
this.state = {
mobileNumber:'9876543210'
}
Step 4 – View Design
Here we design the view for for opening the dialer pad.
render(){
return(
<TouchableOpacity style={{borderWidth: 0}}
onPress={() =>
Linking.canOpenURL(`tel:${this.state.mobileNumber}`).then(supported => {
if (!supported) { // handle the error }
else { return Linking.openURL(`tel:${this.state.mobileNumber}`); } })
<View style={{height:30,borderRadius:(15)}}>
<Text>{this.state.mobileNumber}</Text>
</View>
)
}
Step 5 – Run The App
firstly we need to goto the path where the app is located then run the app.
cd phoneNumberExample
//Run it on the android device
react-native run-android
//run on the iOS simulator
react-native run-ios
So we completed the react native default dialer pad opening which is “How to Make a Phone Call in React Native App“.
You can find my post on medium as well click here please follow me on medium as well.
You can find my next post here.
If have any query/issue, please feel free to ask.
Happy Coding Guys.
![](https://www.itechinsiders.com/wp-content/uploads/2022/02/d05feee9-c15b-4810-8195-1486a9b236ac.jpeg)