Actionable Text in React Native

November 25, 2015

With React Native, it is very easy to bind an action when a Text component is pressed by using the onPress props, however when you have a dynamic text and want to add press events to different parts corresponding to urls or emails it is a little bit trickier. In iOS it is possible to parse a text natively by using dataDetectorTypes but unfortunately the RCTTextView does not provide this option and it would need to be implemented for Android too.

So I decided to write a React Native Component to automatically parse a text and make multiple interactive Text components from it.

Here comes react-native-parsed-text, to parse a text just use a RegExp to find the part you are looking for, you can also use one of the predefined type (url, phone or email).

In Action:

Comments

comments powered by Disqus