Toast Issue with React-navigation close app

[eggybot]

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,

[sankhadeeproy007]

Are you just using the StackNavigator?

[eggybot]

@sanketsahusoft

yes, I'm using stackNavigator for react-navigation. Its the same as the sample Toast in your documentation. But using the this.props.navigation.dispatch and setting index to 0, the error shows once you totally use the back button on the phone which close the application then when you go back it seems the Root has been remove.

I upload now in the my git the project sample which showing the error, https://github.com/eggybot/NativeBase_TOAST_Issue Just clone it and run npm install to test the sample. I will delete this once the issue is solve.

[eggybot]

any one can give me advice on this issue?

[eggybot]

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?

[ohtangza]

I'm also experiencing this.toastInstance._root' error too...

[eggybot]

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.

[douglasjunior]

Same problem here, it happens sometimes.

native-base: 2.3.1 react-native 0.47.1

[kingbin]

I'm seeing this issue when I go from native-base 2.1.4 to 2.1.5. I'm using RNRF.

native-base: 2.1.5 react-native 0.45.0 react 16.0.0-alpha.12 RNRF: 4.0.0-beta.19

[vexsnare]

Personally I found this library more stable. Its not heavy weight https://react-native-training.github.io/react-native-elements

[mitesh-mutha]

I experience this issue as well. I am unable to figure out what causes it. It happens for both Toast and Action Sheet.

[thienlhh]

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

[thienlhh]

While waiting for this fix, I have workaround by using this package to exit the app. Just apply when root component unmounting.

Hope this help.

[azat-co]

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.

[kesiena115]

See my solution here

[akhil-ga]

Not present with the latest version of NativeBase (2.3.5). Closing this issue. Let us know if you are facing any issue.

Gif

[edumelzer]

@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;
  }

[SupriyaKalghatgi]

@edumelzer We will re-check on this

[alwex]

Same for me on native base v2.3.10

[akhil-ga]

@alwex can you try edumelzer's solution https://github.com/GeekyAnts/NativeBase/issues/1121#issuecomment-388443807

[alwex]

@akhil-geekyants this solution works, but it is more a workaround than a real solution

[akhil-ga]

@alwex this will be fixed in the next release. See PR https://github.com/GeekyAnts/NativeBase/pull/1700

[SupriyaKalghatgi]

Fixed with 2.5.0

[znnnnn]

that's solution might help you.

[Dellybro]

This is still an issue. Is there a solution?

[eggybot]

Base on my Firebase Crashlytics, this issue still randomly showing on users.

Fatal Exception: com.facebook.react.common.c: null is not an object (evaluating 'this.toastInstance._root'), stack:
value@647:1828
value@820:1914
value@-1
o@824:1807
<unknown>@828:1141
forEach@-1
<unknown>@828:1120
value@44:1280
value@23:3518
<unknown>@23:822
value@23:2772
value@23:794
value@-1

       at com.facebook.react.modules.core.ExceptionsManagerModule.showOrThrowError + 20(ExceptionsManagerModule.java:20)
       at com.facebook.react.modules.core.ExceptionsManagerModule.reportFatalException(ExceptionsManagerModule.java)
       at java.lang.reflect.Method.invoke(Method.java)
       at com.facebook.react.bridge.JavaMethodWrapper.invoke + 149(JavaMethodWrapper.java:149)
       at com.facebook.react.bridge.JavaModuleWrapper.invoke + 21(JavaModuleWrapper.java:21)
       at com.facebook.react.bridge.queue.NativeRunnable.run(NativeRunnable.java)
       at android.os.Handler.handleCallback + 873(Handler.java:873)
       at android.os.Handler.dispatchMessage + 99(Handler.java:99)
       at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java)
       at android.os.Looper.loop + 214(Looper.java:214)
       at com.facebook.react.bridge.queue.MessageQueueThreadImpl$4.run + 37(MessageQueueThreadImpl.java:37)
       at java.lang.Thread.run + 764(Thread.java:764)

I'm using the latest version as well the new RN version 0.60.5 and Nativebase.

I suspect this behavior error is showing due to the RN Navigation.

[HugoLiconV]

I'm getting this error too, I have this versions native-base 2.13.4 react 16.8.3 react-native 0.59.10 I already wrap my components with <Root>. I'm using redux so I created a HOC

const withReduxStoreWrapper = (Component, store) =>
  class StoreWrapper extends React.Component {
    render() {
      return (
        <Provider store={store}>
          <PersistGate loading={null} persistor={persistor} {...this.props}>
            <Root {...this.props}>
              <Component {...this.props} />
            </Root>
          </PersistGate>
        </Provider>
      );
    }
  };

and this is how I register a screen

  Navigation.registerComponent(DELIVERIES_SCREEN, () =>
    withReduxStoreWrapper(
      require("./components/screens/Deliveries").default,
      store
    )
  );