Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Cannot Center Button with NativeBase #1394

Closed
zain-merchant opened this issue Nov 26, 2017 · 14 comments
Closed

Cannot Center Button with NativeBase #1394

zain-merchant opened this issue Nov 26, 2017 · 14 comments
Labels
awaiting response

Comments

@zain-merchant
Copy link

Hi, I am trying to center a button on the screen, but cannot do so. Here is my code:
<Container> <Content> <Card> <CardItem> <Body> <Button>Text</Button> </Body> <CardItem> </Card> <Content> </Container>
I have tried using justify content, alignItems and a bunch of other things, but am not able to center the button with "Text". Any help? currently, it is just on the left of the screen. I am using android.
@SupriyaKalghatgi
Copy link
Contributor

@zmerchant17 flexDirection: "row", justifyContent: "center" with <Body> should do the work

@SupriyaKalghatgi
Copy link
Contributor

Closing this
Please reopen this issue if help needed

@EmirGluhbegovic
Copy link

EmirGluhbegovic commented Jan 27, 2018 •
edited

I am having issue centering button, If I have and it wraps and , all the components just stay the same, aligned to the left. If I remove the element then it sometimes works. I find I am fighting NativeBase to get basic flex functionality working. The EasyGrid also is not working as expected. I have ejected the theme so not sure if that could be causing any issues, I havny done any changes though. I simply ejected theme and chose common. I am not sure how to set to flex-end, flex-start etc..

@SupriyaKalghatgi
Copy link
Contributor

@EmirGluhbegovic Share your code for centering the Button with NativeBase along with output screenshot

@farkhandazeb
Copy link

farkhandazeb commented Aug 8, 2018 •
edited

@SupriyaKalghatgi thank you so much it worked.

@rahamin1
Copy link

rahamin1 commented Sep 2, 2018 •
edited

Any idea why the following doesn't center both the buttons?

<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>

Another try... What am I missing here?

        <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>

@SupriyaKalghatgi
Copy link
Contributor

@rahamin1 go through solutions provided abobe

@rahamin1
Copy link

rahamin1 commented Sep 3, 2018

@SupriyaKalghatgi Tried before writing my comment. Failed.

@rahamin1
Copy link

rahamin1 commented Sep 6, 2018 •
edited

Posted also in https://stackoverflow.com/questions/52207028/cannot-center-buttons-horizontally-with-nativebase
With an answer...

@abkios
Copy link

abkios commented Nov 7, 2018 •
edited

Visit this:

https://stackoverflow.com/questions/52207028/cannot-center-buttons-horizontally-with-nativebase/53184100#53184100

screen shot 2018-11-07 at 10 37 22 am

@rahamin1
Copy link

rahamin1 commented Nov 7, 2018

Thanks, I will try it.

@misteroak
Copy link

alignSelf: 'center' solved it for me! :)

@SeanningTatum
Copy link

Is there a way we can center it depending on the parent component? I don't think manually centering using alignSelf is a good solution.

It works just fine with React Native's Button component.

@isair
Copy link

isair commented Feb 20, 2019

The issues mostly stem from Native Base's Button component defining alignSelf as flex-start by default.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
awaiting response
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
9 participants
@isair @misteroak @SupriyaKalghatgi @rahamin1 @zain-merchant @EmirGluhbegovic @SeanningTatum @farkhandazeb @abkios