I wanted to check whether color is white of an element, as follows,

if(styles.background=='white')
console.log("ok")

console.log(styles.background=='white') --> was false [1]

why [1] returns false?

I wanted to check whether color is white of an element, as follows,

if(styles.background=='white')
console.log("ok")

console.log(styles.background=='white') --> was false [1]

why [1] returns false?

• javascript
• reactjs
• react-native

• 3 Show the full file. – Brigand Commented Mar 7, 2017 at 10:31
• 2 what is return of console.log(styles.background)? – Banzay Commented Mar 7, 2017 at 10:32
• @Banzay it was false – Dinuka Salwathura Commented Mar 7, 2017 at 10:34
• @DinukaSalwathura which one is false? console.log(styles.background=='white') or console.log(styles.background')? – Hoang Hiep Commented Mar 7, 2017 at 10:38
• If a style is inherited, I believe it won't show up under the element styles. Only if it is set explicitly on the element. Perhaps you can try using getComputedStyle if you have access to it. developer.mozilla/en-US/docs/Web/API/Window/… – jered Commented Mar 7, 2017 at 19:36

2 Answers 2

In your case styles is a StyleSheet object.

You need to use the StyleSheet.flatten function as below:

 const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF'
    },
    wele: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
});

var styleObj = StyleSheet.flatten([styles.container])

console.warn(styleObj.backgroundColor==='#F5FCFF') //=>true

To process a prop style of a ponent you could use it as below:

 let backgroundColor = Stylesheet.flatten(this.props.style).backgroundColor;

You can find the source code of the function here:

https://github./facebook/react-native/blob/master/Libraries/StyleSheet/flattenStyle.js

Sources and more details here:

https://facebook.github.io/react-native/docs/stylesheet.html

https://stackoverflow./a/35233409/1979861

Just want to make sure the parameter passing syntax is correct.
(Note: the square brackets surrounding the parameter are not needed.)

For single form style sheet:

var styleObj = StyleSheet.flatten(styles.container)

For multiple-form style sheet:

var styleObj = StyleSheet.flatten(styles[1].container)

Then you can print it as a dict to exam the attributes:

console.log(styleObj)