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

说明与用途

实现了 react-native-highlight-text-view，使用 Fabric 组件在 iOS 和 Android 上绘制每行文本的圆角背景，自动跟随原生文本布局，并在输入时实时更新。

问题

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.

结果

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.

工作流

• 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.

证据

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.

来源

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.

来源

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.

来源