Cannot Center Buttons horizontally with NativeBase

Question

Posted also in https://github.com/GeekyAnts/NativeBase/issues/1394

Trying to center buttons horizontally with Native Base.

Any idea why the following do not work?

       <Container style={{ backgroundColor: '#fff', paddingTop: 100, alignItems: 'center' }}>
          <Content>
              <Button style={{ margin: 10 }}>
                <Text> Short Text </Text>
              </Button>
              <Button style={{ margin: 10 }}>
                <Text> Very Long Text</Text>
              </Button>
              <View style={{ marginTop: 50 }}>
              </View>
          </Content>
       </Container>

Also tried this, didn't work either:

       <Container style={{ flex: 1, alignItems: 'center' }}>
          <Content padder>
            <Card style={{ alignItems: 'center' }}>
              <Button style={{ margin: 10 }} danger>
                <Text> Go to Welcome Tab </Text>
              </Button>
              <Button style={{ margin: 10 }} warning>
                <Text> Go to Main Tab </Text>
              </Button>
              <Button style={{ margin: 10 }} success>
                <Text> Open Drawer </Text>
              </Button>
            </Card>
          </Content>
       </Container>

Had the same issue, putting each piece in a native-base `Row` component fixed it. — Nate Glenn, Jan 19 '19 at 17:31

score 10 · Accepted Answer · edited May 23 '19 at 08:03

10

<Button info style = {{padding: '10%', alignSelf: 'center'}}> 
<Text>LOGIN</Text>
</Button>

I was able to move button in centerby simply using ( alignSelf: 'center' ).

edited May 23 '19 at 08:03

Yossi

5,577
7
41
76

answered Nov 07 '18 at 05:39

Abdul Karim Khan

4,256
1
26
30

score 2 · Answer 2 · answered Sep 07 '18 at 11:22

You can try the following, by adding Left and Right tags

     <Container style={{flex: 1, alignItems: 'center'}}>
        <Content padder>
          <Card>
            <CardItem>
              <Left/>
              <Button style={{ margin: 10 }} danger>
                <Text> Go to Welcome Tab </Text>
              </Button>
              <Right/>
            </CardItem>
            <CardItem>
              <Left/>
              <Button style={{ margin: 10 }} warning>
                <Text> Go to Main Tab </Text>
              </Button>
              <Right/>
            </CardItem>
            <CardItem>
              <Left/>
              <Button style={{ margin: 10 }} success>
                <Text> Open Drawer </Text>
              </Button>
              <Right/>
            </CardItem>
          </Card>
        </Content>
      </Container>

Thanks @PritishVaidya, it works! Although (not your fault...) so awkward... I would expect a simpler way to do it... — Yossi, Sep 07 '18 at 13:40

score 1 · Answer 3 · answered Sep 07 '18 at 13:44

Another way to display the buttons would be the following:

   <Container style={{ flex: 1, alignItems: 'center' }}>
      <Content padder>
        <Card style={{ alignItems: 'center' }}>
          <Button block style={{ margin: 10 }} danger>
            <Text> Go to Welcome Tab </Text>
          </Button>
          <Button block style={{ margin: 10 }} warning>
            <Text> Go to Main Tab </Text>
          </Button>
          <Button block style={{ margin: 10 }} success>
            <Text> Open Drawer </Text>
          </Button>
        </Card>
      </Content>
   </Container>

Cannot Center Buttons horizontally with NativeBase

3 Answers3