The problem is with React-native-papers and TextInput component.(And maybe the lack of my css/flexbox knowledge)
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.
There is a Github issue thats closed. https://github.com/callstack/react-native-paper/issues/2335
return (
<View style={{flex: 1, alignItems: "center", justifyContent: "center"}}>
<TextInput label='Email' value='' />
<TextInput label='Password' value='' />
</View>
);
}
Issue can be reproduced with this Snack. Only on device tho, looks fine on web. https://snack.expo.dev/@parriz/paper---weird-textinput-behaviour
Exact same code setup. But with core React Native components. (Works as expected) https://snack.expo.dev/@parriz/default-react-native
Exact same code setup. But with core React-native-elements components. (Works as expected) https://snack.expo.dev/@parriz/great-donuts
My questions:
- Arent components inside a flexbox supposed to grow as needed to fit the content? (Hence, this behaviour is a bug?)
- If anyone used native-papers before, how did you handle the issue? Did you just explicitly set a width on all your TextInputs? Is this how you normally do?
- Why is the outcome so diffrent on web and on device? I tought the result was supposed to be equivalent on React Native and React Native Web?
