Search code examples
reactjsreact-nativejsxreact-native-stylesheet

alignItems: 'center', not working on textInputs

I currently trying to make an app with react native and I have a problem with the styling. I have textInput in the same View as a button and I want to center them with alignItems: 'center' but it is not working for the text input :

Here is my code and what it is rendering :

  textInputAndButtonContainer: {
    backgroundColor: 'white',
    display: 'flex',
    flexDirection: 'row',
    borderColor: 'black',
    borderWidth: 2,
    borderRadius: 11,
    alignItems: 'center',
    },

enter image description here

And under you can see what I really want to do :

enter image description here

Solution

  • at first remove display: 'flex', so it is a default in rn stylesheets. after that try to put into container style the next style values and check these.

          alignItems: 'center',
      contentAlign: 'center',
      alignSelf: 'center',
      justifyContent: 'center'