title: Native Base Toast - TypeError: TypeError: TypeError: null is not an object (evaluating 'this.toastInstance._root.getModalState')
body: <p>I am using react native to build a mobile app. I am facing a Nativ Base Toast issue. When I first load application and then navigate to ticket status, if I go back to a home page with an android back button, following error popup.</p>
  
  <p>Below are my code and error screenshot.</p>
  
  <p><strong>NOTE</strong> - This error does not come every time.</p>
  
  <p>Any help would be appreciated.</p>
  
  <p>Thanks in advance</p>
  
  <p><a href="https://i.stack.imgur.com/QsTay.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QsTay.png" alt="enter image description here"></a></p>
  
  <p>Home.js code (render at application load)</p>
  
  <pre> <code> 
  
      import React, { Component } from 'react';
      import { createDrawerNavigator , tabBarOptions, StackNavigator} from 'react-navigation';
      import Header from './Header';
      import Request from './Request';
      import Navigation from './Navigation';
      import TicketStatus from './TicketStatus/TicketStatus';
  
      const RootStack = StackNavigator(
          {
              Home: {     screen: Request },
              Navigation: { screen: Navigation },
              TicketStatus: { screen: TicketStatus },
          },
          {
              headerMode: 'none',
              navigationOptions: {
                  headerVisible: false,
              }
          }
      );
      RootStack.navigationOptions = {
          header: null
      }
      export default RootStack;
  
  </code></pre> 
  
  <p>TicketStatus.js code</p>
  
  <pre><code>export default  class TicketStatus extends Component {
      constructor(props){
          super(props)
          this.state = {
              allTickets : [{ name:'Jones Residence', number: '12343534325', classs:'active'},{name:'Rex Bell Elementary', number: '12343534325', classs:'pending' },{name:'CitiBank Offic', number: '123435', classs:'expired' }]
          };
      }
      _fetchTickets(token)
      {
          if(this.mounted) {
              this.setState({
                  isloading: true                     
              });
          }
          fetch(config.BASE_URL+'alltickets?api_token='+token,{
              method: 'GET',
              headers: {
                      'Authorization': 'Bearer ' + token,
              }               
          })
          .then((response) =&gt; response.json())
          .then((res) =&gt; {
              if(this.mounted) {
                  if(res.status == 1)
                  {
                      this.setState({
                          allTickets: res.data,
                      });                 
                  }
                  else if(res.status == 0)
                  {
                      Toast.show({
                          text: res.message,
                          buttonText: "Okay",
                          duration: 5000,
                          type: "danger"
                      })
                  }
                  this.setState({
                      isloading: false,
                  });
              }
          }).catch(err =&gt; {
              if(this.mounted) {
                  Toast.show({
                      text: err,
                      buttonText: "Okay",
                      duration: 5000,
                      type: "danger"
                  })
              }
          }).done();
      }
      componentDidMount(){
          this.mounted = true;
          this._fetchTickets(config.token);   
      }
      componentWillUnmount(){
          this.mounted = false;
          Toast.hide();
          Toast.toastInstance = null;
      }
      renderTickets = () =&gt; {
          return (
              &lt;Content style={{height:300, backgroundColor:"#FFBC42", borderRadius:10}}&gt;
              &lt;ScrollView&gt;
                  {
                      this.state.allTickets.map((option, i) =&gt; {
                          return (
                              &lt;TouchableOpacity key={i} &gt;
                                  &lt;View&gt;
                                      &lt;Text&gt;{option.number} / {option.name}&lt;/Text&gt;
                                  &lt;/View&gt;
                              &lt;/TouchableOpacity&gt;
                          )
                      })
                  }                   
              &lt;/ScrollView&gt;
              &lt;/Content&gt;
          )
      }
      render() {
          return (
              &lt;Root&gt;
              &lt;Container&gt;
                  &lt;Header {...this.props}/&gt;
                  &lt;ScrollView&gt;
                  &lt;Content padder&gt;
                      &lt;H1 style={styless.ticket_req}&gt;Check the Status of a Ticket&lt;/H1&gt;                                            
                      {this.renderTickets()}  
                  &lt;/Content&gt;
                  &lt;/ScrollView&gt;
                  {this.state.isloading &amp;&amp; (
                          &lt;Loader /&gt;
                      )}
              &lt;/Container&gt;    
              &lt;/Root&gt;
          );
      }
  }
  </code></pre>