SolvedNativeBase Toast Issue with React-navigation close app

Hi Guys, I'm not sure why this is happening, this issue is link on this error
#836 evaluating 'this.toastInstance._root' Error when using Toast
https://facebook.github.io/react-native/docs/upgrading.html

First of all I'm using the latest version of NativeBase and ReactNative. The Toast is perfectly working but there is one issue I found which the error evaluating 'this.toastInstance._root' Error when using Toast was showing when I do this steps.

First I newly open my app, then tried to test out the toast which perfectly works. Then I tried to go on different screen using the react-navigation and still it works fine. Then the error start I'm using this code.

        this.props.navigation.dispatch(NavigationActions.reset({
        index: 0,
        actions: [ NavigationActions.navigate({ routeName: 'Home'}) ]
        }));

As you can see, the back History index:0, is set to none for my navigation using react-navigation. In this setup if I use my Android back button, it will close the App. then if I open again my app, and tried to check out the Toast, the error shows up. It seems the <Root> tag on my main App is disappear which the error occur when I test the Toast again.

Do you know how can I fix this, every time I reopen the App, the error shows even I put the tag on my main component.

thanks,

27 Answers

✔️Accepted Answer

Did you add Root as per documents? I added root to wrap my stack and the issue went away.

<NativeBase.Root>

https://docs.nativebase.io/Components.html#Toast

I added Root and it fixed the error message.

Other Answers:

@akhil-geekyants the problem occurs when using the left back button on Android, not closing completelly the app. I'm using NativeBase (2.4.2) and the problem is still present.

Btw, I solved by adding this to my main component:

  componentWillUnmount() {
    Toast.toastInstance = null;
  }

Hi Guys, just an update when I upraded my React Native it shows a new error which is
Cannot read property 'showToast' of null

can you check note me my this error show?

I'm facing with this issue exactly when close the app and then re-open the app, toast no longer working after that.

This is the screenshot error
https://www.screencast.com/t/Gt6QCRcFs

it looks like the ROOT has conflict with react-navigation , I'm not sure if this is an issue with nativebase or react-navigation but clearly the Toast and ActionSheet has issue when I force back history and reopen the app again.

More Issues: