React-native-paper: TextInput label jumps to the center after rendered

[brunohkbx]

Environment

"expo": "^36.0.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz",
"react-native-paper": "^3.8.0",

Description

It's been a while since I noticed this weird behavior when the TextInput is rendered, I think no one still has reported though.
The label jumps when the TextInput is mounted, maybe because of some calculation. This behavior is more noticeable when moving between screens.

Reproducible Demo

https://snack.expo.io/@bruno.castro/b4fedd

1. Run this snack on your phone ( is more noticeable )
2. Click on the button 'Create account'
3. Notice how the label 'Email' jumps to the center of the TextInput

Slowed Gif

[brunohkbx]

cc @jbinda

[jonathanmachado]

Hi I have same problem

[jonathanmachado]

only android

[boulgom]

I have the same issue
Positions are computed with onLayout callback of Text component.

Label is hidden until measures are retrieved. But there are some extra conditions that don't work for outlined Textinput

In InputLabel.tsx the rule for opacity is
parentState.value || parentState.focused ? parentState.labelLayout.measured ? 1 : 0 : 1,

Maybe the following is enough. With this instead of having a translation, the label pops up which is better from my point of view.
parentState.labelLayout.measured ? 1 : 0

[iberatkaya]

I also have the same problem.

[brunohkbx]

I just update the snack. don't know why it broke. cc @jbinda

[jbinda]

@brunohkbx thanks will investigate on it soon

[github-actions[bot]]

Hello 👋, this issue has been open for more than 2 months with no activity on it. If the issue is still present in the latest version, please leave a comment within 7 days to keep it open, otherwise it will be closed automatically. If you found a solution on workaround for the issue, please comment here for others to find. If this issue is critical for you, please consider sending a pull request to fix the issue.

[finnmerlett]

I think the best fix for this would be to wait to show the label until label.Layout.measured is true, as @boulgom said:

[...] instead of having a translation, the label pops up which is better from my point of view.
parentState.labelLayout.measured ? 1 : 0

However, in order to make a smoother effect, a fadeIn animation of 100ms should be added. I have done this in my own project, and am happy to submit a pull request for the modified InputLabel component.

I'm only going to do this, though, if it will be checked and looked at, as there are quite a few pull requests to this repo (mine included) that have been sitting ignored for some time. I don't mind, and I'd love to make a PR, but only if it will be used!

Let me know if one would be useful.

[brunohkbx]

@finnmerlett it would be really nice if you open a pull request to fix this issue. I'm still facing this but couldn't have time to work on a fix.

We can ask @jbinda to review your PR when you open. :smiley:

[jbinda]

@finnmerlett PR are more than welcome. If you have working solution to fix described issue feel free to open PR and attach me to review

[finnmerlett]

@brunohkbx @jbinda Sweet! Will see what I can do tomorrow

[github-actions[bot]]

Hello 👋, this issue has been open for more than 2 months with no activity on it. If the issue is still present in the latest version, please leave a comment within 7 days to keep it open, otherwise it will be closed automatically. If you found a solution on workaround for the issue, please comment here for others to find. If this issue is critical for you, please consider sending a pull request to fix the issue.

[brunohkbx]

Hey @finnmerlett. did you have the chance to work on this? If not, I'd like to work on this issue.