title: How to make the background color of an app cover the entire screen (using style) in React Native?
body: <p>I am making a login screen for my app in React Native via snack.expo.io and I am unable to make the background color fill out the entire screen. I tried to make the width and height 100%, but only the width worked. I also tried using a flex of 1 (my only flex item) but that didn't work either. I am following this tutorial: <a href="https://reactnativemaster.com/react-native-login-screen-tutorial" rel="nofollow noreferrer">https://reactnativemaster.com/react-native-login-screen-tutorial</a> .But changing some small aspects but either way I can't get the background to cover the entire screen.</p>
  
  <p>Here is my code (all in app.js)</p>
  
  <pre><code>import * as React from 'react';
  import { Text, TextInput, View, ScrollView, SecureTextEntry, StyleSheet, TouchableOpacity } from 'react-native';
  import Constants from 'expo-constants';
  
  // You can import from local files
  import AssetExample from './components/AssetExample';
  
  // or any pure javascript modules available in npm
  import { Card } from 'react-native-paper';
  
  export default class App extends React.Component {
    state={
      username:"",
      password:""
    }
  
    render(){
      return (
        &lt;ScrollView&gt;
  
          &lt;View style={styles.container}&gt;
            &lt;View style={styles.inputView} &gt;
              &lt;TextInput  
                style={styles.inputText}
                placeholder="Username" 
                placeholderTextColor="#003f5c"
                onChangeText={text =&gt; this.setState({username:text})}/&gt;
            &lt;/View&gt;
  
            &lt;View style={styles.inputView} &gt;
              &lt;TextInput  
              style={styles.inputText}
              placeholder="Password" 
              placeholderTextColor="#003f5c"
              secureTextEntry={true}
              onChangeText={text =&gt; this.setState({password:text})}/&gt;
            &lt;/View&gt;
  
            &lt;TouchableOpacity style={styles.loginBtn}&gt;
              &lt;Text style={styles.loginText}&gt;LOG IN&lt;/Text&gt;
            &lt;/TouchableOpacity&gt;
  
          &lt;/View&gt;
  
  
  
        &lt;/ScrollView&gt;
      );
    }
  }
  
  const styles = StyleSheet.create({
    container: {
      //flex: 1,
      width:"100%",
      height:"100%",
      backgroundColor: '#003f5c',
      alignItems: 'center',
      justifyContent: 'center',
    },
  
    logo:{
      fontWeight: "bold",
      fontSize: 50,
      color: "#fb5b5a",
      marginBottom: 40
    },
  
    inputView:{
      width:"80%",
      backgroundColor:"#465881",
      borderRadius:25,
      height:"25%", // 50pixel
      //marginTop:20,
      marginBottom:20,
      justifyContent:"center",
      padding:20
    },
  
    inputText:{
      height:50,
      color:"white"
    },
  
    loginBtn:{
      width:"60%",
      backgroundColor:"#fb5b5a",
      borderRadius:25,
      height:"25%", // shoyld be 50 pixl
      alignItems:"center",
      justifyContent:"center",
      marginTop:20,
      marginBottom:10
    },
  }); 
  </code></pre>