RamProg / react-native-text-link

Simple module for React Native Apps to allow easy links inside your text, without any positioning issues. This solves the cases when a TouchableOpacity/Pressable has a different positioning than regular text.

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

License and Constributions

MIT License and thanks to react-native-parsed-text