CODEWITHSUNDEEP
androidreactjsreact-native
manjeet
manjeet

Reputation: 1517

React Native styling issue. Invariant violation

In react native I am stying component with below style

const style = StyleSheet.create({
    height: 100,
    borderBottomWidth: 1,
    borderBottomColor: "rgb(201, 204, 204)"
})

But it gives error:

enter image description here

It seems that borderBottomColor is a valid property. I can't find out the reason for error.

If add style directly. i.e., without StyleSheet.create then everything runs perfectly and style also get applied

const style = {
    height: 100,
    borderBottomWidth: 1,
    borderBottomColor: "rgb(201, 204, 204)"
}

Is it recommended to use styles directly in react native?

Upvotes: 1

Views: 340

Answers (1)

Mike M
Mike M

Reputation: 4436

Your use of StyleSheet.create isn't quite right. Try:

const styles = StyleSheet.create({
    foo : {
        height: 100,
        borderBottomWidth: 1,
        borderBottomColor: "rgb(201, 204, 204)"
    }

})

Then reference it as styles.foo, as in:

<View style={styles.foo} />

You can also combine both stylesheet and inline styles like so:

<View style={[styles.foo,{backgroundColor:'green'}]}/>

Finally, the stylesheet can have multiple named styles like:

const styles = StyleSheet.create({
    foo : {
        height: 100,
        borderBottomWidth: 1,
        borderBottomColor: "rgb(201, 204, 204)"
    },
    bar : {
        width:50
    }

})

Upvotes: 1

Related Questions