The problem is with React-native-papers and TextInput component.
When alignItems: 'center' is used on a View above TextInput in the tree the TextInput's rendering 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 that is closed.https://github.com/callstack/react-native-paper/issues/2335
export default function NativePaperExample() { 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 on device. Looks fine on web.https://snack.expo.dev/@parriz/paper---weird-textinput-behaviour
Same code setup but with core React Native components. (Works as expected.)https://snack.expo.dev/@parriz/default-react-native
Same code setup but with core React-native-elements components. (Works as expected.)https://snack.expo.dev/@parriz/great-donuts
- Are components inside a flexbox not supposed to grow as needed to fit the content? (Hence, this behaviour is a bug?)
- Can I just explicitly set a width on all TextInputs?
- Why is the outcome different on web and on device? I thought the result was supposed to be equivalent on React Native and React Native Web?