Skip to content

Latest commit

 

History

History
44 lines (33 loc) · 1.42 KB

README.MD

File metadata and controls

44 lines (33 loc) · 1.42 KB

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