Sometimes, we want to display a hyperlink in a React Native app.
In this article, we’ll look at how to display a hyperlink in a React Native app.
How to display a hyperlink in a React Native app?
To display a hyperlink in a React Native app, we can use the Linking.openURL
method.
For instance, we write:
import * as React from 'react';
import { View, StyleSheet, Linking } from 'react-native';
import { Text, Button } from 'react-native-paper';
const MyComponent = () => {
return (
<View>
<Text
style={{ color: 'blue' }}
onPress={() => Linking.openURL('http://example.com')}>
example
</Text>
</View>
);
};
export default MyComponent;
to create a Text
component that looks like a link by setting its content’s color to blue.
Then we set the onPress
prop of it to a function that calls Linking.openURL
with the URL that we want to open.
And we put the link text between the Text
tags.
Conclusion
To display a hyperlink in a React Native app, we can use the Linking.openURL
method.