[request] use custom patterns for mentions and hashtags

[efstathiosntonas]

Hi Andres, thanks again for the lib. It would be nice if we could use our own regex patterns for hashtags and mentions like react-native-parsed-text is doing it.

use case:

By adding custom patterns we can include the user id on the text string eg {id:1, mention:”andres”} but the user will only see @andres. This can came in handy when the user taps on the mention -> navigate to that user’s public profile.

I’ll post an example on how I’m achieving this with react-native-parsed-text.

[efstathiosntonas]

this is how text is stored on database:
@[johnonesix](qkkA1mR6A9PHkLjEEUcpOZtjSXI2) hey there!

These are the pattern props:

      {
        onPress: (text: string) => props.handleMentionPress(extractMentionUserId(text)),
        pattern: /((.)\[([^[]*)]\(([^(^)]*)\))/i,
        renderText: (matchingString: string) => renderMentionText(matchingString),
        style: { color: props.theme.green },
        suppressHighlighting: true
      },

extractMentionUserId function:

export const extractMentionUserId = (text: string) => {
  const pattern = /((.)\[([^[]*)]\(([^(^)]*)\))/i;
  const match = text.match(pattern);
  return `${match ? match[4] : [1]}`;
};

renderMentionText function:

export const renderMentionText = (matchingString: string) => {
  const pattern = /((.)\[([^[]*)]\(([^(^)]*)\))/i;
  const match = matchingString.match(pattern);
  return `${match ? match[2] + "" + match[3] : [1]}`;
};

using this approach everytime someone taps the mention I get the user id on the onPress function. Hope this helps a bit.

[andresribeiro]

Hey! I added customHyperlinks and onCustomHyperlinkPress on v1.0.4.

You can catch all mentions before sending to Hyperlinks somehow like this:

const myText = "@[johnonesix](qkkA1mR6A9PHkLjEEUcpOZtjSXI2) hey there!";

function getCustomHyperlinkMentions() {
	const mentions: { start: number; end: number; data: { userId: string } }[] =
		[];

	const regex = /((.)\[([^[]*)]\(([^(^)]*)\))+/gi;

	let match;

	while ((match = regex.exec(myText)) != null) {
		// mentions.push...
	}

	return mentions;
}

Then you'll just need to normalize the text before rendering the component, removing the users' id. In order not to have a conflict, you'll need to disable autoDetectMentions