react-native native-base view justifyContent doesn't work in

Question

I want the buttons to be at the center of screen. I know the View is not stretched, but how to solve?

render() {
    return (
            <Container>
                <Header>
                    <Left>
                        <Button transparent>
                            <Icon name="menu"/>
                        </Button>
                    </Left>
                </Header>
                <Content>
                    <View style={{ flex:1, justifyContent: "center", alignItems: "center"}}>
                        <Button block info style={{margin: 10}}>
                            <Text>AAAA</Text>
                        </Button>
                        <Button block info style={{margin: 10}}>
                            <Text>BBBB</Text>
                        </Button>
                    </View>
                </Content>
                <Footer/>
            </Container>
        );

Hey, have you tried setting your view with `flexDirection: 'row'`? — Milore, Sep 08 '18 at 13:50

score 0 · Answer 1 · answered Sep 08 '18 at 07:24

try this

render(){
    return(
    <View style={{ flex:1,
        justifyContent: 'center', 
        alignItems: 'center'}}>
        <Button 
        color="#4682b4"
        title="Click me"
        onPress={() => Alert.alert('Clicked')}/>
        </View>
        );
    }

Why are you taking <Container> and <Content> ?

react-native native-base view justifyContent doesn't work in

1 Answers1