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

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)

Screenshot (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

1 possible answer(s) on “alignItems: ‘center’ in a view above TextInput causes height to be full and width to be tiny