React Native Dynamic Styling

Question

I am creating s crypto app where I want to change background color to red when the price went down and green when Price went up and then after 2 seconds change the background back to normal using setTimeout.

I tried two different methods to at-least change the backgroundColor but on both the occasion i got the following error

You attempted to set the key backgroundColor with the value #ffe5e5 on an object that is meant to be immutable and has been frozen.

I asked the separate question for the same but for some reason, the response I received was not convincing.

Afterwords, i tried a different approach (the one which does not allow the use of StyleSheet) but I still got the same error.

I am putting my new code here (you can refer to my previous code from the question)

First I declared an object in a global scope like this

var upperRow = {
    display: "flex",
    flexDirection: "row",
    marginBottom: 5, 
    backgroundColor: "white"
} 


class  CoinCard extends Component {

then I tried to change background color like this

  componentWillReceiveProps(nextProps) {

    if (this.props.coinPrice != nextProps.coinPrice ) {
       if (this.props.coinPrice > nextProps.coinPrice) {

           upperRow["backgroundColor"] = "#ffe5e5";
 }
}

followed by assigning the styles like this

return (

    <View style={container}>

            <View style={upperRow}>

[Question:] How can I change the styling dynamically?

Answer 1

Pass modalHeight dynamically from parent component as props

modalView is default style

<View style={[styles.modalView, { height: `${modalHeight}` }]}>