Trouble making React Native background full screen

Question

I am using Expo iOS simulator, and have been trying to make the background full screen, but cant make it work.

export default function App() {
  return (
        <ScrollView >
        <View  style={[styles.container]}>
          <Text style={styles.title}>Mt. Fuji</Text>
          <Image source={require('./images/pic.jpeg')} style={styles.uriImg}/>
          <TextImg imageUri={'https://m.media-amazon.com/images/M/MV5BZjRjOTFkOTktZWUzMi00YzMyLThkMmYtMjEwNmQyNzliYTNmXkEyXkFqcGdeQXVyNzQ1ODk3MTQ@._V1_.jpg'} text='Rick & Morty'  style={[styles.text, styles.propImg]} /> 
          <TextImg text='The Butterfly Nebula' imageUri={'https://www.dualdove.com/wp-content/uploads/2020/02/supernova-dying-star-in-the-shape-of-a-butterfly.jpg'} style={[styles.text, styles.propImg]} /> 
        </View> 
      </ScrollView>
  )
};

const styles = StyleSheet.create({
  uriImg: {
    width: 350, 
    height: 200,
    top:110,
  }, 
  propImg: {
    width: 350, 
    height: 200
  }, 
  container:{
    backgroundColor: '#a1c5ff',
    alignItems: 'center',
    flex:1
  });

This is what it looks like right now.

Answer 1

You can import 'Dimensions' from 'react-native', shown below:

import { Dimensions } from 'react-native';

You can now get the screen width and height from the following:

const width = Dimensions.get('window').width;
const height = Dimensions.get('window').height;

Once these have been defined you can now set your container width and height to be these values:

container: {
  width: width
  height: height
}