Conditional rendering based on state not working on state change - react-native

Question

I have a value in my state that changes based on a Switch. Depending on the value of that state item I want to change the styling of my button. I can see the state change, but the color doesn't change.
This seems straightforward as shown in this documentation: https://reactjs.org/docs/conditional-rendering.html
I actually have one conditional rendering working in the same statement, but it is referencing redux state instead of component state.
I've included the relevant aspects of my code below and tried to strip out the unnecessary stuff.
Still kind of a bit long.
/* eslint-disable prettier/prettier */
import React, { Component } from 'react';
import {
View,
Text,
TouchableOpacity,
Dimensions,
StyleSheet,
TextInput,
Switch,
ActivityIndicator,
} from 'react-native';
import { connect } from 'react-redux';
// Actions
import { createUser } from '../../actions/user-actions';
// Getting dims
const { width: WIDTH } = Dimensions.get('window');
// Styling
const styles = StyleSheet.create({
containerStyle: {
flex: 1,
backgroundColor: 'black',
alignItems: 'center',
justifyContent: 'center',
},
footerContainerStyle: {
justifyContent: 'flex-start',
flex: 3,
width: WIDTH,
paddingHorizontal: 30,
alignItems: 'center',
marginTop: 45,
},
tcStyle: {
flexDirection: 'row',
marginBottom: 20,
},
switchStyle: {
marginRight: 15,
},
buttonStyle: {
width: WIDTH-100,
height: 50,
backgroundColor: '#007AFF',
borderRadius: 4,
alignItems: 'center',
justifyContent: 'center',
marginBottom: 20,
},
disabledButtonStyle: {
width: WIDTH-100,
height: 50,
backgroundColor: '#007AFF',
borderRadius: 4,
alignItems: 'center',
justifyContent: 'center',
marginBottom: 20,
opacity: 0.3,
},
buttonTextStyle: {
color: 'white',
fontSize: 14,
fontWeight: 'bold',
},
linkStyle: {
textDecorationLine: 'underline',
color: 'blue',
},
});
// Component
class Signup extends Component {
constructor(props) {
super(props);
this.state = {
switchValue: false,
email: '',
name: '',
password: '',
passwordConfirm: '',
errorMessage: '',
};
}
componentDidUpdate() {
console.log(this.props.users);
const { navigation } = this.props;
if (this.props.users.user) {
navigation.navigate('Home');
}
}
componentDidMount() {
console.log(this.props);
}
// Helper functions
toggleSwitch = (value) => {
this.setState({switchValue: value});
};
onSignUp = () => {
const { email, name, password, passwordConfirm, switchValue } = this.state;
const { createUser } = this.props;
if (password !== passwordConfirm) {
console.log('Passwords do not match')
this.setState({errorMessage: 'Passwords do not match'});
return;
}
if (!switchValue) {
console.log('You must agree to terms');
this.setState({errorMessage: 'You must agree to terms'});
return;
}
createUser(email, password, name);
}
render() {
// Conditional button rendering
const { email, password, passwordConfirm, name, switchValue } = this.state;
let button;
console.log(switchValue);
if (this.props.users.loading) {
button = (
<TouchableOpacity style={[styles.buttonStyle]} onPress={this.onSignUp}>
<ActivityIndicator size="large" />
</TouchableOpacity>
);
} else if (switchValue) {
button = (
<TouchableOpacity style={[styles.buttonStyle]} onPress={this.onSignUp}>
<Text style={styles.buttonTextStyle}>CREATE AN ACCOUNT</Text>
</TouchableOpacity>
)
} else if (!switchValue) {
button = (
<TouchableOpacity style={[styles.disabledButtonStyle]} onPress={this.onSignUp}>
<Text style={styles.buttonTextStyle}>CREATE AN ACCOUNT</Text>
</TouchableOpacity>
)
}
return (
<View style={styles.containerStyle}>
<View style={styles.footerContainerStyle}>
<View style={styles.tcStyle}>
<Switch
onValueChange = {this.toggleSwitch}
value = {this.state.switchValue}
style = {styles.switchStyle}
trackColor={{true: '#007AFF', false: 'grey'}}
/>
<Text style={{color: 'white', flexWrap: 'wrap', flex: 1}}>I have read & agree to the <Text style={styles.linkStyle}>Terms of Use</Text> and <Text style={styles.linkStyle}>Privacy Policy</Text></Text>
</View>
{button}
<View style={styles.textLinkStyle}>
<Text style={styles.ctaHelpTextStyle}>Have an account?</Text>
<TouchableOpacity>
<Text style={styles.ctaTextStyle}> Sign In</Text>
</TouchableOpacity>
</View>
</View>
</View>
);
}
}
// state mapping
const mapStateToProps = ({ users }) => ({
users,
});
// Export
export default connect(mapStateToProps, {
createUser,
})(Signup);
If I toggle that switch I am expecting the button component to change to the one with the other styling. That's not happening though.

Answer 1

Actually your state changes correctly, but opacity does not work.
Update:
it seems react native has issues changing TouchableOpacity's opacity.
One solution is removing the opacity from the styles. And wrapping TouchableOpacity component with a View component, giving View an opacity.
You can try like this:
else if (switchValue) {
button = (
<View opacity={0.5}>
<TouchableOpacity style={styles.buttonStyle} onPress={this.onSignUp}>
<Text style={styles.buttonTextStyle}>CREATE AN ACCOUNT true</Text>
</TouchableOpacity>
</View>
);
} else if (!switchValue) {
button = (
<View opacity={0.1}>
<TouchableOpacity
style={styles.disabledButtonStyle}
onPress={this.onSignUp}
>
<Text style={styles.buttonTextStyle}>CREATE AN ACCOUNT false</Text>
</TouchableOpacity>
</View>
);

Answer 2

add return in conditions for example
if (this.props.users.loading) {
return(
<TouchableOpacity style={[styles.buttonStyle]} onPress{this.onSignUp}>
<ActivityIndicator size="large" />
</TouchableOpacity>
);
}

Answer 3

Based on you code, the only difference between both buttons is just the styling.
The way i would approach this is simply make the conditioning inside the styling its self not an if statement on the render method itself, follow along:
Solution
Modify this fragment:
// ... Other code parts
if (this.props.users.loading) {
button = (
<TouchableOpacity style={[styles.buttonStyle]} onPress={this.onSignUp}>
<ActivityIndicator size="large" />
</TouchableOpacity>
);
} else if (switchValue) {
button = (
<TouchableOpacity style={[styles.buttonStyle]} onPress={this.onSignUp}>
<Text style={styles.buttonTextStyle}>CREATE AN ACCOUNT</Text>
</TouchableOpacity>
)
} else if (!switchValue) {
button = (
<TouchableOpacity style={[styles.disabledButtonStyle]} onPress={this.onSignUp}>
<Text style={styles.buttonTextStyle}>CREATE AN ACCOUNT</Text>
</TouchableOpacity>
)
}
to this:
// ... Other code parts
if (this.props.users.loading) {
button = (
<TouchableOpacity style={[styles.buttonStyle]} onPress={this.onSignUp}>
<ActivityIndicator size="large" />
</TouchableOpacity>
);
} else {
button = (
<TouchableOpacity style={switchValue ? styles.buttonStyle : styles.disabledButtonStyle} onPress={this.onSignUp}>
<Text style={styles.buttonTextStyle}>CREATE AN ACCOUNT</Text>
</TouchableOpacity>
)
}
Hope this Helps!