Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React Native TextInput with editable=true and dataDetectorTypes

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
like image 893
adamF Avatar asked Apr 26 '20 18:04

adamF


People also ask

How do you make TextInput non editable in React Native?

As you noticed, here I used editable={false} to make the TextInput not editable in React Native.

How align TextInput in React Native?

style={{ //... flex:1, textAlignVertical: "top", // android fix for centering it at the top-left corner //... }} Give textAlignVertical : "top" that will solve your issue.

How do you Unfocus TextInput React Native?

To unfocus a TextInput in React Native, we can use the Keyboard. dismiss method. to set the onSubmitEditing prop to Keyboard. dismiss .

How do you align placeholders in React Native?

To change TextInput placeHolder alignment with React Native, we can set the textAlign style to 'center' . to align the placeholder at the center of the screen by setting textAlign set to 'center' .


1 Answers

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.

like image 66
SKeney Avatar answered Oct 21 '22 13:10

SKeney