https://github.com/cawfree/react-native-twitter-textview

A <TextView/> component for React Native built on top of twitter-text linkification.
https://github.com/cawfree/react-native-twitter-textview

hashtags link mention react react-native rn tags twitter

Last synced: about 2 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/cawfree/react-native-twitter-textview
• Owner: cawfree
• License: mit
• Created: 2019-08-09T05:13:32.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-06T11:46:39.000Z (almost 2 years ago)
• Last Synced: 2024-09-18T16:45:30.769Z (3 months ago)
• Topics: hashtags, link, mention, react, react-native, rn, tags, twitter
• Language: JavaScript
• Size: 2.66 MB
• Stars: 75
• Watchers: 3
• Forks: 21
• Open Issues: 37
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-native-twitter-textview

A `` component for [React Native](https://facebook.github.io/react-native) and [React Native Web](https://github.com/necolas/react-native-web) that automatically detects **#hashtags** and **@mentions**.





  



## 🚀 Getting Started

Using [`npm`](https://www.npmjs.com/package/react-native-twitter-textview):

```

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

```

Using [`yarn`](https://www.npmjs.com/package/react-native-twitter-textview):

```

yarn add react-native-twitter-textview

```

## ✍️ Usage

It's super easy; just replace your React Native [``](https://facebook.github.io/react-native/docs/text.html) component with a [``](./TwitterText/src/components/TwitterTextView), and there you go!

```javascript

const App = () => {

  const [value, onChangeText] = useState('');

  return (

    

      

      

        {value}

      

    

  );

}

```

## ✍️ Input

Are you looking for a similar component for tagged ``? If so, please check out [**react-native-segmented-text-input**](https://github.com/cawfree/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](https://opensource.org/licenses/MIT)