React Native - Login Page : Fit all content on screen width (resize image)

Hello here is a visual example of what I'm trying to accomplish:

This is the login screen for my app. I want to make sure that no matter what phone the user is doing everything fits on the screen without having to scroll. What I'm trying to do is make the image height dynamic so that it resizes based on the phone height.

I'm not sure how to approach this right now I have flex box set up and I have two children view inside of it. The bottom view is a fixed height so I set that equal to 220 and then for the top view I'm doing the phone height minus the fixed height.

The image and text are actually a slider that I'm using from here: https://github.com/archriss/react-native-snap-carousel

Again I'm not sure the best way to approach this, but I just want the image to resize depending on phone height. Here is my code:

const phoneHeight = Dimensions.get('window').height;const phoneWidth = Dimensions.get('window').width;_renderItem({ item, index }) {    return (<View style={{            display: 'flex',            justifyContent: 'center',            alignItems: 'center',            marginBottom: 25,            alignSelf: "center"        }}><View style={styles.ImageWrap}><Image style={styles.imageStyle} source={item.image} /></View><View style={styles.TextWrap}><Text style={styles.Title}>{item.title}</Text><Text style={styles.Body}>{item.text}</Text></View></View>    )}    render() {        return (<><SafeAreaView style={styles.app}><View style={styles.appBody}><View style={styles.headerWrap}>                            {/* HEADER CONTENT HERE */}</View><Carousel                            layout={"default"}                            ref={ref => this.carousel = ref}                            data={this.state.carouselItems}                            sliderWidth={phoneWidth - 50}                            itemWidth={phoneWidth - 50}                            renderItem={this._renderItem}                            onSnapToItem={index => this.setState({ activeIndex: index })} /><View>                            {/* Some Text Here HERE */}</View></View><View style={styles.footerWrap}>                        {/* FIXED CONTENT HERE */}</View></SafeAreaView></>        );    }}const styles = StyleSheet.create({    loginBody: {        display: 'flex',        height: '100%',        flexDirection: 'column',        justifyContent: 'center',    },    appBody: {        height: phoneHeight - 220,    },    footerWrap: {        height: 220,    },    ImageWrap: {        height: phoneHeight / 4,            },    imageStyle: {        height: '100%',        width: 'auto',    },});