Flexbox container not stretching entire screen

Question

I'm having an issue with flexbox. I want to have a opaque bar over the top of my header. But i just cant seem to make it work. See image:

I have no idea how to make it stretch the entire width of the screen.

Here is my entire screen file:

render() {
    const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
    return (
        <Container>
            <Header style={{ height: 100 }}>
                <LinearGradient
                    colors={['#B31F64', '#4B245F']}
                    start={[1, 1]}
                    end={[0, 1]}
                    style={{
                        position: 'absolute',
                        left: 0,
                        right: 0,
                        top: 0,
                        height: 100,
                    }} />
                <View style={{ flex: 1, flexDirection: 'column' }}>
                    <View style={{ backgroundColor: 'rgba(255, 255, 255, 0.1)', flexDirection: 'row' }}>
                        <View style={{ marginTop: 0, flex: 1 }}>
                            <Button
                                transparent
                                onPress={() => this.props.navigation.navigate('DrawerOpen')}
                            >
                                <Icon name="menu" style={{ color: 'white', height: 30, width: 30 }} />
                            </Button>
                        </View>


                        <Image
                            style={{
                                flex: 5,
                                alignSelf: 'center',
                                justifyContent: 'center',
                                marginBottom: 10,
                                height: 30,
                            }}
                            source={logo}
                            resizeMode="contain"
                        />
                        <View style={{ flex: 1 }}>
                            <Icon name="notifications" style={{ color: 'white' }} />
                        </View>
                    </View>
                    <View style={{ flex: 1 }}>
                        {this.renderNextShift()}
                    </View>
                </View>
            </Header>

try adding `alignItems: 'stretch'` to the `style` prop of the parent component. — Tom Aranda, Mar 14 '18 at 15:01
I managed to make it work by changing the `Header` Component from native-base to a `View` tag — Jochem Warmenhoven, Mar 14 '18 at 15:08

score 0 · Answer 1 · answered Aug 23 '18 at 05:55

0

try width:Dimension.get('window').width

answered Aug 23 '18 at 05:55

Mojtaba Moshfeghi far

571
1
5
20

Jeff Gu Kang · Answer 2 · 2018-09-17T08:46:16.260

0

<View style={{ backgroundColor: 'rgba(255, 255, 255, 0.1)', flexDirection: 'row', flex:1 }}>

Check the flex:1 value on your OpaqueBar component.

edited Sep 17 '18 at 08:46

answered Sep 17 '18 at 08:40

Jeff Gu Kang

4,749
2
36
44

Flexbox container not stretching entire screen

2 Answers2