React Native Paper - <TextInput> bug or am I stupid?

Question

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?

Additive

Were you able to find any solution :( – Alvinia

Answer 1

This can be fixed by,

container: {
    flex: 1,
    justifyContent: "center",
},

Or

 <View style={styles.container}>
      <View style={{ width: '100%' }}>
        <TextInput label="Email" value="" />
        <TextInput style={styles.textInput} label="Password" value="" />
      </View>
      <Button
        mode="contained"
        style={styles.textInput}
        onPress={() => alert('Clicked')}>
        Login
      </Button>
 </View>

Bitters