React Native Make a Phone Call – Open Phone Number in Dial Screen

In mobile applications we have seen many times there is a calling button present and when we would press that button it would open the phone numbers on mobile dial pad screen. This functionality would give us more easiness in our application and we would directly make a call from application. When we would press the button on application screen it would navigate us to mobile dial pad screen with phone number. In react native we would use the Linking library to make this possible. So in this tutorial we would Make a Phone Call – Open Phone Number in Dial Screen in react native Android iOS application.

Note: This code will not work in iOS simulator but it is working fine in real iOS device.

React Native Make a Phone Call – Open Phone Number in Dial Screen Android iOS Example:

1. Import StyleSheet, Text, View, TouchableOpacity, Linking and Platform component in your react native project’s App.js file.

2. Create a function named as dialCall() in your main class. This function is the backbone of our project. In this function we would first use the platform component to check the device is android or ios then if device is android then store the number value in phoneNumber variable. At last we would pass the phoneNumber variable in Lining component which would open this in our dial pad screen.

tel : Open the given number in android.

telprompt : Open the given number in iOS devices.

3. Creating a button with Touchable opacity in render’s return block and call the dialCall function on button onPress event.

4. Creating Style.

5. Complete source code for App.js file class.

Screenshots:

React Native Make a Phone Call - Open Phone Number in Dial Screen

Leave a Reply

Your email address will not be published. Required fields are marked *