CODEWITHSUNDEEP
react-nativenative-base
Yossi
Yossi

Reputation: 6027

Cannot Center Buttons horizontally with NativeBase

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>

Upvotes: 0

Views: 4142

Answers (3)

Abdul Karim Khan
Abdul Karim Khan

Reputation: 4935

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

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

enter image description here

Upvotes: 10

Yossi
Yossi

Reputation: 6027

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>

Upvotes: 1

Pritish Vaidya
Pritish Vaidya

Reputation: 22189

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>

Upvotes: 2

Related Questions