How to make custom mention value

[imran1234567]

@David Tabaka to @[123](David Tabaka)

[dabakovich]

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.

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

[WtfLaika]

@dabakovich Hi I have an android bug with a custom mention value(maybe it can be on ios, but I didn't check). Firstly textStyle doesn't work in triggersConfig(first video). Also when I add patternsConfig, input deletes first letter by itself and RenderSuggestions component doesn't work properly(second video). How can I apply styles to triggering text by using the last release react-native-controlled-mentions?

Screen.Recording.2022-12-19.at.13.18.04.mov

Screen.Recording.2022-12-19.at.13.15.16.mov

My code(In component is a lot of code I cut the main part):

const AppFormMentionField: React.FC<Props & TextInputProps> = ({
  name,
  label,
  numbersOfLines = 5,
  chosenValue,
  clearChosenValue,
  placeholder = 'Reply something...',
  styleInput,
  containerStyle,
  styleLabel,
  additionalStyleInput,
  maxLength = 300,
  suggestionsContainerStyle,
  suggestionContainerStyle,
  suggestionTitleStyle,
  listStyle = {},
  isBottomMentionSuggestionsRender = true,
  isHidenSudggestions,
  ...props
}) => {
//...component info
 const RenderSuggestions: FC<MentionSuggestionsProps> = ({keyword, onSelect}) => {
    if (keyword == null) {
      return null;
    }

    const data = profiles.filter(user => user.displayName.toLocaleLowerCase().includes(keyword.toLocaleLowerCase()));

    return (
      <FlatList
        showsVerticalScrollIndicator={false}
        keyboardShouldPersistTaps={'always'}
        scrollEnabled={true}
        renderItem={props => <RenderSuggestionItem onSuggestionPress={onSelect} {...props} />}
        data={data}
        keyExtractor={_keyExtractor}
        contentContainerStyle={[styles.contentContainerStyle, suggestionsContainerStyle]}
        style={{height: 200, zIndex: 200, position: 'absolute', overflow: 'scroll', bottom: 10, left: 50}}
      />
    );
  };

  const onBlur = () => setFieldTouched(name);
  const onChange = (text: string) => setFieldValue(name, text);
  const triggersConfig: TriggersConfig<'mention'> = {
    mention: {
      trigger: '@',
      textStyle: {color: 'dodgerblue', fontWeight: 'bold'},
    },
  };

  const patternsConfig = {
    mention: {
      pattern: /(@)[a-zA-Z0-9]+/gm,
      textStyle: {color: 'dodgerblue', fontWeight: 'bold'},
    },
  };

  // Config of highlightable patterns (like links, bold, italic text etc.)

  const {textInputProps, triggers} = useMentions({
    value,
    onChange,
    triggersConfig,
    patternsConfig,
  });

  return (
    <Fragment>
      {label && <Text style={[styles.label, styleLabel]}>{label}</Text>}
      <Pressable onPress={onFocusInput}>
        <View
          style={
            !!styleInput
              ? [
                  {
                    height: normalize(180),
                    borderWidth: normalize(1),
                    borderRadius: normalize(10),
                    width: width * 0.87,
                    borderColor: error && visible ? colors.red : colors.grey6,
                    maxHeight: 200,
                    zIndex: 1,
                    marginBottom: 50,
                  },
                  containerStyle,
                ]
              : [{}, containerStyle]
          }>
          <TextInput
            inputRef={inputRef}
            // value={value}
            multiline={true}
            maxLength={maxLength}
            spellCheck={true}
            numbersOfLines={numbersOfLines}
            autoCorrect={false}
            blurOnSubmit={true}
            style={styleInput ? {...(styleInput as {})} : [styles.input, {...(additionalStyleInput as {})}]}
            placeholder={placeholder}
            placeholderTextColor={colors.grey6}
            onBlur={onBlur}
            {...props}
            {...textInputProps}
          />

          {!styleInput && (
            <View style={styles.innerErrContainer}>
              <ErrorText error={error} visible={visible} />
            </View>
          )}
        </View>
      </Pressable>
      <RenderSuggestions {...triggers.mention} />


    </Fragment>
  );
};

Also my react-native info:
System:
OS: macOS 13.0.1
CPU: (8) arm64 Apple M1
Memory: 56.28 MB / 8.00 GB
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 19.2.0 - /var/folders/qy/wpyxmffx3l152qq1hgt2j00m0000gn/T/yarn--1671447103110-0.01379519541958163/node
Yarn: 1.22.18 - /var/folders/qy/wpyxmffx3l152qq1hgt2j00m0000gn/T/yarn--1671447103110-0.01379519541958163/yarn
npm: 8.19.3 - /opt/homebrew/bin/npm
Watchman: Not Found
Managers:
CocoaPods: 1.11.3 - /opt/homebrew/bin/pod
SDKs:
iOS SDK:
Platforms: DriverKit 22.1, iOS 16.1, macOS 13.0, tvOS 16.1, watchOS 9.1
Android SDK: Not Found
IDEs:
Android Studio: 2021.2 AI-212.5712.43.2112.8512546
Xcode: 14.1/14B47b - /usr/bin/xcodebuild
Languages:
Java: 11.0.17 - /usr/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: 17.0.2 => 17.0.2
react-native: 0.67.5 => 0.67.5
react-native-macos: Not Found
react-native-controlled-mentions: "^3.0.0-alpha.4",

npmGlobalPackages:
react-native: Not Found

[dabakovich]

Hey @WtfLaika! Thanks for your detailed feedback. Is your question still actual?