When using this component, the expected behavior is as follows: I press it, the selectedOpacity() function is called, the state is updated so it now renders with opacity=1.
However, for some reason, after calling this.setState, it is not re-rendering. I have to click the component again to make it re-render and apply the changes of opacity from the state.
export default class Category extends Component {
state = {
opacity: 0.5
}
selectedOpacity() {
// some stuff
this.setState({opacity: 1})
}
render() {
return(
<TouchableOpacity style={[styles.container, {opacity: this.state.opacity}]} onPress={() => {
this.selectedOpacity();
}}>
</TouchableOpacity>
)
}