Image will not resize to fit window, all other fixes make the image disappear - React Native

Question

I'm having an issue with React Native. I'm trying to put an image as a header, which needs to resize itself responsively to fit inside of the viewport and be centred horizontally.

Unfortunately, I'm unable to produce any sort of result using styling arguments such as resizeMode: 'contain' and the image disappears when following the advice of people who say to use the styling arguments width: undefined and height: undefined.

I'm a bit new to React Native so it's certainly possible that there's a blindingly obvious issue with how I'm approaching this problem. I'm also new to posting on Stack Overflow so any pointers about how best to describe or show my problem would also be most welcome.

Here is the source code I am using which produces the result where the image is too big for the screen:

export default class ComponentIndex extends React.Component {
    render(){
        return(
            <ImageBackground
            source={require('./../../assets/images/background_placeholder.png')}
            style={{width: '100%', height: '100%'}}
            >
                <View style={styles.parentView}>
                    <View style={styles.elementSpacer}>
                        <Image
                            source={require('./../../assets/images/iview_learning_logo.png')}
                            style={styles.headerImage}
                        />
                    </View>
                    <View style={styles.elementContainer}>
                        <Text style={styles.subheadingText}>App for comprehensive tutorials</Text>
                    </View>
                    <View style={styles.elementContainer}>
                        <Button rounded style={styles.startButton}>
                            <Text style={styles.startButtonText}>LET'S GO</Text>
                        </Button>
                    </View>
                </View>
            </ImageBackground>
        );
    }
}

const styles = StyleSheet.create({
    parentView: {
        flex: 1,
        flexDirection: 'column',
        padding: 30,
        justifyContent: 'center',
    },
    headerImage: {
        resizeMode: 'contain',
    },
    elementSpacer: {
        flex: 1,
    },
    elementContainerHeader: {
        height: 60,
    },
    elementContainer: {
        margin: 10,
    },
    subheadingText: {
        fontSize: 18,
        textAlign: 'center',
        //fontFamily: 'Arial',
    },
    startButton: {
        alignItems: 'center',
        justifyContent: 'center',
        alignSelf: 'center',
        paddingRight: 25,
        paddingLeft: 25,
        backgroundColor: '#c00000',
    },
    startButtonText: {
        color: 'white',
        //fontWeight: 'bold',
        fontSize: 20,
        //fontFamily: 'Arial',
    },
});

Image going off the side of the screen

And here is the Source Code I am using where the image disappears off the screen:

export default class ComponentIndex extends React.Component {
    render(){
        return(
            <ImageBackground
            source={require('./../../assets/images/background_placeholder.png')}
            style={{width: '100%', height: '100%'}}
            >
                <View style={styles.parentView}>
                    <View style={styles.elementSpacer}>
                        <Image
                            source={require('./../../assets/images/iview_learning_logo.png')}
                            style={styles.headerImage}
                        />
                    </View>
                    <View style={styles.elementContainer}>
                        <Text style={styles.subheadingText}>App for comprehensive tutorials</Text>
                    </View>
                    <View style={styles.elementContainer}>
                        <Button rounded style={styles.startButton}>
                            <Text style={styles.startButtonText}>LET'S GO</Text>
                        </Button>
                    </View>
                </View>
            </ImageBackground>
        );
    }
}

const styles = StyleSheet.create({
    parentView: {
        flex: 1,
        flexDirection: 'column',
        padding: 30,
        justifyContent: 'center',
    },
    headerImage: {
        resizeMode: 'contain',
        height: undefined,
        width: undefined,
    },
    elementSpacer: {
        flex: 1,
    },
    elementContainerHeader: {
        height: 60,
    },
    elementContainer: {
        margin: 10,
    },
    subheadingText: {
        fontSize: 18,
        textAlign: 'center',
        //fontFamily: 'Arial',
    },
    startButton: {
        alignItems: 'center',
        justifyContent: 'center',
        alignSelf: 'center',
        paddingRight: 25,
        paddingLeft: 25,
        backgroundColor: '#c00000',
    },
    startButtonText: {
        color: 'white',
        //fontWeight: 'bold',
        fontSize: 20,
        //fontFamily: 'Arial',
    },
});

Image disappeared entirely

Answer 1

After viewing the related questions, I found a solution which worked for me. Adding the following styling arguments did the trick:

width: null,
resizeMode: 'contain',
height: 220

The Stack Overflow question this solution was taken from