Nativebase: cannot vertically center Form component

Created on 2 Mar 2017 · 7Comments · Source: GeekyAnts/NativeBase

Hi! Thanks for trying out NativeBase!
Due to the overwhelming requests and issues/questions we ask you to add the following details with your issue.

react-native, react and native-base version

react-native: 0.41.2, react: 15.4.0, native-base: 2.0.11

Expected behaviour

vertically centered textInput (Form Item)

Actual behaviour

Form completely disappears when trying to add vertically centering styles to it or its parents

Steps to reproduce (code snippet or screenshot)

render() { return ( <Container> <Content contentContainerStyle={{alignItems: 'center', flex: 1, justifyContent: 'center'}}> <Form> <Item> <Input placeholder="Username" /> </Item> <Item last> <Input placeholder="Password" /> </Item> </Form> </Content> </Container> ) }

Screenshot of emulator/device

It's just a blank screen.

Is the bug present in both ios and android or in any one of them?

Both

Any other additional info which would help us debug the issue quicker.

If I add no styles, it appears at the top of the page as expected and in the docs, I can also add padding to it - but cannot vertically center. I was able to vertically center a button using the approach above.

Source

mmckinley8

Most helpful comment

@Ajay-Jadhao I just tried with the above code and modified it and was getting the form content centered vertically. can you try something like this

render() {
   return (
      <Container>
          <Content contentContainerStyle={{flex:1,justifyContent: 'center'}}>
            <Form>
              <Item>
                <Input placeholder="Username" />
              </Item>
              <Item last>
                <Input placeholder="Password" />
              </Item>
            </Form>
          </Content>
     </Container>
   )
 }

akhil-geekyants on 22 Sep 2017

👍7

All 7 comments

Just using justifyContent: 'center' should do it.

shivrajkumar on 15 Mar 2017

👍4

Same here

Ajay-Jadhao on 22 Sep 2017

@Ajay-Jadhao I just tried with the above code and modified it and was getting the form content centered vertically. can you try something like this

render() {
   return (
      <Container>
          <Content contentContainerStyle={{flex:1,justifyContent: 'center'}}>
            <Form>
              <Item>
                <Input placeholder="Username" />
              </Item>
              <Item last>
                <Input placeholder="Password" />
              </Item>
            </Form>
          </Content>
     </Container>
   )
 }

akhil-geekyants on 22 Sep 2017

👍7

@akhil-geekyants

Below is my code.. What i want is the Card need to be centered.

render() {
    return (
      <Container>
        <Header backgroundColor='#207ee1'>
            <Left>
              <Image
                style={styles.imageStyle}
                source={logo}
              />
            </Left>
          <Right />
        </Header>

        <Content contentContainerStyle={{ flex:1, justifyContent: 'center' }}>
          <Card>
            <CardItem>
              <Body>
                <Item >
                  <Text style={styles.titleStyle}>
                    Invoice & Revenue
                  </Text>
                </Item>
                <Item>
                  <Icon name='face' />
                  <Input placeholder='Username' />
                </Item>

                <Item>
                  <Icon name='lock-open' />
                  <Input placeholder='Password' />
                </Item>
              </Body>
            </CardItem>
          </Card>
        </Content>
      </Container>
    );

Ajay-Jadhao on 22 Sep 2017

👍1

@akhil-geekyants Still not working No effect on Card.

Here is the screenshot.
screenshot_1506070307

Ajay-Jadhao on 22 Sep 2017

👍1

@Ajay-Jadhao
you can eject the theme by following this docs and remove flex:1 from cardTheme object in native-base-theme/components/Card.js or you can override the card style by putting flex:0 (not sure whether it is a good practice)

akhil-geekyants on 22 Sep 2017

👍1

Still I couldn't vertically center card component inside Content