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...
As you noticed, here I used editable={false} to make the TextInput not editable 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.
To unfocus a TextInput in React Native, we can use the Keyboard. dismiss method. to set the onSubmitEditing prop to Keyboard. dismiss .
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' .
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With