Question 34551 in React native Question posted in
The official React Native documentation can be found here.

alignItems: 'center', not working on textInputs – React native

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

Tags:

2

Answers


  1. 0

    from the code above, it is evident You didn’t specify if that is a className (.) or an ID (#)

    Also, You could simply use the padding to bring the input to the center. See code below

    .textInputAndButtonContainer{
    padding: 20px;
    align-items:centre;
    Justify-content-:space-between;
}
    Login or Signup to reply.
  2. 0

    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'
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search