-
Notifications
You must be signed in to change notification settings - Fork 2
Installation
React Native Rich Text Editor contains native iOS and Android code built with Expo Modules. Use an Expo development build or a bare React Native app with Expo Modules configured. It does not run in Expo Go.
Replace @apollohg/react-native-prose-editor with @apollohg/react-native-rich-text-editor in your dependencies, imports, and Expo config plugin entry. Install only one package name to avoid duplicate native modules, then regenerate and rebuild your native app using the steps below. The package rename retains native module names. Version 2.x also changes the theme and addon APIs and removes V2 from public type names; follow Migration Guide when upgrading.
Existing releases under the old name remain available. You can keep your current dependency and imports until you choose to migrate.
- Expo 52 or later
- React Native 0.76 or later
- React 18 or later
-
@expo/vector-icons14 or later
The checked-in example is currently validated with Expo SDK 57, React Native 0.86, and React 19.2.3; these are example/validation versions, not published minimum versions. The package supports iOS 16.4+ and Android 7+ (API 24). RichTextViewer is New Architecture-only.
This is a hard Android requirement for ReactNativeProseEditor: its Gradle build fails unless the host project enables the React Native New Architecture. Add this exact property to android/gradle.properties:
newArchEnabled=trueThe Expo config plugin does not enable the New Architecture. It only adds the JNA packaging exclusions described below.
These docs cover the 2.x stylesheet and addon APIs. Select the intended package version explicitly when upgrading; the 1.0.3 API differs. For local source builds, see Development Workflow.
Install the package and its icon peer:
npm install @apollohg/react-native-rich-text-editor
npx expo install @expo/vector-iconsAdd the config plugin to the Expo configuration:
export default {
expo: {
plugins: ['@apollohg/react-native-rich-text-editor'],
},
};Regenerate native projects and build a development client:
npx expo prebuild
npx expo run:ios
# or
npx expo run:androidRun expo prebuild again after adding or upgrading this package, changing the plugin configuration, or changing native dependencies. Build the app on a simulator, device, or CI development/release build; Expo Go cannot load the module.
First configure Expo Modules in the host application, then use the same package installation, Expo config plugin, native regeneration, and platform rebuild steps above. The package must share the app's Expo, React, React Native, and vector-icons installation rather than bundling another copy.
For Android bare apps, enable the required architecture in android/gradle.properties before building:
newArchEnabled=trueThe plugin adds Android packaging exclusions for obsolete JNA ABIs. If an existing generated/bare Android project cannot run the plugin, apply the equivalent setting yourself:
android.packagingOptions.excludes=**/armeabi/libjnidispatch.so,**/mips/libjnidispatch.so,**/mips64/libjnidispatch.soThe code-highlighting addon is a separate native package, @apollohg/react-native-rich-text-editor-code-highlighting, whose peer dependency requires a matching editor version. Install matching editor and extension versions and rebuild the native app. Installing JavaScript alone is insufficient; the native provider and its syntax assets must be linked. See Code Syntax Highlighting for installation, configuration, and language metadata.
- Build a native development client; do not use Expo Go.
- Keep one version of Expo, React, React Native, and
@expo/vector-iconsin the app. - Regenerate native projects after native configuration changes.
- Let prebuild run CocoaPods installation, or install pods after changing iOS native dependencies.
Next, create the shared document handle and mount your first editor in Getting Started.
The core package includes THIRD_PARTY_NOTICES.md and RUST-STANDARD-LIBRARY-NOTICES.html for its bundled Rust code, native dependencies, and icon assets. The optional code-highlighting package supplies its own notices, including syntect and grammar/theme authors.
Include the applicable notices with your distributed app's open-source acknowledgements or accompanying materials, preserving the corresponding-source links for MPL-licensed components. Metro does not automatically copy these files into the final application. Also retain the notices for the React Native/Expo and native dependency versions your app resolves. See the core notices and highlighting notices.
React Native Rich Text Editor · Documentation · Migration Guide