Added optional getMentionValue for allowing custom mention values

[rgbedin]

In order to be able to achieve custom mention values that does not follow ${trigger}[name](id), an optional getMentionValue was added to the MentionPartType type.

By modifying the getMentionValue() function from utils.ts we are now able to allow the consumer of the library to specify whatever pattern they want for the mention transformation.

The consumer also has to specify pattern and parsePattern so the library can also parse the text in the input properly as the user types. Maybe there is a better way of combining all of those. I am open to suggestions.

Example of code that allows the user to specify a different pattern (i.e. \uFFFF@[Jack](123)):

export const MyMentionTextInput: React.FC = () => {

  const getMyMentionValue = (
      trigger: string,
      id: string,
      name: string
    ): string => {
      return `\uFFFF${trigger}[${name}](${id})`;
   };

  const myMentionRegex = /\uFFFF((.)\[([^[]*)]\(([^(^)]*)\))/gi;

  return (
    <MentionText
      partTypes={[
        {
          trigger: '@',
          pattern: myMentionRegex,
          getMentionValue: getMyMentionValue,
          parsePattern: ([, , trigger, name, id]) => {
            return {
              original: getMyMentionValue(trigger, id, name),
              trigger,
              name,
              id
            };
          },
          renderSuggestions
        }
      ]}
    />
  );
};

You can easily combine this with react-native-parsed-text and use myMentionRegex to also convert the text into a human-readable format as you wish.

[dabakovich]

Thanks for your feedback and great suggestion!

I'm glad to say that v3 release is coming with few core improvements. One of the new features is full support of multiple characters trigger and custom regex pattern for mentions. In the update, I used similar logic that you described here.

You can find examples of using new v3 release here: https://github.com/dabakovich/react-native-controlled-mentions/blob/3.0/example/mentions-functional-component.tsx

To test alpha pre-release please, install the library using next command:

yarn add react-native-controlled-mentions@alpha
// or
npm install --save react-native-controlled-mentions@alpha