Typescript-class component toast message in modal usage

[tarikfp]

Hello. I wanted to use toast message in a modal. I initialized the steps related to showing in modal as shown in docs. But having problem while creatingRef. What should be the proper way to use toast message in typescript- class component ?

The error is shown in screenshot above. Any help would be great. Thanks...

[tarikfp]

Other attempt...

...

[calintamas]

Hi @tarikpnr , try creating a ref in the class constructor using React.createRef

constructor(props) {
  super(props);
  this.modalRef = React.createRef();
}

[tarikfp]

Im guessing in order to access the functions of Toast I need to specify a type to it.

Currently if I try to use toast message on modal private readonly modalRef:any having any type (workaround)...
And still I don't get any proper toast message on top of the modal. It shows up on top of the screen for a split-second, then it disappears.

The way I use the show function is shown below;

[tarikfp]

When I specify zIndex of both Modal and Toast component, the toast message shows up. But I am not able to hide it by pressing on it. So Im thinking that I might be missing someting with the refs ? And which type exactly I need for the modalRef ?

[calintamas]

@tarikpnr to hide it, you need to call hide on the same ref

this.modalRef.current.show({
  ...
  onPress: () => this.modalRef.current.hide()
})

As for creating the ref, you can set it to be of Toast type:

this.modalRef = React.createRef<Toast>();

[tarikfp]

this.modalRef.current.hide() that did the trick! Thanks.

But on the other side, while setting type to React.createRef(), still getting error below.

[jailsonpaca]

1+, I am with the same problem

[Onibenjo]

To fix the typescript error, i just created a variable and in the ref, added

// doing this for autocompletion, could be set to null
let modalToastRef  = Toast

// then set the variable to the ref
<Toast ref={ref => (modalToastRef = ref)} />

[calintamas]

Fixed in v2.0.0. Read the complete changelog.

If you find any issues with the v2 implementation, feel free to reopen this issue. Thanks!