My ImageBackground will only extend as far as it's inner content even though it's parent reaches all the way to the bottom of the screen. How do I get my ImageBackground view to extend fully to the bottom of it's parent view? 

```
<View style={styles.container}>
    <View>
        <Text style={styles.closeContainer} onPress={() => this.closeSideBar()}>
            <MBIcon name='ico-24-chevron-left' style={styles.closeIcon} />
            CLOSE
        </Text>
    </View>
    <ScrollView style={styles.contentContainer}>
        <View style={styles.userContainer}>
            <Text style={styles.userName}>{username}</Text>
        </View>
        <ImageBackground source={require('../../assets/drawer-bg.png')} style={styles.imageBackgroundView} imageStyle={styles.imageBackground}>
            <TouchableOpacity onPress={() => Actions.home()}>
                <View>
                    <Text style={styles.links}>Home</Text>
                </View>
            </TouchableOpacity>
            <TouchableOpacity onPress={() => this.performNetworkAction(Actions.orders, {orderStatus: 'notDelivered'})}>
                <View>
                    <Text style={styles.links}>Scheduled Deliveries</Text>
                </View>
            </TouchableOpacity>                                      
        </ImageBackground>
    </ScrollView>
</View>

```

css:

```
container: {
    backgroundColor: '#262626',
    height:'100%',
    width:'100%',
    display: 'flex'
},
contentContainer: {
    height: '100%', 
    flex: 3,
    backgroundColor: '#262626',
    position: 'relative',
    borderColor: 'green',
    borderStyle: 'solid',
    borderWidth: 2
},
imageBackgroundView: {
    width: '100%',
    borderColor: 'yellow',
    borderStyle: 'solid',
    borderWidth: 2,
    position: 'relative',
    flex: 1
},
imageBackground: {
    height: '100%'
},

```

I have outlined my ImageBackground view and it's parent container:

[![enter image description here](https://i.stack.imgur.com/tgdmC.png)](https://i.stack.imgur.com/tgdmC.png)