I'm using NativeBase's Toast ponent to show a message after successfully submitting a form, but I get this error message in the console every time I run it.

_onSubmit error TypeError: Cannot read property '_root' of null
    at Function.show (ToastContainer.js:79)
    at InventoryItemAdd.js:40
    at tryCallOne (core.js:37)
    at core.js:123
    at JSTimers.js:98
    at Object.callTimer (JSTimersExecution.js:95)
    at Object.callImmediatesPass (JSTimersExecution.js:199)
    at Object.callImmediates (JSTimersExecution.js:214)
    at MessageQueue.js:222
    at guard (MessageQueue.js:46)

Here's the JSX in my render function:

<Container>
    <Navbar title="Add an Inventory Item" backArrow />
    <Content keyboardShouldPersistTaps="handled">
        <InventoryItemAddForm
            onSubmit={this._onSubmit}
            data={formData}
            enableReinitialize={true}
            initialValues={initialValues}
        />
    </Content>
    <FooterTabs />
</Container>

And my _onSubmit function:

_onSubmit = ({name, inventoryTypeId, internalCode, description = "", measurementUnitId}) => {
    const {inventoryItemCreate, showErrors} = this.props

    return inventoryItemCreate({
        input: {
            name: name.trim(),
            inventoryTypeId,
            internalCode: internalCode.trim(),
            description: description.trim(),
            measurementUnitId,
        }
    })
        .then(({data: {inventoryItemCreate}}) => {
            dismissKeyboard()
            Toast.show({
                text: "Inventory item added successfully!",
                position: "bottom",
                buttonText: "Okay",
                type: "success",
                duration: 2000,
            })
            Actions.InventoryItemDetails({id: inventoryItemCreate.id})
        })
        .catch((error) => {
            console.log('_onSubmit error', error)
            showErrors()
        })
}

I'm using NativeBase's Toast ponent to show a message after successfully submitting a form, but I get this error message in the console every time I run it.

_onSubmit error TypeError: Cannot read property '_root' of null
    at Function.show (ToastContainer.js:79)
    at InventoryItemAdd.js:40
    at tryCallOne (core.js:37)
    at core.js:123
    at JSTimers.js:98
    at Object.callTimer (JSTimersExecution.js:95)
    at Object.callImmediatesPass (JSTimersExecution.js:199)
    at Object.callImmediates (JSTimersExecution.js:214)
    at MessageQueue.js:222
    at guard (MessageQueue.js:46)

Here's the JSX in my render function:

<Container>
    <Navbar title="Add an Inventory Item" backArrow />
    <Content keyboardShouldPersistTaps="handled">
        <InventoryItemAddForm
            onSubmit={this._onSubmit}
            data={formData}
            enableReinitialize={true}
            initialValues={initialValues}
        />
    </Content>
    <FooterTabs />
</Container>

And my _onSubmit function:

_onSubmit = ({name, inventoryTypeId, internalCode, description = "", measurementUnitId}) => {
    const {inventoryItemCreate, showErrors} = this.props

    return inventoryItemCreate({
        input: {
            name: name.trim(),
            inventoryTypeId,
            internalCode: internalCode.trim(),
            description: description.trim(),
            measurementUnitId,
        }
    })
        .then(({data: {inventoryItemCreate}}) => {
            dismissKeyboard()
            Toast.show({
                text: "Inventory item added successfully!",
                position: "bottom",
                buttonText: "Okay",
                type: "success",
                duration: 2000,
            })
            Actions.InventoryItemDetails({id: inventoryItemCreate.id})
        })
        .catch((error) => {
            console.log('_onSubmit error', error)
            showErrors()
        })
}

• javascript
• react-native
• react-native-ios
• native-base

• Did you find a solution for this ? I have the same issue. – Karim Mortabit Commented May 22, 2017 at 15:16
• I haven't found a solution that fixes this pletely yet, but I think it might have something to do with multiple animations running at the same time. I managed to fix some of these areas of code by navigating scenes first and then displaying the toast in another then function, but I still don't know exactly why it doesn't work or why that sometimes fixes it. – Christopher Bradshaw Commented May 24, 2017 at 5:23
• I see thanks. the ponent is probably still bugged by itself. – Karim Mortabit Commented May 24, 2017 at 9:36
• Do you still find this issue with NativeBase 2.1.4? – Supriya Kalghatgi Commented May 26, 2017 at 5:14
• I can't get it to update past 2.1.2 even after following the guide on github. – Christopher Bradshaw Commented Jun 28, 2017 at 22:01

1 Answer 1

I found out the root ponent of the app needs to be wrapped in nativebase's <Root> ponent in order for Toast notifications to work reliably.