React-native-paper: TextInput Label wrong position without focus and given value

Created on 10 Oct 2019 · 12Comments · Source: callstack/react-native-paper

Environment

RN-Version: 0.61.2
React-Verison 16.9.0
RN-Paper-Version: 3.0.0-alpha.5

Description

If I use the TextInput-Component and set the label with an existing value, the label gets padding on the left side. The longer the label, the longer the padding.
If I click in the input-field, the label corrects his position.
It happens on Android and iOS.

(without focus)
Bildschirmfoto 2019-10-10 um 12 54 48

(with focus)
Bildschirmfoto 2019-10-10 um 12 56 49

Source

Brainyoo

👍6

Most helpful comment

This issue is happening with ^3.0.0 version installed, I downgraded the version to ^2.15.0 and it works as expected.

diablourbano on 24 Oct 2019

👍2

All 12 comments

Im closing this issue because it seems to happen only with my Dialog. In other cases it works

Brainyoo on 10 Oct 2019

Ok I found out how to cause this issue.
If you already defined the value for your TextInput, it causes the padding problem.

```
const MainScreen = () => {
const [text, setText] = useState('bla');
return ;
};

Brainyoo on 10 Oct 2019

Not true, I have the same bug. Its not your dialog. It does the padding on the flat input which should only be done on the outlined one.

RichardLindhout on 22 Oct 2019

I too have this bug, and it's on both Android and iOS.

hugopretorius914 on 22 Oct 2019

Please try 3.0.0 which was released today. Maybe it's related to https://github.com/callstack/react-native-paper/pull/1405

jaulz on 22 Oct 2019

Same bug on 3.0.0 (not alpha).

Shywim on 22 Oct 2019

It's very strange it does not happen always, now it's only when I open the app for the first time and have not touched the input yet. After a focus this TextInput will be right even after a second screen mount.

RichardLindhout on 22 Oct 2019

https://github.com/callstack/react-native-paper/issues/1354
Same issue as this

RichardLindhout on 22 Oct 2019

In 0.61.2 is pretty easy to reproduce (at least in my app), just enable Fast Refresh on a class component and let it trigger when you overwrite the file.