Detectable Links in React Native
Having some iOS knowledge, I have a good idea on how to get things done in the Standard NSLibrary.
My most recent goal in my React Native Note App is auto detect links. This is actually pretty trivial in iOS and easily accomplished by wrapping NSDataDetector around the suggested text content.
NSDataDetector *detector = [NSDataDetector
dataDetectorWithTypes: NSTextCheckingTypeLink | NSTextCheckingTypePhoneNumber
]
Unfortunately there is library that quite does it all in JavaScript (That I could find). I did find a tool that does half the job and its AutoLinker. The AutoLinker library will convert any potential links in the suggested text and convert it to raw html.
let htmlRenderedNote = AutoLinker.link(noteText, {phone: true, email: true});
Since I couldn’t just display the raw html on an iPhone and expect users to figure it out, I needed something that could render the this markup.
I eventually found the react-native-htmlview library, which allows me to pass raw html to a HTMLView component and have it render clickable links.
This was a very nice tool to get me almost there, but I still needed the links to open their respective apps when clicked — For example, If I had a email link, I needed it to open the mail app.
To accomplish this basic app/link routing I used the LinkingIOS library, which comes from the Standard React Native library.
Putting this all together I now have what I was looking for and that’s detectable links in my note app. This was definitely a lot more steps than can be done in a Swift/iOS combo, but that has more to do with React Native being such a young framework. I am sure as time goes on, some steps can be combine together.
You can see the code complete implementation here.