How to Open Dialer Screen Directly from React Native App

In this blog post, you can learn how to open the dial screen where the mobile phone number is dialed from your react native app.

The dialer screen can be opened using the Linking API of react native. The Linking API gives you a general interface to manage app links.

The following code snippet will open the dial screen and also pass the number to the screen.

        let number = '';
        if (Platform.OS === 'ios') {
        number = 'telprompt:${091123456789}';
        }
        else {
        number = 'tel:${091123456789}'; 
        }
        Linking.openURL(number);

Following is a react native example that opens the dial screen. When the TouchableOpacity is pressed, the app is redirected to the dial screen.

import React from 'react';
import {
  View,
  Text,
  Linking,
  TouchableOpacity,
  Platform,
  StyleSheet,
} from 'react-native';

const Home = () => {
  const openDialScreen = () => {
    let number = '';
    if (Platform.OS === 'ios') {
      number = 'telprompt:${091123456789}';
    } else {
      number = 'tel:${091123456789}';
    }
    Linking.openURL(number);
  };

  return (
    <View style={styles.container}>
      <TouchableOpacity onPress={() => openDialScreen()}>
        <Text style={styles.TextStyle}>Click to Open Dial Screen</Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white',
  },
});

export default Home;

The output will be as given below:

That’s how you open the dialer from a react native app. Have any doubts? Please use the comment section given below.