I am having the hardest time with rotating my FontAwesome Icon when the TouchableOpacity is clicked. I would like to have the FontAwesome pro icon point downwards when it's been clicked and go back to its original state when clicked again.
<TouchableOpacity onPress={this.toggleExpanded}>
<View style={{ alignItems: "center" }}>
<Icon iconStyle={{paddingTop:"13%", paddingRight: 50}} name="play-circle" color="#637182" type="light" size={30} />
</View>
</TouchableOpacity>
You can conditionally have a className on the
Icon
component calledrotated
and have a CSS rule based on the className.In your
toggleExpanded
function, you can setrotated
in component state.In a CSS file, use
If you're not using any CSS files, you'll have to conditionally use inline styling.