Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/software-mansion/react-native-enriched

Rich Text Editor for React Native
https://github.com/software-mansion/react-native-enriched

react-native rich-text-editor text-input

Last synced: 2 months ago
JSON representation

Rich Text Editor for React Native

Awesome Lists containing this project

README 

          
react-native-enriched by Software Mansion



# react-native-enriched



`react-native-enriched` is a powerful React Native library that exposes a rich text editor component:



- ⚡ Fully native text input component

- 🕹️ Synchronous text styling

- 🔍 Live styling detection and HTML parsing

- 🎨 Customizable styles

- 📱 Mobile platforms support

- 🏛 Supports only the New Architecture



`EnrichedTextInput`, the rich text editor component is an uncontrolled input. This means that it doesn't use any state or props to store its value, but instead directly interacts with the underlying platform-specific components. Thanks to this, the component is really performant and simple to use while offering complex and advanced features no other solution has.



![react-native-enriched-demo](https://github.com/user-attachments/assets/a2c968c0-9b85-492f-ac71-af64ef231fbf)



Since 2012 [Software Mansion](https://swmansion.com) is a software agency with experience in building web and mobile apps. We are Core React Native Contributors and experts in dealing with all kinds of React Native issues.

We can help you build your next dream product –

[Hire us](https://swmansion.com/contact/projects?utm_source=react-native-enriched&utm_medium=readme).



## Table of Contents



- [Prerequisites](#prerequisites)

- [Installation](#installation)

- [Usage](#usage)

- [Supported Tags](#supported-tags)

- [Non Parametrized Styles](#non-parametrized-styles)

- [Links](#links)

- [Mentions](#mentions)

- [Inline Images](#inline-images)

- [Style Detection](#style-detection)

- [Other Events](#other-events)

- [Context Menu Items](#context-menu-items)

- [Customizing \ styles](#customizing-enrichedtextinput--styles)

- [API Reference](#api-reference)

- [Known limitations](#known-limitations)

- [Future Plans](#future-plans)

- [Contributing](#contributing)

- [License](#license)



## Prerequisites



- `react-native-enriched` currently supports only Android and iOS platforms

- It works only with [the React Native New Architecture (Fabric)](https://reactnative.dev/architecture/landing-page) and supports following React Native releases: `0.81`, `0.82`, `0.83`, `0.84` and `0.85`.

- If you would like to use `react-native-enriched` in React Native `0.79` or `0.80` use `react-native-enriched 0.4.x`.



## Installation



### Bare react native app



#### 1. Install the library



```sh

yarn add react-native-enriched

```



#### 2. Install iOS dependencies



The library includes native code so you will need to re-build the native app to use it.



```sh

cd ios && bundler install && bundler exec pod install

```



### Expo app



#### 1. Install the library



```sh

npx expo install react-native-enriched

```



#### 2. Run prebuild



The library includes native code so you will need to re-build the native app to use it.



```sh

npx expo prebuild

```



> [!NOTE]

> The library won't work in Expo Go as it needs native changes.



## Usage



Here's a simple example of an input that lets you toggle bold on its text and shows whether bold is currently active via the button color.



```tsx

import { EnrichedTextInput } from 'react-native-enriched';

import type {

  EnrichedTextInputInstance,

  OnChangeStateEvent,

} from 'react-native-enriched';

import { useState, useRef } from 'react';

import { View, Button, StyleSheet } from 'react-native';



export default function App() {

  const ref = useRef(null);



  const [stylesState, setStylesState] = useState();



  return (

    

       setStylesState(e.nativeEvent)}

        style={styles.input}

      />

       ref.current?.toggleBold()}

      />

    

  );

}



const styles = StyleSheet.create({

  container: {

    flex: 1,

    justifyContent: 'center',

    alignItems: 'center',

  },

  input: {

    width: '100%',

    fontSize: 20,

    padding: 10,

    maxHeight: 200,

    backgroundColor: 'lightgray',

  },

});

```



Summary of what happens here:



1. Any methods imperatively called on the input to e.g. toggle some style must be used through a `ref` of `EnrichedTextInputInstance` type. Here, `toggleBold` method that is called on the button press calls `ref.current?.toggleBold()`, which toggles the bold styling within the current selection.

2. All style state information is emitted by the `onChangeState` event. Set up a proper callback that accepts a `NativeSyntheticEvent` argument. The event payload provides a nested object for each style (e.g., `bold`, `italic`), containing three properties to guide your UI logic:



- `isActive`: Indicates if the style is currently applied (highlight the button).

- `isBlocking`: Indicates if the style is blocked by another active style (disable the button).

- `isConflicting`: Indicates if the style is in conflict with another active style.



## Supported Tags



`react-native-enriched` uses both standard and custom HTML tags in its output and accepts them as input.



Not all styles can be combined freely. There are two kinds of restrictions:



- **Conflicting** - toggling a style that conflicts with an already active style will automatically remove the active one. For example: toggling `
` on a `
` paragraph will remove the blockquote and apply the heading.

- **Blocking** - a style that is blocked cannot be toggled at all while the blocking style is active. For example: `` is blocked inside ``, so the bold cannot be applied where codeblock is active.



These states are reported via the [onChangeState](docs/API_REFERENCE.md#onchangestate) event (`isConflicting` and `isBlocking` properties).



### Inline tags



| Style         | HTML tag    | Conflicts with               | Blocked by             |

| ------------- | ----------- | ---------------------------- | ---------------------- |

| Bold          | ``       | --                           | ``          |

| Italic        | ``       | --                           | ``          |

| Underline     | ``       | --                           | ``          |

| Strikethrough | ``       | --                           | ``          |

| Inline code   | ``    | ``, ``           | ``, `` |

| Link          | ``       | ``, ``, `` | ``, `` |

| Mention       | `` | ``, ``              | ``, `` |

| Image         | ``     | ``, ``           | ``               |



> [!NOTE]

> Headings also block bold when `bold: true` is set on the heading style in the [htmlStyle](docs/API_REFERENCE.md#htmlstyle) prop. In that case, the heading itself renders as bold, so toggling bold on top of it is redundant and therefore blocked.



### Paragraph tags



Some paragraph styles are container elements that wrap each line of text inside them with an **inner content tag**. For example: each line inside `