import { StyleSheet } from 'react-native';
import HyperlinkText from 'react-native-hyperlink-text';
const styles = StyleSheet.create({
link: {
color: 'blue',
fontSize: 22,
},
base: {
color: 'black',
fontSize: 18,
},
});
<HyperlinkText
value={'Visit my website and check out my portfolio @https://friendly-robot.netlify.com/portfolio'}
baseStyle={styles.base}
linkStyle={styles.link}
/>
npm i -S react-native-hyperlink-text
A string containing urls or not (refer to hyperlinks) that will be converted to a series of <Text>
wrapping the content.
An array of objects each with a key value pair for assigning urls to keywords.
For example: [{ portfolio: 'https://friendly-robot.netlify.com/portfolio' }]
This will map every instance of "portfolio" and transform it into a link that directs to that url. This means that the value
and hyperlinks
in the example above will look like this:
<HyperlinkText
value={'Vist my website and check out my portfolio!'}
hyperlinks={[
{ website: 'https://friendly-robot.netlify.com' },
{ portfolio: 'https://friendly-robot.netlify.com/portfolio' }
]}
baseStyle={styles.base}
linkStyle={styles.link}
/>
A style object to apply to all <Text>
elements.
A style object to apply only to hyperlink <Text>
elements.
Map hyperlinks
backwards as well, meaning if the link is provided in the string, every instance of it will be shortened to a keyword. Currently the opposite is true: keywords are turned into links.
License The MIT License Copyright (c) 2019 Andy Li