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: