Dynamic backgroundColor is not changing after rerendering
See original GitHub issue- 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>
Issue Analytics
- State:
- Created 4 years ago
- Comments:5
Top GitHub Comments
You’re right, my bad. The
{}
aroundcolor
were causing the issue. Sorry.No worries, glad it’s working 🙂