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

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)

[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 👍

[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.