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

patrickalbani · 2018-04-16T22:25:53Z

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.

The text was updated successfully, but these errors were encountered:

SupriyaKalghatgi · 2018-04-17T03:47:12Z

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

patrickalbani · 2018-04-17T11:32:01Z

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 · 2018-04-24T10:42:13Z

I have reproduced the same issue.

Steps to reproduce

Create a project referring to Setup with React Native.
Use Toast component inside <Root> as shown in below screenshot.
Run react-native run-android.
Press Toast button at the top left and OKAY at the bottom right.
Press hardware back button to minimize the app and reopen it.
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 · 2018-05-04T07:13:40Z

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

Peeeep · 2018-05-10T10:50:13Z

Same here @2.4.3

Edit: Setting toastInstance to null on willMount or willUnmount does the trick for me (See #739):

  componentWillUnmount() {
    Toast.toastInstance = null;
  }

SupriyaKalghatgi · 2018-06-08T13:06:23Z

Fixed with 2.5.0

saranshabd · 2019-01-08T13:04:24Z

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

masoudamirian · 2019-01-15T19:21:25Z

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

thank you. works fine👌👌

mepritam · 2019-01-31T15:07:16Z

#2173 (comment)

roadev · 2019-03-22T15:10:37Z

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 · 2019-03-22T15:13:12Z

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

grahammcculloch · 2019-03-27T08:30:23Z

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 · 2019-04-03T15:53:07Z

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

taranda · 2019-06-20T21:36:42Z

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 · 2019-06-21T21:23:37Z

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

yogini-bende · 2019-07-24T10:21:29Z

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

BatDroid · 2019-07-24T11:17:45Z

@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 · 2019-07-25T06:10:55Z

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 · 2019-07-25T16:35:43Z

@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 · 2020-02-07T11:09:36Z

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 · 2020-02-10T07:35:48Z

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 · 2020-02-17T14:07:06Z

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

Yogiyadavmca · 2020-03-18T09:39:32Z

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

samipshah100 · 2020-04-25T10:46:43Z

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 · 2020-04-29T23:49:43Z

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

summerkiflain · 2020-07-25T11:58:03Z

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 · 2020-07-25T19:22:01Z

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 · 2020-10-20T17:38:29Z

I am also getting the issue in version 2.13.14

bilalyaqoob · 2020-12-27T20:19:31Z

Fixed with 2.5.0

I am using native base "native-base": "^2.13.14", still not fiexd

pbassut · 2021-10-07T02:36:22Z

I'm having this issue on 2.15.2

akhil-ga added the bug label Apr 24, 2018

akhil-ga mentioned this issue May 15, 2018

If application root is reinitialized, update ActionSheet and Toast refs #1700

Merged

SupriyaKalghatgi closed this as completed Jun 8, 2018

grahammcculloch mentioned this issue Mar 27, 2019

Unhandled exception while showing NativeBase Toast appdevdesigns/adroit-mobile#28

Open

marcelomorgado mentioned this issue Apr 3, 2019

Removed duplicate loading screen tasitlabs/tasit-apps#237

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

patrickalbani commented Apr 16, 2018

SupriyaKalghatgi commented Apr 17, 2018

patrickalbani commented Apr 17, 2018

horiuchie commented Apr 24, 2018 •

edited

AdamChrist commented May 4, 2018

Peeeep commented May 10, 2018 •

edited

SupriyaKalghatgi commented Jun 8, 2018

saranshabd commented Jan 8, 2019

masoudamirian commented Jan 15, 2019

mepritam commented Jan 31, 2019

roadev commented Mar 22, 2019 •

edited

roadev commented Mar 22, 2019 •

edited

grahammcculloch commented Mar 27, 2019

pcowgill commented Apr 3, 2019

taranda commented Jun 20, 2019

abhiram-n commented Jun 21, 2019

yogini-bende commented Jul 24, 2019 •

edited

BatDroid commented Jul 24, 2019

yogini-bende commented Jul 25, 2019 •

edited

abhiram-n commented Jul 25, 2019 •

edited

pango89 commented Feb 7, 2020 •

edited

KesavSundarM commented Feb 10, 2020

the-mace commented Feb 17, 2020

Yogiyadavmca commented Mar 18, 2020

samipshah100 commented Apr 25, 2020

Aryk commented Apr 29, 2020

summerkiflain commented Jul 25, 2020 •

edited

Aryk commented Jul 25, 2020 •

edited

DaggieBlanqx commented Oct 20, 2020

bilalyaqoob commented Dec 27, 2020

pbassut commented Oct 7, 2021 •

edited

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

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

Comments

patrickalbani commented Apr 16, 2018

SupriyaKalghatgi commented Apr 17, 2018

patrickalbani commented Apr 17, 2018

horiuchie commented Apr 24, 2018 • edited

Steps to reproduce

Screenshot of emulator

package.json

AdamChrist commented May 4, 2018

Peeeep commented May 10, 2018 • edited

SupriyaKalghatgi commented Jun 8, 2018

saranshabd commented Jan 8, 2019

masoudamirian commented Jan 15, 2019

mepritam commented Jan 31, 2019

roadev commented Mar 22, 2019 • edited

roadev commented Mar 22, 2019 • edited

grahammcculloch commented Mar 27, 2019

pcowgill commented Apr 3, 2019

taranda commented Jun 20, 2019

abhiram-n commented Jun 21, 2019

yogini-bende commented Jul 24, 2019 • edited

BatDroid commented Jul 24, 2019

yogini-bende commented Jul 25, 2019 • edited

abhiram-n commented Jul 25, 2019 • edited

pango89 commented Feb 7, 2020 • edited

KesavSundarM commented Feb 10, 2020

the-mace commented Feb 17, 2020

Yogiyadavmca commented Mar 18, 2020

samipshah100 commented Apr 25, 2020

Aryk commented Apr 29, 2020

summerkiflain commented Jul 25, 2020 • edited

Aryk commented Jul 25, 2020 • edited

DaggieBlanqx commented Oct 20, 2020

bilalyaqoob commented Dec 27, 2020

pbassut commented Oct 7, 2021 • edited

horiuchie commented Apr 24, 2018 •

edited

Peeeep commented May 10, 2018 •

edited

roadev commented Mar 22, 2019 •

edited

roadev commented Mar 22, 2019 •

edited

yogini-bende commented Jul 24, 2019 •

edited

yogini-bende commented Jul 25, 2019 •

edited

abhiram-n commented Jul 25, 2019 •

edited

pango89 commented Feb 7, 2020 •

edited

summerkiflain commented Jul 25, 2020 •

edited

Aryk commented Jul 25, 2020 •

edited

pbassut commented Oct 7, 2021 •

edited