React-native-text-link NPM

TextLink

When you need to insert a link inside a text in React Native, you might notice that the links have a different positioning, they are usually around 5 pixels under the line. This happens because the link is actually inside a View (wrapped in a Pressable/TouchableOpacity), so the positioning of the elements is different between a Text and a View.

This package aims to easily solve this while still looking clean. Using this package you will be able to provide a different Style while the link is being pressed.

Usage

First install:

npm i react-native-text-link

Then import:

import  TextLink  from  'react-native-text-link';

Then use:

<TextLink links={[
	{
		text: 'Terms & Conditions',
		onPress: () =>  console.log('link to terms'),
	},
	{
		text: 'Privacy Policy',
		onPress: () =>  console.log('link to privacy'),
	},
]}>
Please read our Terms & Conditions and our Privacy Policy.
</TextLink>

Features

props	type	use
textStyle	StyleProp	default style for text
textLinkStyle	StyleProp	style for the links
pressingLinkStyle	StyleProp	style for the links while they are being pressed
links	{ text: string, onPress: () => void }	strings that will act as links and the action they will trigger
children	string	the whole text in which the links will be found