react-native-enriched-html

react-native-enriched-html is a powerful React Native Rich Text solution:

• ⚡ Fully native input and display components (Supports New Architecture only)
• 💻 HTML-based parsing with live, synchronous text styling
• 🎨 Fully customizable styles for seamless UI integration
• 🌐 Solid mobile support with an experimental Web implementation

EnrichedTextInput, the rich text input 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.

EnrichedText is the display component designed to work seamlessly with EnrichedTextInput. It flawlessly renders any HTML generated by the input, while a shared, customizable styling API guarantees perfect 1:1 visual consistency between editing and displaying.

Prerequisites

• react-native-enriched-html currently supports Android and iOS, Web implementation is still experimental.
• It works only with the React Native New Architecture (Fabric) and supports following React Native releases: 0.81, 0.82, 0.83, 0.84 and 0.85.

Installation

Bare react native app

1. Install the library

yarn add react-native-enriched-html

Tip

To try the latest features before they land in a stable release, install the nightly build:

yarn add react-native-enriched-html@nightly

Nightly versions are published to npm automatically and may contain breaking changes.

2. Install iOS dependencies

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

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

Expo app

1. Install the library

npx expo install react-native-enriched-html

2. Run prebuild

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

npx expo prebuild

Note

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

Known limitations

• Only one level of lists is supported. We currently do not support nested lists.

Future Plans

• Web support: currently in the experimental stage. Details in docs/WEB.md.

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

react-native-enriched-html library is licensed under The MIT License.

---

XYZ Library and SWMs involvement

Since 2012 Software Mansion 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.