Why can't we check a style attribute of a react-native app?

Question

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?

Answer 1

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'
    },
    welcome: {
        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 component 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.com/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.com/a/35233409/1979861

Answer 2

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)