Niclas Niclas - 3 months ago 21
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?


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

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