Nativebase: Toast onClose not firing

[Michael-M-Judd]

Issue Description

It looks like the Toast onClose property isn't firing for me in any case. This is happening both on Android an iOS.

Example: https://snack.expo.io/3r4vae3LY

node, npm, react-native, react and native-base version, expo version if used, xcode version

"react-native": "0.63.0",
"native-base": "^2.13.13",
"react": "16.13.1",

Expected behaviour

The onClose function actually gets called

Actual behaviour

onClose is never called.

Steps to reproduce

Just try to add an onClose to a Toast and it should not work.

const Test = () => (
  <Button
    title="Show Toast"
    onPress={() => {
      Toast.show({
        text: "This is the toast",
        duration: 5000,
        buttonText: "click me",
        onClose: (reason) => {
          // this is never fired in any case, whether clicking on buttonText or letting it self-dismiss
          console.warn(reason);
          throw new Error('should error');
        },
      })
    }}
  />
)

Is the bug present in both iOS and Android or in any one of them?

Both

[raazatul7]

I used this code and it's working fine, in alert box I got "user" and it automatically fades the alert says "timeout"

Toast.show({
        text: 'message',
        buttonText: 'OK',
        duration: 2000,
        // type: type,
        onClose: (resaon) => {
          alert(reason);
        },
        position: 'bottom',
      });

I am using
"react-native": "0.62.2",
"native-base": "^2.13.13",
"react": "16.13.1",

[Michael-M-Judd]

I used this code and it's working fine, in alert box I got "user" and it automatically fades the alert says "timeout"

Toast.show({
        text: 'message',
        buttonText: 'OK',
        duration: 2000,
        // type: type,
        onClose: (resaon) => {
          alert(reason);
        },
        position: 'bottom',
      });

I am using
"react-native": "0.62.2",
"native-base": "^2.13.13",
"react": "16.13.1",

Hmm, maybe some regression from react 0.62.2 -> 0.63.0 🤔

[raazatul7]

I used this code and it's working fine, in alert box I got "user" and it automatically fades the alert says "timeout"

Toast.show({
        text: 'message',
        buttonText: 'OK',
        duration: 2000,
        // type: type,
        onClose: (resaon) => {
          alert(reason);
        },
        position: 'bottom',
      });

I am using
"react-native": "0.62.2",
"native-base": "^2.13.13",
"react": "16.13.1",

Hmm, maybe some regression from react 0.62.2 -> 0.63.0 🤔

I suggest to use 0.62.2 as it is the most stable version, 0.63.0 has a lot of issues to be fixed.

[nitin-chauhan66]

onClose is not working for me
i am using
"react-native": "0.62.2",
"native-base": "^2.13.13",
"react": "16.11.0"

[vidit-bhatia]

not working for me either

"react-native": "0.62.2",
"native-base": "^2.13.13",
"react": "16.11.0"

[vidit-bhatia]

probably related to #3196

[vidit-bhatia]

possible solution

downgrading to
"native-base": "2.13.12"

works

it start giving a warning though
Animated use native driver was not specified

[Xopsy]

possible solution

downgrading to
"native-base": "2.13.12"

works

it start giving a warning though
Animated use native driver was not specified

To avoid all warning about this, you need to go to native-base in your node modules, and you have to add in every component where there are Animated.timing or Animated.spring and adding useNativeDriver, in my case I have added in all of them useNativeDriver: true, but I don't have time to research ,on Item component I had to write useNativeDriver: false because I got an error saying "style property "top" is no native module", I guess in that scenario useNativeDriver: true is not supported.

[vidit-bhatia]

any update on this

[eggybot]

any solution for this one? I found out that the latest version is affecting the react-navigation Tabs.
I'm using the latest version

....
"react-native": "0.63.2",
"native-base": "2.13.13",
"@react-navigation/bottom-tabs": "^5.8.0",
"@react-navigation/drawer": "^5.9.0",
"@react-navigation/native": "^5.7.3",
"@react-navigation/stack": "5.9.0",
....

[vidit-bhatia]

for me react navigation was ok may be because I am on an older version

[walterholohan]

Version 2.13.14 was released 14 days ago which has the fix for this issue.

[hanykumar]

Hi @Michael-M-Judd , we just published a new version 2.13.14 with the latest dependency fixes.
Can you please upgrade and let us know if the issue still persists?

[this-username-is-taken]

I can verify this issue was present on native-base 2.13.8 but has been fixed in 2.13.14.

react: 16.13.1
react-native: 0.63.2