setMention method on ref does not trigger mention insertion

[weiningtry7]

To Reproduce
Steps to reproduce the behavior:

ref.current?.setMention('@', `@${item.name}`, {
      id: item.id,
      type: 'user',
    });.

Expected behavior
The input field should replace the trigger character @ with the mention label (e.g., @johndoe) and treat it as an atomic enriched entity. The cursor should move to the position immediately following the mention.

[kacperzolkiewski]

Hi @weiningtry7,
Could you provide a bit more information about the issue? I tried reproducing it in our example app, and everything seems to work correctly when I call, for example:

ref.current?.setMention('@', `@John Doe`, {
      id: '1',
      type: 'user',
  });

Could you also share a minimal reproduction example if possible?

[weiningtry7]

repo: https://github.com/weiningtry7/TestEnrichInput.git

1. yarn install
2. npx pod-install
3. open TestEnrichInput.xcworkspace with Xcode or yarn android
   Thanks for the follow-up. I've conducted a deeper investigation using a fresh project created via React Native CLI (RN 0.85.0).
   Even in a minimal setup where I manually trigger setMention via a button, there is no response.

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 */

import { NewAppScreen } from '@react-native/new-app-screen';
import { Pressable, StatusBar, StyleSheet, Text, useColorScheme, View } from 'react-native';
import {
  SafeAreaProvider,
  useSafeAreaInsets,
} from 'react-native-safe-area-context';
import { EnrichedTextInput } from 'react-native-enriched';
import type {
  EnrichedTextInputInstance,
  OnChangeStateEvent,
} from 'react-native-enriched';
import { useRef } from 'react';
function App() {
  const isDarkMode = useColorScheme() === 'dark';

  return (
    <SafeAreaProvider>
      <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
      <AppContent />
    </SafeAreaProvider>
  );
}

function AppContent() {
  const safeAreaInsets = useSafeAreaInsets();
  const ref = useRef<EnrichedTextInputInstance>(null);

  const onPressSetMention = () => {
    console.log('>>>onPressSetMention<<<')
    ref.current?.setMention('@', '@kangkang', { "user-id": 'userid' })
  }

  const onPressSetImage = () => {
    console.log('>>>onPressSetImage<<<')
     ref?.current?.setImage('https://serverlist-yh.wmupd.com/notice_test5/pic/01.gif', 50, 50)
  }
  return (
    <View style={styles.container}>

      <EnrichedTextInput
        ref={ref}
        style={styles.input}
        placeholder='write something ...'
        htmlStyle={{ mention: { backgroundColor: '#fff', textDecorationLine: 'none', color: '#348FFF' } }}
      />
      <View style={{ flexDirection: 'row', alignItems: 'center' }}>
        <Pressable onPress={onPressSetMention}>
          <View style={styles.btn}>
            <Text>{'setMention btn'}</Text>
          </View>
        </Pressable>
        <Pressable onPress={onPressSetImage}>
          <View style={styles.btn}>
            <Text>{'setImage btn'}</Text>
          </View>
        </Pressable>
      </View>
      <NewAppScreen
        templateFileName="App.tsx"
        safeAreaInsets={safeAreaInsets}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  input: {
    width: '100%',
    fontSize: 20,
    padding: 10,
    minHeight: 200,
    maxHeight: 600,
    marginTop: 100,
    backgroundColor: 'lightgray',
  },
  btn: { 
    paddingHorizontal: 10, 
    paddingVertical: 5, 
    borderRadius: 6, 
    backgroundColor: '#348FFF' ,
    marginHorizontal: 10
  }
});

export default App;

[weiningtry7]

2026-05-15.14.14.34.mov