React Native TextInput with editable=true and dataDetectorTypes

Question

I'm trying to create a TextInput component that is both editable and has clickable urls. According to the react native docs, the dataDetectorTypes prop is only supported when editable={false}.

Determines the types of data converted to clickable URLs in the text input. Only valid if multiline={true} and editable={false}.

Has anyone found a way around this limitation? It seems like it should be possible. The behavior I want is...

1. Tapping on the url should open it in a browser
2. Tapping anywhere else should start editing at that position
3. It's ok if the link is no longer clickable when the TextInput currently has focus

Answer 1

The only thing I can think of to get around this is to store the editable value in state and then upon clicking some Edit button will change the state from editable to true.

onBlur would switch this state back to false

I haven't tried this before though so just a suggestion on attempting workarounds or finding some middle ground between the two.

Answer 2

My suggestion is to place the input field with the url centered inside a bigger div.

Make the input field not much bigger the text inside it and when you click it trigger some function that redirects to the page on your state. And when you click on the outer div you trigger a function to focus on the input field and edit its value.