[iOS] RichEditor not rendering on iOS with React Native 0.77.3 - WebView remains blank

[bs-dipesh-patel]

Problem

The RichEditor component fails to render on iOS when using React Native 0.77.3 (new architecture/Fabric). The component mounts successfully, the toolbar displays correctly, but the editor area (WebView) remains completely blank with no placeholder or content visible.

Environment

• React Native: 0.77.3 (Fabric enabled)
• react-native-pell-rich-editor: ^1.10.0
• react-native-webview: ^13.16.0
• Platform: iOS (tested on simulator and device)
• iOS Version: 17+
• Android: Works perfectly ✅

Expected Behavior

• Editor should render with placeholder text visible
• WebView should display the contenteditable div
• User should be able to tap and type text
• Formatting buttons should work

Actual Behavior

• Component mounts (toolbar visible)
• Editor area is completely blank (no placeholder, no content)
• WebView appears to load but HTML content not displayed
• editorInitializedCallback fires but editor remains invisible

Steps to Reproduce

import { RichEditor, RichToolbar, actions } from 'react-native-pell-rich-editor';

<RichToolbar
editor={editorRef}
actions={[actions.setBold, actions.setItalic, actions.setUnderline]}
/>

<RichEditor
ref={editorRef}
placeholder="Enter text..."
initialContentHTML=""
useContainer={false}
initialHeight={180}
editorInitializedCallback={() => {
console.log('Editor initialized'); // This fires ✅
}}
onChange={(html) => console.log(html)}
/>## Investigation & Attempted Fixes

1. domStorageEnabled issue: Changed from false to true in RichEditor.js - no effect
2. useContainer prop: Tried both true and false - no difference
3. WebView props: Added iOS-specific props (keyboardDisplayRequiresUserAction={false}, allowsInlineMediaPlayback, etc.) - no effect
4. Layout: Tried explicit heights, flex: 1, various style combinations - no change
5. Console logs: No errors, editorInitializedCallback fires, but WebView content not visible

Key Observations

• WebView onLoadStart and onLoadEnd callbacks fire successfully
• Bridge communication works (messages can be sent/received)
• Testing document.getElementById('editor') returns null - HTML not rendering in WebView
• Toolbar renders perfectly (uses same component structure)
• Works flawlessly on Android with identical code

Potential Root Cause

Appears to be related to React Native 0.77.x's new architecture (Fabric) and how WKWebView handles HTML injection on iOS. The WebView loads but the inline HTML source is not being rendered.

Workaround Needed

Is there a recommended approach for React Native 0.77.3 with Fabric? Should we:

• Use a different WebView configuration?
• Load HTML via baseUrl instead of inline source?
• Use external HTML file?
• Wait for library update for RN 0.77+ compatibility?

Additional Context

This issue blocks rich text editing functionality for iOS users in production apps using latest React Native. Android users are unaffected.