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

Описание и применение

Создан компонент react-native-highlight-text-view, который рисует округлые подсветки для каждой строки текста в стиле Instagram/TikTok, автоматически следуя за разметкой текста на 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.

Источник