Niclas Niclas - 1 month ago 11
React JSX Question

React native: How to combine external and inline styles?

This is a part of a _renderRow-function. I have some basic styles for a button, and also a style that is read from a variable on the row. In this example it's '#f00' but it could be a variable, like thisColor. How can I combine an external style with an inline style?

Something like this, but this doesn't work:

<TouchableHighlight style={[styles.button]{ backgroundColor: '#f00'}}


Or do I have to nest it with a container inside the TouchableHightlight and put the inline style on that element instead?

Answer

Your brackets are wrong. If you intend to continue to use the array syntax, Use this instead:

    <TouchableHighlight style={[styles.button,{ backgroundColor: '#f00'}]}