alignItems: 'center' in a view above TextInput causes height to be full and width to be tiny

[caleb-harrelson]

Current behavior

When alignItems: 'center' is used on a View above TextInput in the tree the TextInput's rendering is wonky. It takes the full height of the screen and has a very narrow width. A css width property must be specified in the component hierarchy between the View with alignItems: 'center' and the TextInput or on the TextInput itself.

Expected behavior

alignItems: 'center' should not change the size/shape of the TextInput, just the positioning (possibly)

Code sample

Here's a minimal snack with the problem.

Screenshots (if applicable)

(also see #1858, a closed issue with the same problem)

What I've tried

I reduced the issue down to the alignItems behavior. The snack linked above has commented out css props that work around the issue as well, but ultimately width must be specified somewhere if alignItems: 'center' is used; I have not tried it with other values of alignItems.

Your Environment

software	version
ios or android	both
react-native	0.63.3 (latest)
react-native-paper	4.3.0 (latest)
node	v12.13.1
npm	6.13.1
expo sdk	N/A
react-native-vector-icons	N/A

[github-actions]

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

• react-native-vector-icons
• npm
• 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:

• yarn (found: 6.13.1, latest: 1.22.10)

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

[github-actions]

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

• react-native-vector-icons
• 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:

• npm (found: 6.13.1, latest: 6.14.8)

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

[caleb-harrelson]

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

• react-native-vector-icons

react-native-vector-icons isn't part of the new issue template and it isn't relevant to this issue, but I'm on the latest version of that too.

[RichardLindhout]

I'm not sure if it's a react-native-paper problem. I think it is caused by React Native interal styling I have seen such issues more sometimes with other things as textInputs.

But maybe we could fix this if we add flexDirection: 'row' to the base style of the textinput but I don't know yet if this has other implications.

Result of this change applied manually
https://snack.expo.io/CwP8FbbDw

[github-actions]

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.

[caleb-harrelson]

But maybe we could fix this if we add flexDirection: 'row' to the base style of the textinput but I don't know yet if this has other implications.

This fixes the 100% height part of the problem, but not the requirement to set a width (it's still very narrow).

[caleb-harrelson]

Why was this closed? I commented to avoid the closure like the bot said I should.

[WaelOga]

did you find any solution ?

[Pat-Riz]

Having the same issue here. What is the recommended solution? The exact same CSS style with other UI frameworks i.e react-native-elements behaves correctly. With Papers the textInput goes crazy.

[raajnadar]

You need to wrap the element inside a View tag, that is how flex box works on react native this is not a react native paper bug. You can report that in react native repo.

Note - This is not even a bugs that can be addressed

[Pat-Riz]

The element is wrapped inside a View tag. This code can reproduce the behaviour. If I use a Core Native it don't behave in this manner. Arent the TextInput component supposed to grow to fit its own content?

<View style={{flex: 1, alignItems: "center", justifyContent: "center"}}>    
  <TextInput label='Password' value='' />    
</View>

[rafasanmartinez]

I have replicated the behavior and have the same problem. I wonder if this issue could be reopened.

[Justinohallo]

Just started a new project and am running into this as well.

[kethan1]

I ended up setting style={{ width: "90%" }} on the TextInput.

[IKTANIM]

I am also facing the same issue

[hardikhard28]

Hey, I set the parent view a width, and it worked fine for me.

[SouVitorGabriel]

I am having the same issue today

[georgiosApo]

Any updates on this? Running into this on "react-native": "0.72.6"
Any pointers would be much appreciated.

[gdxie1]

I have the same problem. If you set alignItems: "stretch" rather than "center", the height of its child will no grow(child has flexGrow:1). If you set alighItems: "center". The child will fill the whole height. It must be a bug as "align" shouldn't affect the height.

seems a bug of style.

[tibbe]

Ran into this as well (for the N:th time). There's something fundamentally broken with the styling of TextInput making it disobey any expectations of how a child element would behave once embedded in a parent (View).