How to display a hyperlink in a React Native app?

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.