Image wont resize to screen, covers and hides text

Question

This sounds very silly, but I just started running a React Native dev environment, and I simply wanted to add text and a local image from the package (splash.png). It does not render as I would like to on the iOS simulator:

I am simply returning in the app.js :

    return (
    <SafeAreaView style={styles.container}>
      <Text>
        Ready to Rock'n'Roll. Lorem ipsum dolor sit amet consectetur adipisicing
        elit. Aperiam at facere commodi amet qui eius est mollitia quas
        temporibus, dignissimos quia sapiente incidunt optio voluptatem
        architecto exercitationem nemo. Harum, omnis?
      </Text>
      <Image
        source={require("./assets/splash.png")}
        // style={
        //   {
        //     // flex: 1,
        //     // width: null,
        //     // height: null,
        //   }
        // }
        // resizeMode="cover"
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "dodgerblue",
    alignItems: "center",
    justifyContent: "center", //both needed to have our text in middle.
    width: undefined,
    height: undefined,
  },

And the result is :

screenshot of iOs simulator

(line comments are things I've tried, but it does not render as I want).

I am simply wanting to have my image proportionally fit the screen showing below my text in the center.

PS : I have also tried commenting the lines

//width: undefined,
    //height: undefined,

and not in the container style block, but it still does not render.

I was simply following a tutorial that only had :

return (
    <SafeAreaView style={styles.container}>
      <Text>
        Hello React Native
      </Text>
      <Image
        source={require("./assets/icon.png")}     
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "dodgerblue",
    alignItems: "center",
    justifyContent: "center"
  },

And it will show the text centered on the simulator with the image adjusted just underneath. Like this :

screenshot of base example

Answer 1

you can use ImageBackground like this :

<SafeAreaView style={styles.container}>
      
      <ImageBackground
          source={require("./assets/splash.png")}
          style={styles.container}>
          <Text>
              Ready to Rock'n'Roll. Lorem ipsum dolor sit amet consectetur adipisicing
              elit. Aperiam at facere commodi amet qui eius est mollitia quas
              temporibus, dignissimos quia sapiente incidunt optio voluptatem
              architecto exercitationem nemo. Harum, omnis?
          </Text>
      </ImageBackground>
      
      <StatusBar style="auto" />
    </SafeAreaView>

and change style to this :

container: {
    flex: 1,
    backgroundColor: "dodgerblue",
    alignItems: "center",
    justifyContent: "center", //both needed to have our text in middle.
    width: '100%',
    height: '100%',
  }