Import Linking
First, we need to import the Linking module from the react-native package:
import { TouchableOpacity, Linking } from "react-native";
Web Links
URL Schema: https:// or http://
Example: https://withfra.me
Using the Linking API, we'll use the openURL() method to open the link. We'll pass the link as a string to the method. If the link is prefixed with https:// or http:// URL schema, openURL() will open the default browser.
<TouchableOpacity onPress={() => Linking.openURL("https://withfra.me")}>
<Text>WithFrame</Text>
</TouchableOpacity>
Mail Links
URL Schema: mailto:
Example: mailto:[email protected]
Similar to web links, you can also pass links with mailto: URL schema to open the default mail app.
<TouchableOpacity onPress={() => Linking.openURL("mailto:[email protected]")}>
<Text>Email us at [email protected]</Text>
</TouchableOpacity>
SMS Links
URL Schema: sms:
Example: sms:1-800-123-4567 or sms:18001234567
The sms: prefix is used to launch the Messages app. The URL string should only include the phone number and must not include any message text or other information.
<TouchableOpacity onPress={() => Linking.openURL("sms:1-800-123-4567")}>
<Text>Text us at 1-800-123-45-67</Text>
</TouchableOpacity>
Phone Links
URL Schema: tel:
Example: tel:1-800-123-4567 or tel:18001234567
Use tel: URL schema to open the phone number in the Phone app and dial someone.
<TouchableOpacity onPress={() => Linking.openURL("tel:+18001234567")}>
<Text>Call us at 1-800-123-45-67</Text>
</TouchableOpacity>
Facetime Links (iOS only)
URL Schema: facetime: or facetime-audio:
Example: facetime:18001234567 or facetime:[email protected]
Use facetime: URL schema to initiate a FaceTime call to a specified user. You can either use a phone number or email address of a user to make a call.
For FaceTime audio calls use facetime-audio: URL schema.
<TouchableOpacity onPress={() => Linking.openURL('facetime:+18001234567')}>
<Text>Video FaceTime</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => Linking.openURL('facetime-audio:+18001234567')}>
<Text>Audio FaceTime</Text>
</TouchableOpacity>
Customize the Link
We can also customize the link by adding styles to the Text component.
<TouchableOpacity onPress={() => Linking.openURL("https://withfra.me/privacy")}>
<Text style={{ fontSize: 14, lineHeight: 20, color: "#929292" }}>
By clicking "Sign in" above, you agree to our{" "}
<Text style={{ fontWeight: "600" }}>Privacy Policy</Text>.
</Text>
</TouchableOpacity>
Validating the Link
Before opening a link, it's a good practice to validate whether the link can be opened. We can use the canOpenURL() method to check for that.
<TouchableOpacity
onPress={() =>
Linking.canOpenURL("https://withfra.me/privacy").then((supported) => {
if (supported) {
Linking.openURL("https://withfra.me/privacy");
} else {
console.log(
"Don't know how to open URI: " + "https://withfra.me/privacy"
);
}
})
}
>
<Text style={{ fontSize: 14, lineHeight: 20, color: "#929292" }}>
By clicking "Sign in" above, you agree to our{" "}
<Text style={{ fontWeight: "600" }}>Privacy Policy</Text>.
</Text>
</TouchableOpacity>