CODEWITHSUNDEEP
cssreact-nativeflexboxnative-base
Millenial2020
Millenial2020

Reputation: 2931

How do align content to the center in flexbox

I have a item that i want to be align to the middle and one to the bottom.

enter image description here

I want the logo image in the center, but I can't figure out how to do it.

import React, { Component } from 'react';
import { Container, Content, Text, Button, View } from 'native-base';
import { StyleSheet, Image } from 'react-native'

export default class WelcomeScreen extends Component {

render() {
    return (
        <Container>
            <Content contentContainerStyle={styles.container}>
                <View style={styles.imgContainer}>
                    <Image
                        source={require('../../assets/images/logos/logo.png')}
                    />
                </View>
                <View style={styles.btnContainer}>
                    <Button block primary onPress={() => this.props.navigation.navigate('Signin')} rounded>
                        <Text>Sign in</Text>
                    </Button>
                    <Button block light style={{ marginTop: 15 }} onPress={() => this.props.navigation.navigate('Signup')} rounded>
                        <Text>Sign up</Text>
                    </Button>
                </View>
            </Content>
        </Container>
    );
}
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center'
    },
    imgContainer: {
        flex: 1,
    },
    btnContainer: {
        width: 300,
    }
})

Upvotes: 0

Views: 2612

Answers (3)

Lenoarod
Lenoarod

Reputation: 3620

if you want the image to align center in the screen except for the button height, you can use the following code, and replace the view in ImageContainer to Image

render() {
    return (
        <Container>           
             <View
             style={styles.imgContainer}>
             <View  style={{backgroundColor:'red',height:50,width:50}} />
             </View>

            <Content contentContainerStyle={styles.container}>

                <View style={styles.btnContainer}>
                    <Button block primary onPress={() => this.props.navigation.navigate('Signin')} rounded>
                        <Text>Sign in</Text>
                    </Button>
                    <Button block light style={{ marginTop: 15 }} onPress={() => this.props.navigation.navigate('Signup')} rounded>
                        <Text>Sign up</Text>
                    </Button>
                </View>
            </Content>
        </Container>
    );
}
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'flex-end'
    },
    imgContainer: {
        position:'absolute',
        justifyContent:'center',
        alignItems:'center',
        height:Dimensions.get('window').height-40,
        width:Dimensions.get('window').width,
        flex: 1,
    },
    btnContainer: {
        height:200,
        width: 300,
        alignItems:'center',
        justifyContent: 'flex-end',
        marginBottom:20
    }
})

Upvotes: 0

Anhdevit
Anhdevit

Reputation: 2104

Try this

imgContainer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'
}

Upvotes: 2

Vikram Deshmukh
Vikram Deshmukh

Reputation: 15696

Here's an HTML CSS only example for you that you can easily tweak to solve your problem.

body {
  margin: 0;
}
#main {
  display: flex;
  flex-direction: column;
  height: 100vh;
  justify-content: space-between;
}
.container {
  align-items: middle;
  margin: 0 auto;
  align-self: middle;
  width: 300px;
  height: 80px;
  background-color: steelblue;
  vertical-align: afar;
}
<div id="main">
  <div class="container">
    abc
  </div>
  <div class="container">
    xyz
  </div>
</div>

The trick lies in the following CSS properties:

  • flex-direction: column
  • justify-content: space-between

Upvotes: 0

Related Questions