Undefined is not an object

[jawkhan]

When I try to invoke the popup modal with Popup.show();
I get the following error:

[TypeError: undefined is not an object (evaluating 'this.popupInstance.start')]

[smolleyes]

hello

this module is cool but doc could be better and root component removed i think :/

what i did is:

1 / create a helper function (helper.js, change the image names and path accordingly to your code...)

export function showToast(Toast, title, text,type) {
  const TYPES = {
    error: {
      icon:require('../../assets/images/error.png'),
      color:"#e74c3c"
    },
    success: {
      icon:require('../../assets/images/success_dialog.png'),
      color:'#2ecc71'
    },
    warning: {
      icon:require('../../assets/images/warning.png'),
      color:'#f39c12'
    }
  }
  Toast.show({
    title,
    text,
    color: TYPES[type].color,
    timing: 5000,
    icon: (
      <Image
        source={TYPES[type].icon}
        style={{ width: 50, height: 50 }}
        resizeMode="contain"
      />
    ),
  })
}

with the TOAST as first parameter

2/ in my screen i just import my helper function then add the component from popup-ui at the end of your root element, ex:

import { Toast } from "popup-ui" // import toast from the lib
import {showToast} from "../utils/helper" // import our helper
......

// where i need it on a check, for exemple

if (!sample.size) {
      showToast(Toast, 'Erreur',"Merci de spécifier la taille de votre carotte", 'error')
}

// in the render

<View>
    // ....your code here then at the end
    <Toast
          ref={c => {
            if (c) Toast.toastInstance = c
          }}
    />
</View>

and it works very well... seems easier like that to me to use it everywhere, i ll fork it to fix the position of the popup (header not counted in the position)

++