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

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'}]} 

Answer 2

This is the correct answer, tested in React Native 0.44.2:

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

Answer 3

Can use the spread syntax:

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