TypeError: Cannot read property 'show' of null

[Victorcassiano]

When I show a toast and navigate to a screen and when I go back to the screen where I showed the toast the Toast.show() function shows me TypeError: Cannot read property 'show' of null

Code:

        try {
          setMessageToast(
            'Estamos enviado um e-mail para você contendo um código de autorização',
          );
          Toast.show({
            type: 'success',
            topOffset: 20,
            autoHide: false,
          });
        } catch (err) {
          console.log(err);
        }

        await AsyncStorage.mergeItem('@storage_signup', data);

        const responseData = await AsyncStorage.getItem('@storage_signup');

        const result = responseData && JSON.parse(responseData);

        await api.post('/users/auth-signup', {
          fullname: result.fullname,
          nickname: result.nickname,
          email: result.email,
        });

        Toast.hide();

        navigation.navigate('SignUp4');

All of the above code is inside a try catch

Remembering that the toast is displayed only once, only after a while it is displayed again without the mentioned error

[campsjos]

You're probably using React Navigation. If that's the case, try this: https://github.com/calintamas/react-native-toast-message#how-to-render-the-toast-when-using-react-navigation

[Victorcassiano]

Você provavelmente está usando o React Navigation. Se for esse o caso, tente isto: https://github.com/calintamas/react-native-toast-message#how-to-render-the-toast-when-using-react-navigation

Is it to add on the page where the toast will be used or in App.js, which would be the root of the app?

[campsjos]

In App.js, just before closing </NavigationContainer>. Then you can call Toast from anywhere in the app.

[Victorcassiano]

I did what you asked me to do, "it works". But toast is still having problems the difference is that when giving an error the app doesn't break, but still returns [TypeError: Cannot read property 'show' of null]

[campsjos]

Your code seems correct to me, maybe Toast is not imported in your component?

[Victorcassiano]

Seu código parece correto para mim, talvez o Toast não seja importado em seu componente?

it is being imported, the problem occurs when I show toast and navigate to another screen and go back to the previous screen and try to show toast

[bulkinav]

I have same issue in my Android app on production, but not on iOS (!)

com.facebook.react.common.JavascriptExceptionExceptionsManagerModule.java:83 TypeError: Cannot read property 'show' of null, js engine: hermes, stack: show@1:595302 anonymous

App crashes with several hundred a day and it's depressing. Unfortunately I am unable to reproduce this issue as write @Victorcassiano and it does not seem to occur on all devices.

[manishbss-sdei]

Seu código parece correto para mim, talvez o Toast não seja importado em seu componente?

it is being imported, the problem occurs when I show toast and navigate to another screen and go back to the previous screen and try to show toast

Same issue here ...

[eulerkochy]

Same issue. Simple stuff like this, doesn't work. Fails with the error TypeError: Cannot read property 'show' of null, js engine: hermes

React.useEffect(() => {
    Toast.show({
      type: 'success',
      text1: 'Hello',
      text2: 'This is some something 👋'
    });
  }, []);

[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!

[Jevinbambhroliya]

i use toast with prime react and i have same issue so what can i do for that