Nativebase: JS error on Toast.show when navigating out then back to screen

[jvelo]

react-native, react and native-base version

native-base : 2.1.5
react-native : 0.45.1

Expected behaviour

Toast should continue to show and not report a JS error after user navigates the app and comes back to a view.

Actual behaviour

Error is reported when displaying a toast upon network fetch success ; only when navigating back again to the concerned screen (first time, toast shows just fine).

null is not an object (evaluating 'this.toastInstance._root.showToast')
show
    ToastContainer.js:90:115
<unknown>
    index.android.js:97:17
tryCallOne
    core.js:37:14
<unknown>
    core.js:123:25
<unknown>
    JSTimers.js:117:50
callTimer
    JSTimersExecution.js:95:8
callImmediatesPass
    JSTimersExecution.js:199:36
callImmediates
    JSTimersExecution.js:214:11
<unknown>
    MessageQueue.js:223:23
__guard
    MessageQueue.js:213:6
__callImmediates
    MessageQueue.js:223:17
<unknown>
    MessageQueue.js:102:6
__guard
    MessageQueue.js:213:6
callFunctionReturnFlushedQueue
    MessageQueue.js:100:17

View code is :

      <Container>
        <Content>
          <List>
            {
              [5, 10, 20, 30, 45].map(duration =>
                <ListItem key={duration} onPress={() => this.confirm(duration)}><Text>{duration} minutes</Text></ListItem>)
            }
          </List>
        </Content>
      </Container>

confirm method performs a network fetch, and success/error callbacks trigger the toast.

Is the bug present in both ios and android or in any one of them?

Present on Android ; I don't have the environment to try on iOS yet but will do.

Any other additional info which would help us debug the issue quicker.

I use StackNavigator from react-navigation (1.0.0-beta.11)

[horiuchie]

same problem on iOS as well, with v2.1.5.

It does not happen with the latest release(v2.1.4).
But "npm install" without specifying a version, v2.1.5 will be installed.

So, I have reinstalled v2.1.4 and use it.

[theohdv]

Same for me

[shivrajkumar]

Fixed in the latest version 2.2. Do check the docs as the use case for toast and actionsheet has changed a bit.
http://docs.nativebase.io/Components.html#Toast

[ittianyu]

@shivrajkumar
It appear on
"native-base": "^2.3.1",
"react": "16.0.0-alpha.12",
"react-native": "0.47.1",

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

I have add root.

export default () =>
    <Root>
        <Navigator/>
    </Root>

Most of time it works.
But sometimes not.
Not clear what happen.

[Draccan]

It appear even on:
"native-base": "^2.3.6"
"react":"16.2.0"
"react-native":"0.52.0"

The same even for ActionSheet.

ActionSheets and Toasts work well until user change screen and comes back with StackNavigator. Is there a way to fix the problem?

[Draccan]

Ok Guys! I've solved the problem!

The best thing you can do is to use only one Root in all the application and put it in the top-level component.

For example I've removed Root in all the components (I was putting them in each screen-component and not child-component) and put it in your App.js file (or your index.js).

In my case I have:

<Provider {...stores}> <Root> <Navigator/> </Root> </Provider>

Hope it helps 👍

[SupriyaKalghatgi]

@Draccan Yes, you were wrong in using it