React-native-paper: Label miss-alignment issue after upgrading to latest Expo (39)

[hamedmam]

Current behaviour

Label is not in the center of input field and after focus it is not placed in the middle of top line

Expected behaviour

Having the the label in the center of input vertically and in the center of top line of input field

Code sample

N/A

Screenshots (if applicable)

What have you tried

tried upgrading to version 4.2.0 and it is the same

Your Environment

| software | version
| --------------------- | -------
| ios or android |
| react-native |
| react-native-paper | 4.1.0 and 4.2.0
| node |
| npm or yarn |
| expo sdk | 39

[github-actions[bot]]

Couldn't find version numbers for the following packages in the issue:

• react-native
• react-native-vector-icons
• npm
• yarn
• expo

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

• react-native-paper (found: 4.1.0, latest: 4.2.0)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

[cj]

@hamedmam It is actually worse than that for react-native-web https://snack.expo.io/Hv98xiEmj (react-native-paper 4.2.0, react-native-web 0.13.13 and expo 39) the input text is completely hidden.

I have tracked the cause of it, it is to do with the changes in how the ref is handled via this commit https://github.com/necolas/react-native-web/commit/376ccc31b1b1a11de1cab6bd7df4385be1a6a28c by @necolas

[cj]

@hamedmam if you are using react-native-web 0.13.13 and expo 39 you can use the patch https://gist.github.com/cj/4d5e2494a0510b3185d38db936d2a297 with https://www.npmjs.com/package/patch-package as a quick fix for now.

[necolas]

File a bug

[cj]

@necolas opened one up https://github.com/necolas/react-native-web/issues/1749

[necolas]

I'll need a reduced test case as this package is a hassle to run on web due to its dependencies

[jaulz]

There is a similar issue with the banner in this line:
https://github.com/callstack/react-native-paper/blob/efe17beafcc3bd83f4d84971499bd85647df9c84/src/components/Banner.tsx#L184

When Animated.View sets native props all unanimated styles are lost.

[himrocks33]

@jaulz is there going to be a patch soon? This broke all of my banners across the entire app.

[necolas]

This problem should be fixed in react native for web 0.13.14. Ref memoization shouldn't change behavior but I don't yet understand why it did here. If you're running this lib on web you should know that there are several accessibility and performance issues with the implementation here though.

[himrocks33]

@necolas Yes, Thank you upgrading to 0.13.14 fixed my issue. I'm aware of some of the issues running this lib on the web. I've been working around the issues as I find them. Thank you.

[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.