How use WModalShowToastView in function component

[lionchi]

Is it possible to use WModalShowToastView in functional components? If so, how to do this and preferably with an example.

[mochixuan]

you can watch this: https://github.com/mochixuan/react-native-smart-tip/blob/master/Example/src/pages/ModalShowToastPage.js

[lionchi]

@mochixuan This is an example for a class component. And I need an example for a functional component. And from your class component, it's not clear where this.toastInstance is declared

[mochixuan]

function Test() {
    const toastInstance = useRef(null);
    function getToastInstance(instance){
        toastInstance.current = instance;
    }

    return (
        <Modal>
            ....
            <ModalShowToastView toastInstance={this.getToastInstance}/>
        </Modal>
    )
}

[lionchi]

More correct WModalShowToastView or ModalShowToastView? I have an error like this plan "Element type is invalid: expected a string (for built-in components) or a class/function (for composite components)" but got: undefined. You likely forgot to export your component from the file it's defined in, or you migth have mixed up default and named imports

[mochixuan]

Let me see, it’s my problem Fixed, the latest version 2.2.0

[lionchi]

Updated but the error appears the same

[mochixuan]

It is runnable, I tested it on the latest package

[jfhidakatsu]

I have the same error.

[zhushenwudi]

@mochixuan i copy ModalShowToastPage.js to my project and have the same error. annotation "ModalShowToastView toastInstance={this.getToastInstance} " is running, otherwise is error, like:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components)" but got: undefined. You likely forgot to export your component from the file it's defined in, or you migth have mixed up default and named imports.

[mochixuan]

import { WModalShowToastView } from 'react-native-smart-tip'