Nativebase: TypeError: null is not an object (evaluating 'this.toastInstance._root.showToast')

[patrickalbani]

Using "native-base": "^2.3.3"

My App:

const Client = () => (
  <ApolloProvider client={client}>
    <I18nextProvider i18n={i18next}>
      <Root>
        <App />
      </Root>
    </I18nextProvider>
  </ApolloProvider>
);
export default Client;

Using android.
The case happens when a i started my app, click in back button until minimize the app, then open app, after this, happens the error.

[SupriyaKalghatgi]

@patrickalbani NativeBase is on 2.4.2
Also share your package.json along with your code snippet

[patrickalbani]

Upgrade version, still the same.

My package.json:

{
    "name": "xxx",
    "version": "0.0.1",
    "private": true,
    "scripts": {
        "start": "node node_modules/react-native/local-cli/cli.js start",
        "test": "jest"
    },
    "dependencies": {
        "apollo-cache-inmemory": "^1.1.2",
        "apollo-client": "^2.1.0",
        "apollo-link": "^1.0.5",
        "apollo-link-context": "^1.0.2",
        "apollo-link-error": "^1.0.2",
        "apollo-link-http": "^1.3.0",
        "graphql": "^0.11.7",
        "graphql-tag": "^2.5.0",
        "i18next": "^10.2.1",
        "jwt-decode": "^2.2.0",
        "moment": "^2.19.3",
        "native-base": "2.4.2",
        "prop-types": "^15.6.0",
        "react": "16.2.0",
        "react-apollo": "^2.0.1",
        "react-i18next": "^7.2.0",
        "react-native": "0.52.0",
        "react-native-auto-scroll": "^0.0.1",
        "react-native-aws3": "^0.0.8",
        "react-native-camera": "^0.12.0",
        "react-native-communications": "^2.2.1",
        "react-native-fast-image": "^2.2.4",
        "react-native-fcm": "^10.0.3",
        "react-native-i18n": "^2.0.10",
        "react-native-material-design-searchbar": "^1.8.0",
        "react-native-material-dialog": "^0.7.1",
        "react-native-permissions": "^1.0.6",
        "react-native-signature-capture": "^0.4.9",
        "react-native-splash-screen": "^3.0.6",
        "react-native-vector-icons": "^4.4.2",
        "react-navigation": "^1.0.0-beta.21",
        "recompose": "^0.26.0"
    },
    "devDependencies": {
        "babel-eslint": "^8.0.3",
        "babel-jest": "21.2.0",
        "babel-preset-react-native": "4.0.0",
        "eslint": "^4.12.1",
        "eslint-config-airbnb-base": "^12.1.0",
        "eslint-plugin-import": "^2.8.0",
        "eslint-plugin-jest": "^21.7.0",
        "eslint-plugin-react": "^7.5.1",
        "eslint-plugin-react-native": "^3.2.0",
        "i18next-conv": "^6.0.0",
        "jest": "21.2.1",
        "react-test-renderer": "16.0.0"
    },
    "jest": {
        "preset": "react-native"
    }
}

[horiuchie]

I have reproduced the same issue.

Steps to reproduce

1. Create a project referring to Setup with React Native.
2. Use Toast component inside
3. Run react-native run-android.
4. Press Toast button at the top left and OKAY at the bottom right.
5. Press hardware back button to minimize the app and reopen it.
6. Press Toast button again, it happen.

Screenshot of emulator

package.json

