Dynamic backgroundColor is not changing after rerendering

• Review the documentation: https://github.com/oblador/react-native-vector-icons
• Search for existing issues (including closed issues): https://github.com/oblador/react-native-vector-icons/issues

Environment

React-Native : 0.60.4 React-Native-Vector-Icons : 6.6.0

Description

I tried to dynamically change the backgroundColor of the icon by setting a variable as the value of the backgroundColor. Even though the component was rerendering, the styling value was not changing. I logged the value of variable below the user. As we can see, after pressing the Icon, the component is rerendering and the value does change but the backgroundColor does not.

I found a workaround to this, I wrapped my component inside a View and set the backgroundColor variable to the view component. And after doing this, the backgroundColor was finally changing.

Reproducible Demo

Here is the code used :

                <Icon
                  name="md-resize"
                  size={40}
                  color="white"
                  style={{
                    alignSelf: 'center',
                    color: '#fff',
                    backgroundColor: 'red',
                    paddingHorizontal: 17,
                    paddingVertical: 12,
                  }}
                  onPress={() => this.handleMagnifyMessage(message)}
                />

My variable was defined as const isMagnified = magnifiedMessage === message._id ? 'green' : '#0078FF';

And the workaround I used to make it work is :

              <View style={{ backgroundColor: isMagnified }}>
                <Icon
                  name="md-resize"
                  size={40}
                  color="white"
                  style={{
                    alignSelf: 'center',
                    color: '#fff',
                    paddingHorizontal: 17,
                    paddingVertical: 12,
                  }}
                  onPress={() => this.handleMagnifyMessage(message)}
                />
              </View>

[lwintjen]

You’re right, my bad. The {} around color were causing the issue. Sorry.

[hampustagerud]

No worries, glad it’s working 🙂