Suggestions for Colouring Tags

[droegier]

Hello, I love this MentionsTextInput component!

Now, I am facing the following challenge : I need to give a different font colour to the mention that the user has selected (like mentions on Facebook). For this I will have to split (or embed) the TextInput component. This seems quite difficult/complex.

Has anyone already given some thought on how to approach this?

Actually, what I need is Facebook's Draft.js capabilities on React Native. So far, this module is the thing that brought me the closest. Any suggestion on which direction to move forward, is highly appreciated!

Thank you.

[scf4]

@droegier any progress on this? Draft.js for react native would be fantastic.

[harshq]

This is not possible to do at the moment since you cant nest other components inside a textInput. Love to implement something like that though. Any suggestions are welcome.

[scf4]

Is it possible to use a regular text component to render the input's text?

Or how about simply putting a text component (with the same text) behind the input, with a background color on the mention text.

[harshq]

Kinda feel like it would not be the ideal solution since we will have to manually calculate cursor positions.( eg: text tag will take more space than a text )

[scf4]

@harshq Not necessary since it's just the background color, take a look:

https://gist.github.com/scf4/012e9f615f6b43a1712a083b162afd94

The method for splitting words could be done better I'm sure.

[scf4]

Actually this becomes problematic when you want to scroll in the input. But perhaps there's a solution?

[asafron]

@droegier Have you found any solution for coloring the text only after some mention was selected? Maybe using some king of a regex?

[nikhil-raina]

Actually this becomes problematic when you want to scroll in the input. But perhaps there's a solution?

Has this been addressed? There seems to be something off when trying to scroll the text box from the Android platform. The keyboard glitches and disappears all the time. Even if the '@' has been entered or not.