https://github.com/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.
https://github.com/ramprog/react-native-text-link
app format inside link native react text
Last synced: 11 months ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/ramprog/react-native-text-link
- Owner: RamProg
- Created: 2022-04-07T13:03:56.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2023-10-06T09:55:42.000Z (over 2 years ago)
- Last Synced: 2025-03-27T04:41:36.440Z (12 months ago)
- Topics: app, format, inside, link, native, react, text
- Language: TypeScript
- Homepage:
- Size: 81.1 KB
- Stars: 3
- Watchers: 1
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.MD
Awesome Lists containing this project
README
# 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:
```js
console.log('link to terms'),
},
{
text: 'Privacy Policy',
onPress: () => console.log('link to privacy'),
},
]}>
Please read our Terms & Conditions and our Privacy Policy.
```
## 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