{
  "name": "nb1790",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "native-base": "^2.4.2",
    "react": "16.3.1",
    "react-native": "0.55.3"
  },
  "devDependencies": {
    "babel-jest": "22.4.3",
    "babel-preset-react-native": "4.0.0",
    "jest": "22.4.3",
    "react-test-renderer": "16.3.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

[AdamChrist]

same issue on reopen app
version : "native-base": "2.3.3"

[Peeeep]

Same here @2.4.3

Edit: Setting toastInstance to null on willMount or willUnmount does the trick for me (See https://github.com/GeekyAnts/NativeBase/issues/739):

  componentWillUnmount() {
    Toast.toastInstance = null;
  }

[SupriyaKalghatgi]

Fixed with 2.5.0

[saranshabd]

Wrapping the component in <Root> will do the trick. <Root> will be imported from native-base

[masoudamirian]

Wrapping the component in <Root> will do the trick. <Root> will be imported from native-base

thank you. works fine👌👌

[mepritam]

https://github.com/GeekyAnts/NativeBase/issues/2173#issuecomment-459377940

[roadev]

null is not an object (evaluating 'this.toastInstance._root.showToast'), stack: value@700:5249
 <unknown>@1365:995 __tryOrUnsub@1369:5256 error@1369:4648 _error@1369:2029 
error@1369:1724 notifyError@1426:1066 _error@1428:1141 error@1369:1724 _error@1369:2029 
error@1369:1724 _error@1369:2029 error@1369:1724 f@1467:6929 value@94:1505 value@93:9873 
value@93:6578 <unknown>@93:14368 value@27:1855 value@20:4857 <unknown>@20:2368 
value@20:4111 value@20:2340

I'm getting the error in v2.8.1
I have my components wrapped inside <Root>

[roadev]

If I call the Toast from Redux, should I wrap the <Provider> inside <Root> too?

[grahammcculloch]

Ok - I'm getting this same error with native-base v2.12.1 and I _do_ have <Root> as my top-level component (@roadev fyi my <Root> is wrapping my redux <Provider> component).

Happens both on Android and iOS devices.

[pcowgill]

We're having the same issue as @grahammcculloch. Maybe this issue should be reopened?

[taranda]

Same issue with native-base v2.12.0. So far only on Android 8+. Here is the top level render method:

      <Root>
        <StyleProvider>
          <Provider store={store}>
            <RootNavigator />
          </Provider>
        </StyleProvider>
      </Root>

[abhiram-n]

I see the same issue too. I'm on "native-base": "^2.12.1". Root is my top level component.

[yogini-bende]

Same issue. @abhiram-n Did you find any solution or workaround on this? I am also using "native-base": "^2.12.1"

[BatDroid]

@yogini-bende i sometimes see it as an error report in the sentry. do you know in which cases it happens. do you have still this issue in 2.13.0

[yogini-bende]

This is my showToast function, where I am calling toast from native-base.

export default function showToast(  
  msg,
  sidebarColor = "#73A500", 
  type = "SUCCESS"
 ) {
   Toast.show({
    buttonText: "",
     text: (
      <Text
        style={{
          flexDirection: "row"
        }}
      >
        {type === "NETWORK" ? (
          <FontAwesome
            name="exclamation-circle"
            size={20}
            style={{ color: sidebarColor, alignSelf: "center" }}
          />
        ) : (
          <Ionicons
            name="ios-checkmark-circle"
            size={20}
            style={{ color: "#73A500", alignSelf: "center" }}
          />
        )}
        <Text style={{ alignSelf: "center" }}>
          {"  "}
          {msg}
        </Text>
      </Text>
    ),
    type: "success",
    position: "top",
    duration: 5000,
    textStyle: [
      {
        textAlign: "left",
        color: "#6D6D6D"
      },
      commonStyles.font_13
    ],
    style: {
      backgroundColor: "white",
      borderLeftColor: sidebarColor,
      borderLeftWidth: 5,
      borderBottomColor: "grey",
      borderBottomWidth: 1,
      marginTop: APP.RUNNING_ON_ANDROID ? 25 : 0
    }
  });
}

and this is the function where I am using that showToast method,

handleFirstConnectivityChange(connectionInfo) {
    if(connectionInfo.type === NETWORK_STATUS.NONE || connectionInfo.type === 
    NETWORK_STATUS.UNKNOWN) {
      showToast("There is no internet connection", "#FDBF39", "NETWORK");
    }
  }

handleFirstConnectivityChange is throwing this error and no workaround is working. I have even tried to upgrade native-base to 2.13.0 , but no luck.

Can you suggest something @BatDroid

[abhiram-n]

@yogini-bende I believe I got around this by hiding the toasts in componentWillUnmount:
componentWillUnmount() { if (Toast.toastInstance != null && Toast.toastInstance.root != null) { Toast.hide(); } }

Same issue. @abhiram-n Did you find any solution or workaround on this? I am also using "native-base": "^2.12.1"

[pango89]

I am also seeing the same issue with v2.13.8. My top level component is already wrapped with <Root>.
I am seeing this only when I go back in react navigation stack to the component where Toast is being used.

[KesavSundarM]

I am also facing this issue with v2.12.1. I've wrapped my top level component with <Root>. Any update on this @SupriyaKalghatgi ?

[the-mace]

Same issue, also wrapped in a , also on native base 2.13.8.

[Yogiyadavmca]

I am too getting this issue on native-base 2.13.8. Could someone share the workaround for this?

[samipshah100]

I am using Root as top level component.

This issue only seems to occur when I ask the user for permissions. (permissions alert/popup seems to be outside root or interfering with root causing this issue)

[Aryk]

I'm getting it too with the same use case as @pango89

[summerkiflain]

Yep I am also seeing this in Sentry logs:

Error:

null is not an object (evaluating 'this.toastInstance._root.showToast')

package.json

...
"expo": "^38.0.0",
"native-base": "^2.13.12",
...

App.js render method:

<BugsnagErrorBoundary FallbackComponent={ErrorFallback}>
  <AppearanceProvider>
    <Provider store={store}>
      <PersistGate loading={this._renderLoading()} persistor={persistor}>
        <Root>
          <StyleProvider style={getTheme(appTheme === 'light' ? customThemeLight : customThemeDark)}>
            <View style={styles.container}>
              <StatusBar barStyle="light-content" backgroundColor={Colors.statusBarBackgroundColor} animated={true} />
              <AppNavigator
                ref={ref => this._appNavigator = ref}
                screenProps={{
                  appTheme,
                  navigationStatePersisted: this._navigationStatePersisted
                }}
                {...this.getPersistenceFunctions()}
                renderLoadingExperimental={() => this._renderLoading()}
                theme={appTheme === 'light' ? 'light' : 'dark'}
              />
            </View>
          </StyleProvider>
        </Root>
      </PersistGate>
    </Provider>
  </AppearanceProvider>
</BugsnagErrorBoundary>

[Aryk]

try this, using it for a month or two...so far so good...

import React, {useCallback, useRef} from "react";
// Solution based on the one here: https://github.com/GeekyAnts/NativeBase/issues/985#issuecomment-411379940
import {Container as ContainerNB, NativeBase, Toast as ToastNB} from "native-base";
import {useFocusEffect} from "@react-navigation/native";

class Toast extends ToastNB {}

const Container = ({children, ...props}: NativeBase.Container & {children: any}) => {

  const toastInstance = useRef();

  useFocusEffect(useCallback(() => {
    if (toastInstance.current && toastInstance !== (Toast as any).toastInstance) {
      (Toast as any).toastInstance = toastInstance.current;
    }
  }, []));

  return <ContainerNB {...props}>
    {/*Needs to be first*/}
    {children}
    {/*// @ts-ignore*/}
    <Toast
      ref={c => {
        if (c) {
          (Toast as any).toastInstance = c;
          toastInstance.current = c;
        }
      }}
    />
  </ContainerNB>;
};

[DaggieBlanqx]

I am also getting the issue in version 2.13.14