CODEWITHSUNDEEP
javascriptandroidreactjsreact-native
Bhavya Gupta
Bhavya Gupta

Reputation: 61

How to make the background color of an app cover the entire screen (using style) in React Native?

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: https://reactnativemaster.com/react-native-login-screen-tutorial .But changing some small aspects but either way I can't get the background to cover the entire screen.

Here is my code (all in app.js)

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 (
      <ScrollView>

        <View style={styles.container}>
          <View style={styles.inputView} >
            <TextInput  
              style={styles.inputText}
              placeholder="Username" 
              placeholderTextColor="#003f5c"
              onChangeText={text => this.setState({username:text})}/>
          </View>

          <View style={styles.inputView} >
            <TextInput  
            style={styles.inputText}
            placeholder="Password" 
            placeholderTextColor="#003f5c"
            secureTextEntry={true}
            onChangeText={text => this.setState({password:text})}/>
          </View>

          <TouchableOpacity style={styles.loginBtn}>
            <Text style={styles.loginText}>LOG IN</Text>
          </TouchableOpacity>

        </View>



      </ScrollView>
    );
  }
}

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
  },
});

Upvotes: 5

Views: 3339

Answers (1)

Jaydeep Galani
Jaydeep Galani

Reputation: 4961

You just need to give style,

<ScrollView contentContainerStyle={{flex:1}}>

See live snack expo example

your inputs height will be bigger because you have written 25% of screen so just change it accordingly.

Upvotes: 4

Related Questions