Question 392881 in React native Question posted in
The official React Native documentation can be found here.

React native – Linking – How to trigger a phone call when clicking a button through a browser on a mobile phone?

The react code works fine when running through an app, however, when running through a browser, it just opens a blank tab on iOS, on android it opens a tab where the url is the phone number.

Am I missing a critical piece of understanding of how React Native Web is used to build websites? How can I use react native to build a website where a button presents the device’s modal to call a phone number?

EDIT:: On Safari for ios, it opens another tab and then presents the user with the modal(this is good enough). On iOS, on Google Chrome, it opens and closes a tab and nothing happens. On Android, it opens a tab and nothing happens. Why the variation?

const callNumber = phone => {
  // console.log('callNumber ----> ', phone);
  let phoneNumber = phone;
  if (Platform.OS !== 'android') {
    phoneNumber = `telprompt:${phone}`;
  }
  else  {
    phoneNumber = `tel:${phone}`;
  }
  Linking.canOpenURL(phoneNumber)
    .then(supported => {
      if (!supported) {
        Alert.alert('Phone number is not available');
      } else {
        return Linking.openURL(phoneNumber);
      }
    })
    .catch(err => console.log(err));
};
Tags:

2

Answers


  1. 0 
        import { Platform, Linking, Alert } from 'react-native';

const callNumber = phone => {
  let phoneNumber = phone;
  if (Platform.OS === 'ios') {
    phoneNumber = `telprompt:${phone}`;
  } else {
    phoneNumber = `tel:${phone}`;
  }

  Linking.canOpenURL(phoneNumber)
    .then(supported => {
      if (!supported) {
        Alert.alert('Phone number is not available');
      } else {
        return Linking.openURL(phoneNumber);
      }
    })
    .catch(error => console.error('Error opening phone app:', error));
};

export default callNumber;
    Login or Signup to reply.
  2. 0

    I think you should segregate the platforms and then act on each platform like it needs. On the web, you should do the following:

    const callNumber = (phone) => {
  let phoneNumber = phone;
  if (Platform.OS === 'ios') {
    phoneNumber = `telprompt:${phone}`;
  }
  else  {
    phoneNumber = `tel:${phone}`;
  }
  
  if (Platform.OS === 'web') {
    window.open(phoneNumber); // <== Pay attention here
  } else {
    Linking.canOpenURL(phoneNumber)
      .then(supported => {
        if (!supported) {
          Alert.alert('Phone number is not available');
        } else {
          return Linking.openURL(phoneNumber);
        }
      })
      .catch(err => console.log(err));
  }
};
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search