CODEWITHSUNDEEP
reactjsreact-nativestylesheetbackground-color
Suman Shaw
Suman Shaw

Reputation: 143

React native - background color covering only half the screen , how to fix?

I'm new to React Native. I recently converted all my functional components into class components and re-ran my code - but now the background-color covers only half the screen. flex:1 in the styles.container and I tried setting the height and width of the container to 100% in case that was causing the error. But turns out, it stays the same. How do I fix this? Background-color only covering half the screen !

const styles = StyleSheet.create({
  container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: '#d6ffff',
      height: "100%",
      width: "100%"
  }

     class Login extends React.Component {
            render() {
          return (
            <View style={styles.container}>
              <Text style={styles.heading} > Login </Text>
            <TextInput
              style={styles.input}
              underlineColorAndroid="transparent"
              placeholder="Email"
              placeholderTextColor="#00bcd4"
              autoCapitalize="none"
            />
            <TextInput
              style={styles.input}
              underlineColorAndroid="transparent"
              placeholder="Password"
              placeholderTextColor="#00bcd4"
              autoCapitalize="none"
              secureTextEntry={true}
            />
                <Button 
                  title="Login" 
                  color='#00bcd4' 
                  onPress={() => this.props.navigation.navigate('MainMenu')} />
            </View>
           ); 
         }
        }
    const RootStack = createStackNavigator(
      {
        Login: Login
      }
    );
    export default createAppContainer(RootStack);

Upvotes: 0

Views: 7292

Answers (3)

Poyraz Aktaş
Poyraz Aktaş

Reputation: 1

I think you dont need to width and height properties:

const styles = StyleSheet.create({
  container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: '#d6ffff',
  }
})

Upvotes: 0

Ruslan Ibragimov
Ruslan Ibragimov

Reputation: 51

const styles = StyleSheet.create({
  container: {
      flex: 1,
      backgroundColor: '#d6ffff',
  }
})

Upvotes: 0

Sayog
Sayog

Reputation: 770

import {Dimensions, StyleSheet} from 'react-native';

{
   .... Your code
}

const styles = StyleSheet.create({
  container: {
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: '#d6ffff',
      height: Dimensions.get('window').height,
      width: Dimensions.get('window').width,
  }
})

Upvotes: 1

Related Questions