Skip to content

TextInput mode=outline label animation was initially offset #4556

Open
@cresjie

Description

@cresjie

Current behaviour

After the page/screen loads, when the TextInput mode=outline has a value, the label is initially positioned at the right which results in overlapping with the outline, then does a sliding animation to the left.

Image

See video:
https://github.com/user-attachments/assets/202e3c1e-3b1a-4314-900a-83d2f6e47d0f

Expected behaviour

No sliding animation like in V4.

How to reproduce?

a simple: <TextInput mode="outlined" label="Last Name" value="John Doe" />

"No Loops", just plain render of multiple <TextInput />

I also created a Snack sample

Preview

What have you tried so far?

the v4 seems fine, but doesn't support MD3.

Your Environment

software version
react-native 0.74.5
react-native-paper 5.12.5
node 18.20.5
npm or yarn [email protected]
expo sdk 51.0.28

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions