React-uwp Toast not working

[sauravhiremath]

Ref: myxvisual/react-uwp#115

Problem description

• The Toast component (https://www.react-uwp.com/components/toast) does not work.
• Cross-checking with React devtools, the Toast component does have the defaultShow value as true.
• A similar issue can be reproduced on the docs page. The toast doesn't appear on the initial page load and even of button toggle

class Lobby extends React.Component {
  state = {
    warning: [false, undefined, undefined],
  };

  showWarning = (warning) => {
    return (
      <Toast
        showCloseIcon
        closeDelay={3000}
        defaultShow={warning[0]}
        title={warning[1]}
        description={[warning[2]]}
        onToggleShowToast={(isToast) => {
          if (isToast) {
            this.setState({ warning: [false, undefined, undefined] });
          }
        }}
      />
    );
  };

  render() {
    return (
      <Row>
        <Col>{this.showWarning(warning)}</Col>
        <Col>
          <Button
            onClick={() =>
              this.setState({ warning: [true, "title", "description"] }, () => {
                console.log("updated warning state", this.state.warning);
              })
            }
          />
        </Col>
      </Row>
    );
  }
}

For some weird reason, the Toast popup does not paint on the window screen. Because the state values are updated perfectly as seen from devtools view.

I've created a sandbox to reproduce the case. Although this works but has unexpected behaviors when triggered multiple times.

Versions

• React-UWP: 1.3.3
• React: 17.0.1
• Browser: Brave Browser (chromium based) with tracker blocking disabled