CODEWITHSUNDEEP
react-native
Rujal Shrestha
Rujal Shrestha

Reputation: 31

Flex:1 not making parent <View> element cover entire screen, instead shrinks all elements to top of the screen

I am learning react-native, and want a Parent to take up the entire screen dynamically with flex instead of a static height/width value. It works fine with {height:714, width:393}, but when I replace them with flex:1, all the elements shrink to the top of the screen.

Code

Styles:

const styles = StyleSheet.create({ container: { backgroundColor: 'purple', padding: 5, // flex: 1, height: 714, width: 393, },

bigBlackText: {
    color: 'black',
    fontSize: 18,
},

bigWhiteText: {
    color: 'white',
    fontSize: 19,
},

col1: {
    backgroundColor: 'yellow',
    flexDirection: 'row',
    flex: 1,
},

col11: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    margin: 5,
    backgroundColor: 'orange',
},

col12: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    margin: 5,
    backgroundColor: 'orange',
},

col13: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    margin: 5,
    backgroundColor: 'orange',
},

col2: {
    flex: 1,
    backgroundColor: 'red',
},

col21: {
    flex: 1,
    justifyContent: 'space-around',
    alignItems: 'center',
    backgroundColor: 'brown',
    margin: 5
},

col22: {
    flex: 1,
    justifyContent: 'space-around',
    alignItems: 'center',
    backgroundColor: 'brown',
    margin: 5
},

col23: {
    flex: 1,
    justifyContent: 'space-around',
    alignItems: 'center',
    backgroundColor: 'brown',
    margin: 5
},

col3: {
    flex: 1,
    backgroundColor: 'cyan',
    flexDirection: 'column',
},

col31: {
    flexDirection: 'row',
    flex: 1,
},  

col31r1: {
    flex: 1,
    justifyContent: 'space-around',
    alignItems: 'center',
    backgroundColor: 'green',
    margin: 5,
},

col31r2: {
    flex: 1,
    justifyContent: 'space-around',
    alignItems: 'center',
    backgroundColor: 'green',
    margin: 5,
},

col32: {
    flexDirection: 'row',
    flex: 1,
},

col32r1: {
    flex: 1,
    justifyContent: 'space-around',
    alignItems: 'center',
    backgroundColor: 'green',
    margin: 5,
},  

col32r2: {
    flex: 1,
    justifyContent: 'space-around',
    alignItems: 'center',
    backgroundColor: 'green',
    margin: 5,
},

});

Expected Output

Actual Output

Upvotes: 1

Views: 1699

Answers (3)

Maulik Dhameliya
Maulik Dhameliya

Reputation: 1558

import React from 'react';
import { View, StyleSheet, Text } from 'react-native';
export default class ViewDemo extends React.Component {

    render() {
        return (
            <View style={styles.container}>

                <View style={{ flex: 1, backgroundColor: 'yellow', flexDirection: 'row', justifyContent: 'space-around' ,flexWrap: 'wrap'}}>
                    <View style={styles.h1}></View>
                    <View style={styles.h1}></View>
                    <View style={styles.h1}></View>
                </View>

                <View style={{ flex: 1, backgroundColor: 'red', flexDirection: 'column', justifyContent: 'space-around' }}>
                    <View style={styles.h2}></View>
                    <View style={styles.h2}></View>
                    <View style={styles.h2}></View>
                </View>

                <View style={{ flex: 1, alignItem:'center' , backgroundColor: '#3CAEA3', flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'space-around' }}>
                    <View style={styles.h3}></View>
                    <View style={styles.h3}></View>
                    <View style={styles.h3}></View>
                    <View style={styles.h3}></View>
                </View>
            </View>
        );
    }

}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },

    h1: {
        backgroundColor: '#f79c1d',
        width: 100,
        justifyContent : 'space-around',
        margin: 10
    },

    h2: {
        backgroundColor: '#9c2c2c',
        height: 50,
        justifyContent: 'space-around',
        margin: 10
    },

    h3: {
        backgroundColor: '#616f39',
        height: 90,
        width: 180,
        margin: 10
    },


});

you can directly use this code

Upvotes: 0

Devin Gong
Devin Gong

Reputation: 124

enter image description here I find no problem exists.Do not use justifycontent or alignitems props in container stylesheet.

Upvotes: 1

Orhan
Orhan

Reputation: 179

try to set width and height

mainView: {
   width: "100%",
   height: "100%"
}

or, 

mainView: {
   width: deviceWidht,
   height: deviceHeight
}

I hope this works.

Upvotes: 0

Related Questions