cawfree/react-native-twitter-textview

A <TextView/> component for React Native built on top of twitter-text linkification.

react-native-twitter-textview

A <Text/> component for React Native and React Native Web that automatically detects #hashtags and @mentions.

🚀 Getting Started

Using npm:

npm install --save react-native-twitter-textview

Using yarn:

yarn add react-native-twitter-textview

✍️ Usage

It's super easy; just replace your React Native <Text /> component with a <TwitterTextView />, and there you go!

const App = () => {
  const [value, onChangeText] = useState('');
  return (
    <View
      style={StyleSheet.absoluteFill}
    >
      <TextInput
        onChangeText={onChangeText}
        value={value}
        placeholder="Type some #hashtags or @mentions to get started."
        multiline
        numberOfLines={4}
      />
      <TwitterTextView
        style={styles.twitterTextView}
        hashtagStyle={styles.hashtagStyle}
        mentionStyle={styles.mentionStyle}
        linkStyle={styles.linkStyle}
        emailStyle={styles.emailStyle}
      >
        {value}
      </TwitterTextView>
    </View>
  );
}

✍️ Input

Are you looking for a similar component for tagged <TextInput/>? If so, please check out react-native-segmented-text-input.

📋 Props

---

Prop	Type	Default	Required	Description
children	string	''	No	The text to render.
extractHashtags	bool	true	No	Whether you wish to support hashtags.
onPressHashtag	func	(e, hashtag) => null	No	Called when a detected hashtag is clicked.
hashtagStyle	shape[object Object]	styles.linkStyle	No	Hashtag style.
extractMentions	bool	true	No	Whether you wish to support mentions.
onPressMention	func	(e, hashtag) => null	No	Called when a detected mention is clicked.
mentionStyle	shape[object Object]	styles.linkStyle	No	Mention style.
extractLinks	bool	true	No	Whether you wish to support links.
onPressLink	func	(e, link) => Linking.openURL(link)	No	Called when a detected link is clicked.
linkStyle	shape[object Object]	styles.linkStyle	No	Link style.
extractEmails	bool	true	No	Whether you wish to support emails.
onPressEmail	func	(e, link) => Linking.openURL(link)	No	Called when a detected email is clicked.
emailStyle	shape[object Object]	styles.linkStyle	No	Email style.

✌️ License

MIT

react-native-twitter-textview's Issues

Email addresses causing mentions to appear in certain context

I've run into an issue where if an email address is in the middle of some text, like the example of the first card of the screenshot below, it seems to add everything starting with the @ and turning it into a mention. If no other text is after the email address, things work as expected.

Adding extractEmails={false} fixes the addition of the mention but breaks the email click functionality.

I will see if I can figure out what is going on but if anyone else can help, it'd be much appreciated. I suspect part of it has to do with the regex patterns defined...

A clickable hashtag includes a space in prefix or suffix

@cawfree, thank you for sharing this great component!
A clickable hashtag, as well as mention, includes a space in prefix or suffix. e.g. _hashtag (_ is space)

additional text appended for orginal

i have passed data like '@www.google.com @shri' its result in @www.www.google.com @shri

Email address taken as mentions

I am using the component for a description field. It works all fine for url and mentions, but when it comes to an email address it will only take the @gmail as a mention and ignore the rest of the address.
Ex: myemail**@gmail**.com

Warning: Each child in a list should have a unique "key" prop.

Hi,

I have a fix for the warning above, how can I send you a PR?

unicode tags and links.

It can't detect unicode hashtags, mentions or links.

Disable clickable on normal text else the active clickables like hashtags and mentions

Typescript Support

Great Component! Do you plan to support typescript?

Skip line ignored after parsed text

Hello, when the text contains any skip line character it gets ignored after the parse for finding mentions.

Ex:
Original Text
Hello this is my first paragraph, it will be followed by a empty line.

Second paragrah is here!.

Visible text
Hello this is my first paragraph, it will be followed by a empty line.
Second paragrah is here!.

Can't detect underscore in mention

Hi @cawfree and @bjacog ,

Another good package of yours ( the other one I found useful was twitter native embed ).
The package seems to not properly detect _ when in mention

This is the tweet link : https://twitter.com/_0nk4r_/status/1295171147936366593

and this is the tweet_text :

@impratikdabhi @trippy_bhaiya @harshbothra_ @manas_hunter @ADITYASHENDE17 @MrCyberwarrior @mrunal110 @darklotuskdb @vasim_infosec @aaditya_purani @udit_thakkur @iDiablo5 Note! People see that these guys making 8k a week and buying a phones, bikes and shit but they don't see they have also started from 0.They have invested shit ton of time and efforts  to get there. So new Fellas drop your $$$$ shit and work hard and persistent .#bugbountytip

hashtags and mentions in CJK characters

@cawfree, please consider to support hashtags and mentions in CJK characters.