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 ([email protected]) only. Not url (https://akashmittal.com). </Text> <Text dataDetectorType={'link'}> This will recognize url (https://akashmittal.com) only. Not email ([email protected]). </Text> <Text dataDetectorType={'phoneNumber'}> This will recognize phone (+919999900000) only. Not email ([email protected]). </Text> <Text dataDetectorType={'all'}> This will recognize all - phone (+919999900000), email ([email protected]), url (https://akashmittal.com). </Text> <Text> This will recognize nothing - phone (+919999900000), email ([email protected]), 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.
Read These Next ⬇️
How to Create Text?
How to Create Bold Text?
How to Create Italic Text?
How to Create Underline Text?
How to Create Selectable Text for copy-paste?
How to Change Highlight Color of Text Selection?
How to Scale text to Fit in Parent Container?
How to Create Clickable Anchors URLs in text?
How to Truncate Overflow Text?
React Native Series
Alert
- Basic Alert
- Dismiss on Clicking Outside
- Input Fields in Alert Dialog – Prompt()
- Dark-Light Theme of Dialog
ActivityIndicator
- Basic Circular Loader
- Change size of Circular Loader
- Show/hide Circular Loader
- Change color of Circular Loader
Button
FlatList
- Simple List
- Single Item Selection from List
- Multiple Item Selection from List
- Adding separator between list items
- Multiple columns List
- Showing Message in Empty List
- Add Footer to the List
- Add Header to the List
- Horizontal List
- Inverted List
- Pull to Refresh in List
- Infinite Loading List
SectionList
ScrollView
- ScrollView
- Stick Single Item at Header
- Stick Multiple Items at Header
- Stick Item at Footer
- Hide Sticky Element on Scroll
Image
- Display Image from remote url
- Display local storage image
- Display Base64 Image
- Display Gif & Webp Images
- Adding Blur to Image
- Displaying loader for Image
- Resizemode for Images
- Setting Default Placeholder Image
- Background Image
Modal
RefreshControl
- RefreshControl
- Change Refresh Loader Color
- Change Refresh Loader Size
- Change Refresh Loader Background Color
- Title under Refresh Loader
- Change color of title under refresh loader
StatusBar
- Get StatusBar Size
- Change StatusBar Background Color
- Display StatusBar icons & text in While Color
- Display StatusBar icons & text in Dark Color
- Hiding StatusBar
- Translucent StatusBar
Switch
Text
- Adding Text
- Bold Text
- Italic Text
- Underline Text
- Selecting Text for copy-paste
- Changing Highlight Color of Text Selection
- Fit text in View box
- Clickable anchors in text
- Truncate Lengthy Text
TextInput
- Simple Input Field
- Auto Capitalize Text in Input Field
- Multiline Input Field
- Hide Cursor in Input Field
- Clear input Field using X
- Clear input Field when focused
- Change Cursor Color in Input Field
- Disable input field
- Icon at the left of Input Field
- Dark-Light Keyboard
- Avoid Overlapping of Keyboard
- Limiting Characters in Input Field
- Numeric Keyboard
- Email Id Keyboard
- Phone number Keyboard
- Url Keyboard
- Placeholder in input field
- Placeholder Color in Input Field
- Password Input Field
- Programmatically select text in Input Field
- Change Text Selection Color in Input Field
- Select Whole text in Input Field on Focus
- Write text from center in input field
- Changing underline color of input field
TouchableWithoutFeedback
TouchableHighlight
TouchableOpacity
Pressable
Appearance
AppState
ToastAndroid
Dimensions
Keyboard