react-native-paper: 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)
(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 |
About this issue
- Original URL
- State: closed
- Created 4 years ago
- Reactions: 1
- Comments: 18 (1 by maintainers)
Why was this closed? I commented to avoid the closure like the bot said I should.
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
I have replicated the behavior and have the same problem. I wonder if this issue could be reopened.
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.
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