feat(input): cross-platform contentInset prop (iOS textContainerInset + Android scroll container)#442
Open
andreavrr wants to merge 4 commits into
Open
feat(input): cross-platform contentInset prop (iOS textContainerInset + Android scroll container)#442andreavrr wants to merge 4 commits into
andreavrr wants to merge 4 commits into
Conversation
Contributor
Author
Before / after
|
hryhoriiK97
reviewed
Jun 27, 2026
hryhoriiK97
left a comment
Collaborator
There was a problem hiding this comment.
@andreavrr thank you for this PR! It will require more consideration. I will look into this next week and let you know how we want to handle it.
Contributor
Author
|
Thanks a lot @hryhoriiK97! I figured, there's probably still quite a bit to sort out. Either way it feels like an important feature (well, more of a fix) on the UI side. Thanks especially for giving me a sense of the timeline, happy to make any changes whenever you get to it. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #426
Summary
Adds a cross-platform
contentInsetprop toEnrichedMarkdownTextInput: a content cushion that is part of the scrollable content and scrolls away with the text, instead of clipping the way style padding does today.toppushes the first line down (e.g. below a translucent header);bottomkeeps room past the last line. It exposes the iOSUITextView.textContainerInsetbehaviour and brings the same to Android.Problem
There is no prop for a content cushion that scrolls away with the text. The only workaround is style padding, and on both iOS and Android
paddingVerticalon the editor is clipped while the field scrolls (the cushion eats the text), and a long autofocused value does not reveal the end. iOS hasUITextView.textContainerInsetfor exactly this, but it is not exposed; Android has no equivalent.Minimal reproducible example (Expo SDK 56, RN 0.85.3, New Architecture):
https://github.com/andreavrr/enriched-markdown-content-inset-mre
API
Fix
contentInsettoUITextView.textContainerInset, and grow the caret-scroll target rect by the bottom inset so the caret stays revealed while typing.NestedScrollViewcontainer whose child is the editor (wrap_content, non-scrolling). The inset is the editor's own padding — part of the scrolled content — so it scrolls away without clipping (AndroidTextViewcouples its draw clip to the padding while the field scrolls internally). The container scrolls and reveals the caret. Border/background/padding go on the container (the visible frame). A manual measure/layout pass andclipToOutlinecover what RN does not here (it swallows the non-Fabric child'srequestLayout, and RN parents default tooverflow: visible). The shadow node stays an auto-grow measuring leaf, so consumers without an explicit height still grow to content.Test plan
contentInsetwith a long autofocused value: the cushion scrolls away (no clip) andautoFocusreveals the end.maxHeightconsumers still size correctly.scrollEnabled, selection menus, etc.).