React Native: You attempted to set the key on an object that is meant to be immutable and has been frozen

Question

I am new to react native and was creating my first.

In my add I decided to change the backgroundColor of my App dynamically for which I did something like this

let style = StyleSheet.flatten({
    upperRow: {
        display: "flex",
        flexDirection: "row",
        marginBottom: 5, 
        backgroundColor: "white"
    },
})

let {
    upperRow
} = style 

And then something like this in componentWillReceiveProps

componentWillReceiveProps(nextProps) {

    if (this.props.coinPrice != nextProps.coinPrice ) {
       if (this.props.coinPrice > nextProps.coinPrice) {
        console.log("previous value is greater")
           //change background color to red
           upperRow["backgroundColor"] = "#ffe5e5"
           console.log(upperRow)
           //We 
       }
     }
    }

This is throwing 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.

Question: Can anyone tell me what is going wrong here?

Answer 1

Something you should know about Stylesheet:

• When you do Stylesheet.flatten, it will flatten arrays of style objects one immutable style object.
• When you do Stylesheet.create, it will generate an immutable style object.

But why does it have to be immutable?

Refer the documentation, in order to increase the performance, the immutability of the style object will enable a simpler communication between the UI and JS Thread. In other words, they will just use the IDs of the style objects to communicate with each other through the native bridge. So, the object can't be mutated.

The solution to this problem is just as simple as this:

• Using an array of styles.
• Updating the styles dynamically using state.

Below is the code demonstrating how to do it:

class App extends React.Component {

  state = {
    clicked: false
  }

  handleOnPress = () => {
    this.setState(prevState => ({clicked: !prevState.clicked}))
  }

  render() {
    return (
      <View style={[styles.container, {backgroundColor: this.state.clicked ? "blue" : "red"}]}>
        <Button onPress={this.handleOnPress} title="click me" />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Here is the Snack Expo link of the code: https://snack.expo.io/SJBLS-1I7