reactjs - React native: How to combine external and inline styles?

Question

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 1

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

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