Repository navigation
TextInput mode=outline has floating label truncated #4537
Description
Current behaviour
In v5, TextInput with mode="outline" has its floating label truncated. See image:
Expected behaviour
The full label is displayed, not truncated
How to reproduce?
See this Snack.
If you change the version of RNP to v4, the issue goes away (in the Snack editor, simply modify the version value in package.json as per the images below).
Preview
RNP v4:
RNP v5:
Your Environment
See Snack.
Activity
gedu commentedon Oct 29, 2024
Hey, is it only happening on web? We fixed this already: #4414
gregfenton commentedon Oct 29, 2024
No, it is happening on iOS as well. You can easily verify this with the above Snack. I am seeing the exact same (mis)behaviour in our Expo app, that's why the Snack was created as a minimal reproducible.
GopikaSivadas commentedon Oct 30, 2024
Same issue. Do we have any solution yet? Fixed after downgrading to 5.1.3
gregfenton commentedon Oct 31, 2024
Can confirm via the above linked Snack. Though the longer label displays in 5.1.3, the border cuts into that label (at least on Web -- seems to be fine with 5.1.3 on Android and iOS)
Web:
iOS (and Android):
Davilash commentedon Oct 10, 2026
Hi team, I investigated this issue against the latest main branch. Since the TextInput rework in PR #4909 (which replaced the old clipping bounding-box and notched border with the new Reanimated floating label implementation), long floating labels with variant="outlined" no longer get truncated. This appears to be resolved on main.