Use Native Base Toast To Show Error From Redux Action

native-base toast undefined is not an object
native base toast cannot read property '_root' of undefined
toast native-base not working
react-native toast
react native toast error
how to use toast in react native
cannot read property 'root' of undefined native base toast
native base toast center

I'm using NativeBase in a React Native app. I'm trying to show a Toast component based on an error that is set in an redux action because it happens via a call to the API.

It will show now, but currently I get the warning message:

Warning: Cannot update during an existing state transition (such as within render or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to componentWillMount.

I'm not sure how I could bind this or what I could do to solve the warning.

Render Method

render() {
  return (

You can create a function and call this one outside. But make sure your app is wrap with the Root component of native-base. No need to return a component like you do. Calling this function gonna show the toastr and now you have the freedom to call from anywhere. But make sure Root component wrap your app.

import { Toast } from 'native-base';

export const toastr = {
  showToast: (message, duration = 2500) => {{
      text: message,
      position: 'bottom',
      textStyle: { textAlign: 'center' },
      buttonText: 'Okay',

Now inside your action you can call the toastr function

toastr.showToast('Verication code send to your phone.');

Or in redux actions

const signup = values => dispatch => {
  try {
    // your logic here

  } catch (error) {

Toast not working · Issue #584 · GeekyAnts/NativeBase · GitHub, I am trying to use native-base Toast component, but it won't work. When I use it, it is throwing error: 'Element type is invalid: expected a string (for built-in loading_status: false });; }).catch((err) => { console.log('Failing in login page'){ text: 'Wrong password!', position: 'bottom',  That is, the script so far looks like this: import { Toast } from 'native-base'; export function* message() { //… I'm trying to create a method inside the redux-saga to charm the toast so as to display on the screen.

Check React Native Seed for this implementation

Toast doesn't work on Redux action (thunk) with react-native , Check latest documentation:; Check for existing I'm using Wix React Native Navigation with Redux, and all I want is to use Toast.​show inside a Redux Action (redux-thunk) . I try using Root on my  For Toast to work, you need to wrap your topmost component inside from native-base. <Root> <AppNavigator /> </Root> 👎

I solved this issue by using React Hooks.

() => {
       useEffect(() => {
           if(error) {
                   text: this.props.error.message,
                   buttonText: 'Okay',
                   duration: 5000,
                   type: 'danger'

        return (

Use Toast with redux-saga - React Native, a method inside the redux-saga to charm the toast so as to display on position } = action; yield put({ text: 'Informe seu usuário e  Simple to use, easy to customize Toast component for Android & iOS. Developed with love for redux apps - Wolox/react-native-redux-toast

Components · NativeBase, picker, segment, swipeable list, tabs, toast, drawer, thumbnail, spinner, layout, search Usage of Container's Header component is very similar to your HTML <​head>. Replacing Component: React Native Keyboard Aware Scroll View's navigate, performing interactive actions such as showing or hiding something in  Basic Redux Counter Example. This is a simple single page application that uses Redux and NativeBase as the main Libraries. Find full code here. 1. Aim. We aim to create a simple App that has a counter with increment and decrement functionality. The logic is implemented in Redux. 2. Installation. Note:

A Better way To Show Toasts and Navigate in React Native , It's a very common feature to show toasts in an app to inform the user of certain events. If you are using redux an example would be as follows listen and take actions on events , for egMitt (a Tiny 200b functional event  A react native module to show toast like android, it works on iOS and Android. - crazycodeboy/react-native-easy-toast

Toast notification system in a React/Redux application, to display important alerts, without using the user's native notification src/​reducers/toasts.js export default function toasts(state = [], action)  NativeBase makes use of List to design Forms that include group of related input components. Include any combination of NativeBase components to make up your form. Input is a NativeBase component built on top of React Native's TextInput. A foundational component for inputting text into the app via a keyboard.

  • Thanks for sharing that. Looking through their code, it looks like they are only validating the input from the form and showing the Toast based on that. I need to show the Toast based on a response from the API. For example, if the username and password don't match an account, I need to show the Toast.