[Davilash]

Motivation

When TextInput is placed inside a flex container (e.g. flexDirection: 'row' or a parent view without an explicit width), rendering long text or placeholders can cause the outer root container to expand unbounded and push the parent container beyond its bounds instead of shrinking within flex constraints.

Applying flexShrink: 1 to the outer <Pressable> root container ensures that the component respects flex boundaries in constrained layouts.

Related issue

Closes #4790

Screenshots / Videos

N/A (Layout behavior adjustment within constrained flex parents)

Test plan

1. Place <TextInput /> inside a horizontally constrained flex container:

   <View style={{ width: 100, flexDirection: 'row' }}>
     <TextInput value="Very long string that exceeds parent bounds" />
   </View>

[github-actions]

Found potential problems with the pull request:

• Screenshot or video evidence is missing. Make sure to include one if it affects the UI.

[MikitasK]

thanks for this PR! 🙏 good job 👍

I just couldn't reproduce original issue on current main 🤷‍♂️
also this change affects vertical layout in fixed-height containers, so it'd be great to see runnable repro before moving forward.

since #4790 predates TextInput rewrite in #4909, could you also confirm it's still reproducible there?

also feel free to check my comments:

[MikitasK]

I couldn't reproduce horizontal blowout this fixes.
On iPhone 16 Pro simulator, TextInput inside flexDirection: 'row' parent produces 0% differing pixels between main & this branch - with long value, with/without label and with 100/300pt width constraint. The root stays ~32pt wide & sibling is never pushed out

Also worth checking whether this is still reproducible: #4790 was opened before TextInput rewrite in #4909 and it has no runnable repro.
so may I ask you to share repro (lib version + platform) you're seeing this on?

[MikitasK]

one small concern: flexShrink applies on both axes, so in fixed-height container the vertical layout gets squeezed as well.

On iPhone 16 Pro simulator with a column of height: 90 holding 2 labelled fields + supporting text, the spacing between fields drops from 74.33pt to 43pt and 2nd field's background overlaps first by ~12pt

Same pattern in card (height: 210, 3 fields): supporting-text row collapses 27.33pt -> 16.33pt and last line ends up outside the card

main isn't perfect in these cases either (it overflows), but text stays readable there.
Would it be possible to keep shrinking horizontal-only? for example minWidth: 0 on the root so vertical layouts stay as they are?

[MikitasK]

there is no way to opt out: style is destructured into inputStyleOverride (utils.ts:308 / 456) & only reaches native input (never this root).
On device, style={{ flexShrink: 0 }} changed nothing - fields still squeezed to 43pt

since this changes layout for every existing consumer, could the consumer style be merged into root so apps can override it?