How to create clickable url links in text in React Native – Code Example

Suppose you are creating an app of a blog where you display articles on wildlife. In the text you have links targeting national geographic website. But the links are not clickable. How will user be able to visit them?

Similarly we need to have click action on things like phone numbers, email ids, url etc. React native provides dataDetectorType prop in <Text> component which has these values –

• none – To highlight nothing. This is default value. No links will be automatically highlighted.
• phoneNumber – This will only recognize phone numbers in the text and convert them to the clickable links. This link will redirect users to the call app in the phone with number already published.
• email – To capture emails only. Clicking these links will open default email client in phones.
• link – For website urls. This will open browser.
• all – It will recognize all formats of clickable entities and handle them accordingly.

Code Example

import React, { useState } from "react";
import { Text, StyleSheet, View } from "react-native";

const DataDetectorComponent = () => {
  
  return (
    <View style={styles.container}>
      <Text dataDetectorType={'email'}>
        This will recognize email (me@akashmittal.com) only. Not url (https://akashmittal.com).
      </Text>

      <Text dataDetectorType={'link'}>
        This will recognize url (https://akashmittal.com) only. Not email (me@akashmittal.com).
      </Text>

      <Text dataDetectorType={'phoneNumber'}>
        This will recognize phone (+919999900000) only. Not email (me@akashmittal.com).
      </Text>

      <Text dataDetectorType={'all'}>
        This will recognize all - phone (+919999900000), email (me@akashmittal.com), url (https://akashmittal.com).
      </Text>

      <Text>
        This will recognize nothing - phone (+919999900000), email (me@akashmittal.com), url (https://akashmittal.com).
      </Text>
    </View>

  );
};

const styles = StyleSheet.create({
  container: {
    justifyContent: 'space-between',
    height: 300,
    marginTop: 40
  } 
});

export default DataDetectorComponent;

Output –

It is shown in the image how various values of dataDetectorType prop behaves. We are highlighting links, email ids, and phone numbers.

In the code we have created multiple text blocks with different values for dataDetectorType prop in Text component.

Live Demo

Conclusion

Converting url, phone and email ids into clickable anchors is very important for usability of an app. It provides better navigation to the users and save them from frustration of copy-pasting.