I am setting Buttons stack on the basis of a variable whether channel is joined or not.
One button is “Join Channel” which a plain text button
Second button is “End Call” button which is a Circular button with an icon.
Both have different CSS.
When I click on “Join Channel”, channel is joined and my stack is changed.
Then I click on “End call” button, but CSS of this button does not remove and applied to “Join Channel” Button. Background color is not removed.
Rendering Code:
{this.state.isJoined ? this._callButtonsView() : this._joinButtonView()}
_joinButtonView = () => {
return (
<View style={styles.buttonsContainer}>
<Button
title="Join Channel"
buttonStyle={styles.joinButton}
titleStyle={{color: 'green', fontSize: 20}}
onPress={() => this._joinChannel()}
/>
</View>
);
};
_callButtonsView = () => {
return (
<View style={styles.buttonsContainer}>
<Button
icon={{
name: 'call-end',
color: '#ff0000',
size: 25,
}}
buttonStyle={styles.actionButton}
onPress={() => this._leaveChannel()}
/>
</View>
);
};
CSS:
actionButton: {
backgroundColor: 'blue',
padding: 0,
height: 50,
width: 50,
marginRight: 25,
marginTop: 5,
marginBottom: 5,
borderRadius: 25,
},
joinButton: {
backgroundColor: 'clear',
},
Video:
