-
Notifications
You must be signed in to change notification settings - Fork 24k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Text] Best practice to linkify text? #3148
Comments
I use this in one app: 'use strict';
import React from 'react-native';
import { Text } from 'react-native';
import Link from 'Link';
import _ from 'lodash-node';
import Colors from 'Colors';
/**
* Adds links to text with without HTML tags
* 'This will turn into a link: http://www.facebook.com'
* Use HTMLView for actual HTML.
*/
export default class HyperText extends React.Component {
render() {
var contents;
if (_.isString(this.props.children)) {
let tokens = this.props.children.split(/\s/);
contents = _.map(tokens, (token, i) => {
let hasSpace = i !== (tokens.length - 1);
let maybeSpace = hasSpace ? ' ' : '';
if (token.match(/^http\:\//)) {
return (
<Link
key={i}
to={{uri: token}}
style={{color: Colors.tint}}>
{token}{maybeSpace}
</Link>
);
} else {
return token + maybeSpace;
}
});
} else {
console.warn('Attempted to use <HyperText> with nested components. ' +
'This component only supports plain text children.');
return <Text {...this.props} />;
}
return (
<Text {...this.props}>
{contents}
</Text>
);
}
}
These types of questions are best suited for StackOverflow though, so if this answer isn't sufficient feel free to re-post there! 😄 🌈 |
This is awesome, thanks! |
Hi @brentvatne, can I get more explanation on how to use your component please? Posted here (http://stackoverflow.com/questions/34933860/react-native-how-to-detect-link-form-string-and-convert-to-a-link), thank you! |
@ranyefet you can checkout react-native-hyperlink. It's super simple to use, all you have to do is wrap your views within <Hyperlink onPress={(url) => alert(url)} linkStyle={{fontSize:16, color:'blue'}}>
<Text style={{fontSize:15}}>This text will be parsed to check for clickable strings like https://github.com/obipawan/hyperlink and made clickable.</Text>
</Hyperlink> |
@brettdonald you most definitely can :) There's a |
Your solution is aplicable to android? because it seems that in android it is not possible for the If indeed it is a case applicable only for ios. The best solution is:
I'm still searching this implementation in android, since dataDetectorTypes is only available in ios. react-native-hyperlinked-text seems to be the solution, I'll try it |
this works for me (tested on android)
|
Thanks @pstanton your solution works amazing!! |
Hi all,
In my app I have text that returned from the server that contains URLs, i.e:
I want to replace the URLs in the text with custom component that will open the links in embedded web view.
The problem is that I can't just replace
http://google.com
with<Link to="http://google.com" />
because its just replacing strings. If I understand correctly I need to transform the text into array like:I found a similar issue #614 but it looks kinda messy.
Is there a recommended way to do it?
Thanks!
The text was updated successfully, but these errors were encountered: