A <Text/> component for React Native and React Native Web that automatically detects #hashtags and @mentions.
Using npm:
npm install --save react-native-twitter-textview
Using yarn:
yarn add react-native-twitter-textview
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> ); }
Are you looking for a similar component for tagged <TextInput/>? If so, please check out react-native-segmented-text-input.
| 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. |