react-native-mentions icon indicating copy to clipboard operation
react-native-mentions copied to clipboard

Suggestions for Colouring Tags

Open droegier opened this issue 7 years ago • 8 comments

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.

droegier avatar May 23 '17 15:05 droegier

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

scf4 avatar Aug 27 '17 04:08 scf4

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.

harshq avatar Aug 28 '17 13:08 harshq

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.

scf4 avatar Aug 28 '17 17:08 scf4

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 )

harshq avatar Aug 29 '17 07:08 harshq

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

ezgif-2-31ac73bb17

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

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

scf4 avatar Aug 29 '17 19:08 scf4

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

scf4 avatar Aug 29 '17 20:08 scf4

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

asafron avatar Jan 15 '18 14:01 asafron

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.

nikhil-raina avatar Mar 12 '20 20:03 nikhil-raina