How to Open Dialer Screen Directly from React Native App

Last Updated on December 13, 2020.

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 Linking API of react native. 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 which 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:

Have any doubts? Please use the comment section given below.

Leave a Reply

%d bloggers like this: