Instagram story text in React Native: rounded highlighted text that you can edit

Description and use

Implemented react-native-highlight-text-view, a Fabric component that draws rounded, padded backgrounds per line, following native text layout on iOS and Android, updating in real time during typing.

Problem

Building an Instagram/TikTok style story editor in React Native results in a flat pink rectangle when using plain backgroundColor, lacking rounded corners, per-line padding, and dynamic line‑by‑line growth.

Outcome

The library renders rounded, padded backgrounds per line that follow native text layout, updating in real time as the user types, and works on both iOS and Android without remounting.

Workflow

• 1. Create a Fabric component that wraps native text views.
• 2. On iOS, subclass NSLayoutManager and override drawBackgroundForGlyphRange:atPoint: to draw rounded, padded backgrounds for each line’s glyphs.
• 3. On Android, extend EditText and override onDraw() to use the system Layout to draw rounded highlights per line before rendering text, cursor and selection.
• 4. Expose props (color, textColor, fontSize, padding, highlightBorderRadius, etc.) and methods (focus, blur, clear, setText).
• 5. Install via npm/yarn, run pod install for iOS, or use expo prebuild for Expo projects.
• 6. Use the component as a controlled TextInput, passing text, onChange, placeholder, and styling props.
• 7. Adjust returnKeyType to control multi‑line behavior and verticalAlign for cross‑platform alignment.

Evidence

The view wraps a UITextView whose layout manager is a custom NSLayoutManager subclass. It overrides drawBackgroundForGlyphRange:atPoint:, so after the system has laid out and wrapped the text, it draws rounded, padded backgrounds for the glyphs that are actually on each line.

Source

The view is a custom EditText that draws the rounded highlights itself in onDraw(), using the Layout the system already computed, and then lets EditText draw the text, cursor and selection on top.

Source

Because both sides read the platform's own line layout, the highlight follows wrapping automatically, redraws as you type, and keeps working when you change the font, size, colors or alignment at runtime without remounting.

Source