Any component/API in React Native to handle Email and Phone Number links

Question

LinkingIOS says the following:
* The iOS simulator does not support the mailto: and tel: schemas * because the Mail and Phone apps are not installed - you will need to test * them on a device.

What can I use in my React Native app to link to the native Mail app when an email address is clicked on? And similarly, how do I give the option to call or text-message when a telephone number is clicked on?

Answer 1

You can use the LinkingIOS.openURL(url). It will work perfect on actual iPhone. You cannot test it on Simulator because those apps are not available on simulator. So, use mailto: for email, tel: for call & sms: for sending SMS.

I would also recommend you doing feature detection using LinkingIOS.canOpenURL because, iPad will also not support the call and sms features. So its always good idea to check the support for the url scheme before using it.

Answer 2

react-native-communications very nice react native npm module. which supports phone call, sms, email, and urls.

Open a web address, easily call, email, text, iMessage (iOS only) someone in React Native

<View style={styles.container}>
        <TouchableOpacity onPress={() => Communications.phonecall('0123456789', true)}>
          <View style={styles.holder}>
            <Text style={styles.text}>Make phonecall</Text>
          </View>
        </TouchableOpacity>
        <TouchableOpacity onPress={() => Communications.email(['emailAddress1', 'emailAddress2'],null,null,'My Subject','My body text')}>
          <View style={styles.holder}>
            <Text style={styles.text}>Send an email</Text>
          </View>
        </TouchableOpacity>
        <TouchableOpacity onPress={() => Communications.text('0123456789')}>
          <View style={styles.holder}>
            <Text style={styles.text}>Send a text/iMessage</Text>
          </View>
        </TouchableOpacity>
        <TouchableOpacity onPress={() => Communications.web('https://github.com/facebook/react-native')}>
          <View style={styles.holder}>
            <Text style={styles.text}>Open react-native repo on Github</Text>
          </View>
        </TouchableOpacity>
      </View>

Answer 3

I found a third lib which called react-native-autolink https://github.com/joshswan/react-native-autolink

Hope this can help to you