CODEWITHSUNDEEP
javascriptreactjsreact-native
bojack
bojack

Reputation: 73

Why won't backgroundColor work (React Native)?

How come backgroundColor won't change my entire phone screens background color? All I'm getting is a blank white screen whenever I run my code.

Here's my index.ios.js file:

import React, {Component} from 'react';
import {AppRegistry, View} from 'react-native';
import Login from './ios/components/login/Login';

export default class Epsilon extends Component {
    render() {
        return (
           <View>
               <Login/>
           </View>
        );
    }
}

AppRegistry.registerComponent('Epsilon', () => Epsilon);

Here's my Login.js file:

import React, {Component} from 'react';
import {StyleSheet, View} from 'react-native';

export default class Login extends Component {
    render() {
        return(
            <View style={styles.container}>

            </View>
        );
    }
}

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

Upvotes: 1

Views: 4789

Answers (2)

Victor
Victor

Reputation: 4199

Change it like this, Your flex is being ignored in the child component.So by adding flex to root u can fix this/

import React, {Component} from 'react';
import {AppRegistry, View} from 'react-native';
import Login from './ios/components/login/Login';

export default class Epsilon extends Component {
    render() {
        return (
           <View style={{flex:1}}>
               <Login/>
           </View>
        );
    }
}

AppRegistry.registerComponent('Epsilon', () => Epsilon);

Upvotes: 2

Andrew Breen
Andrew Breen

Reputation: 695

Your flex: 1 is being ignored because the parent view has not set it's flex rules. You can either remove the wrapping top level view (if you are definitely only having one component in Epsilon), or add flex rules onto the wrapping view.

Upvotes: 1

Related Questions