5 react-native-enriched-html Use Cases You Might Not Know About
Igor Furgala•Sep 29, 2026•7 min readThe main mission of react-native-enriched-html is to become the default and widely used HTML-based rich text editor. From the very beginning, we’ve wanted to develop a solution built on native primitives that offers a clean API and excellent performance.
However, EnrichedTextInput is more than just a rich text editor; many of its features can be used even when you don’t need to work with HTML. The TextInput you’re familiar with from React Native works for basic use cases, but it has certain limitations that react-native-enriched-html can address.
Emoji picker
Building a proper emoji picker can be more difficult than it initially seems. React Native TextInput allows you to paste emojis, and you can also replace text with a properly rendered icon yourself. The challenge with this approach is maintaining adequate app performance. Processing text on the JavaScript side can lead to a drop in FPS on low-end devices. With react-native-enriched-html, you can avoid this problem; detecting changes and replacing the text with the appropriate emoji takes place entirely on the native side, ensuring top-notch performance.
In react-native-enriched-html, we’ve built a highly universal solution based on mentions. It’s useful not only for standard channel or user tags, but also for more advanced operations, such as building an emoji picker.
Take a look at the code snippet below. What’s important from the library’s API perspective is properly defining the mentionIndicators array. This array is responsible for detecting characters that signal the start of a mention – in our case, the start of an emoji.
Using the onStartMention and onEndMention props, you can automatically open and close the dropdown for the emoji currently being typed. The onChangeMention prop allows you to filter the emoji list based on the text currently being typed. Once the user selects the appropriate emoji from the list, or by typing it out exactly, you can set it by calling the ref method editorRef.current?.setMention.
const editorRef = useRef<EnrichedTextInputInstance>(null);
const [query, setQuery] = useState<string | null>(null);
const setEmoji = (emoji: Emoji) => {
editorRef.current?.setMention(':', emoji.char);
setQuery(null);
};
<EnrichedTextInput
ref={editorRef}
mentionIndicators={[':']}
htmlStyle={htmlStyle}
onStartMention={() => setQuery('')}
onChangeMention={({ text }) => {
const closed = text.endsWith(':');
const emoji = closed ? findByShortcode(text.slice(0, -1)) : undefined;
if (emoji) return insert(emoji);
setQuery(closed ? text.slice(0, -1) : text);
}}
onEndMention={() => setQuery(null)}
/>
{query !== null && <EmojiList items={filterEmojis(query)} onSelect={setEmoji} />}You can play around with the interactive example we've included in our documentation.
Slash commands
If you've ever used Slack or Discord, or another feature-rich text editor, you may be familiar with custom commands that you can execute directly in the input field. This is a good way for users to quickly access specific features without having to search through the app's interface. All the user has to do is know the name of the command and type it directly into the chat.
With react-native-enriched-html, you can build this functionality using exactly the same API as in the emoji picker. The difference between these two cases lies in which mentionIndicator you use and how you handle the situation when the user enters or selects the appropriate command.
<EnrichedTextInput
ref={editorRef}
mentionIndicators={['/']}
htmlStyle={htmlStyle}
onStartMention={() => setQuery('')}
onChangeMention={({ text }) => setQuery(text)}
onEndMention={() => setQuery(null)}
/>
{query !== null && (
<CommandList
items={filterCommands(query)}
onSelect={(command) => {
editorRef.current?.setMention('/', command.name);
setQuery(null);
}}
/>
)}Custom native context menu
Native platforms, both Android and iOS, offer the ability to customize the context menu for selected text. Many apps use this feature to provide users with additional options, such as automatic text translation, the recently popular text rewriting using AI tools, or custom formatting. Unfortunately, React Native’s TextInput doesn’t support such advanced features, but with EnrichedTextInput, you can implement them very easily.
EnrichedTextInput provides the contextMenuItems prop, which accepts an array defining which items should appear in the context menu alongside the system ones. Each item allows you to define its own label, when it should be displayed, and what should happen when it is pressed. Importantly, the onPress callback provides the current text, selection, and range of the selected text. You don’t need to build this logic yourself – it’s provided out of the box.
<EnrichedTextInput
contextMenuItems={[
{
text: '✨ Rewrite with AI',
onPress: rewrite,
},
{
text: 'Make it shorter',
onPress: shorten,
},
{
text: 'Translate to Spanish',
onPress: translate,
},
]}
/>You can find a detailed guide on how to use this API in our documentation.
Customizable links detection
One of the core features of most text editors is robust link handling. Whether the application is a document editor or a chat feature in a social media app, users expect links they type or paste to be formatted correctly (usually underlined and highlighted).
The app should also allow users to customize the rules for detecting such links; in some apps, only valid web URLs should be clickable, while in others, a link could be, for example, a navigation to another screen or a deep link with a custom domain.
EnrichedTextInput has a linkRegex prop that allows you to specify when text should be detected as a link; by default, all valid web links are detected. In addition, by using the htmlStyle prop, you can change how the link is displayed to match the styling of your app's UI.
<EnrichedTextInput
linkRegex={/enriched:\/\/[\w/-]+/}
htmlStyle={{ a: { color: '#7C3AED', textDecorationLine: 'none' } }}
/>Pasting images
Pasting photos into a text input field is a fairly common feature in apps. Sometimes apps render the photo directly in the text input field, and sometimes they capture the pasted image and display it elsewhere.
react-native-enriched-html supports both of these approaches; it is up to the developer using the library to decide how to handle pasting photos. This is a feature that is not supported by TextInput in React Native.
The functionality for pasting images in react-native-enriched-html is based on an event callback onPasteImages. When an image is pasted into an input field, the library emits an event containing an array of image URLs along with their height, width, and MIME type. The pasted image may come directly from the device or from the internet; the only difference will be the file path.
It is then up to the developer to decide how to handle such an image. Some apps require rendering an image directly within the text (the ref.current?.setImage method will be helpful here), while in other apps you might want to render the image in a separate component or send it directly to your server. Regardless of your requirements, you should be able to achieve your goal with EnrichedTextInput.
<EnrichedTextInput
ref={editorRef}
onPasteImages={({ nativeEvent: { images } }) => {
for (const image of images) {
const scale = Math.min(1, MAX_WIDTH / image.width);
editorRef.current?.setImage(image.uri, image.width * scale, image.height * scale);
}
}}
/>Here you can find the complete documentation regarding pasting images and rendering images within text.
Summary
As you can see, the name “enriched” refers not only to rich text processing but also to being rich in features that were previously unsupported or were much more difficult to implement.
The ecosystem was fragmented; implementing such features would require the use of many different libraries. At react-native-enriched-html, we’re constantly working to develop new features and make not only the library but the entire React Native ecosystem better.
Don't forget to visit our landing page, where you can learn about other libraries in the enriched family, check out the detailed documentation, or play around with the interactive examples.