Cannot center <Col> horizontally.

[maotora]

Hi,

I'm trying to center content inside Col horizontally and it doesn't work.
I've read this alignment issue and this stackoverflow post and none of them works for me 😭😭

I want to horizontally center those two <Row>s inside the first <Col>.

Here is my code.

<Container>
    <Content contentContainerStyle={{flex: 1}}>
        <Grid style={{justifyContent: 'center'}}>
            <Col>
                <Row size={2}>
                    <Col>
                        <Text> Sign up options </Text>
                    </Col>
                </Row>
                <Row size={2}>
                    <Col>
                        <Button iconLeft danger>
                            <Icon name="logo-google" />
                            <Text> With Google </Text>
                        </Button>
                    </Col>
                </Row>
                <Row size={2}>
                    <Col>
                        <Button iconLeft bordered dark>
                            <Icon name="sms" type="MaterialIcons" />
                            <Text> With SMS </Text>
                        </Button>
                    </Col>
                </Row>
            </Col>
        </Grid>
    </Content>
</Container>

Please note that alignItems works as expected (centering Col vertically) but none works horizontally for me.

Please help,

Thanks.

[HakanAkca]

you have found a solution ? because i have this problem

[maotora]

Because col has flexDirection: 'column' I concluded that if I want to center something horizontally I only use as parent and child.

Using (as parent) changes the flex direction and somehow, spoils everything's alignment.

[dsouksavatd]

try this <Col><View style={{ alignItems: 'center' }}><Text>CENTER</Text></Col>