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

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.

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 2
Comments: 30 (2 by maintainers)

Most upvoted comments

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.

+12

grahammcculloch on Mar 27, 2019

Fixed with 2.5.0

+12

SupriyaKalghatgi on Jun 8, 2018

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

+11

saranshabd on Jan 8, 2019

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

jnvbn-fwxna

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"
  }
}

horiuchie on May 14, 2018

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

Peeeep on May 10, 2018

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

abhiram-n on Jun 21, 2019

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

pcowgill on Apr 3, 2019

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 on Mar 22, 2019

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.

pango89 on Feb 7, 2020

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>

taranda on Jun 20, 2019