Quantcast
Channel: Active questions tagged react-native+android - Stack Overflow
Viewing all articles
Browse latest Browse all 28469

Native Base Toast - TypeError: TypeError: TypeError: null is not an object (evaluating 'this.toastInstance._root.getModalState')

$
0
0

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.

Below are my code and error screenshot.

NOTE - This error does not come every time.

Any help would be appreciated.

Thanks in advance

enter image description here

Home.js code (render at application load)

 

    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;

TicketStatus.js 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) => response.json())
        .then((res) => {
            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 => {
            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 = () => {
        return (
            <Content style={{height:300, backgroundColor:"#FFBC42", borderRadius:10}}>
            <ScrollView>
                {
                    this.state.allTickets.map((option, i) => {
                        return (
                            <TouchableOpacity key={i} >
                                <View>
                                    <Text>{option.number} / {option.name}</Text>
                                </View>
                            </TouchableOpacity>
                        )
                    })
                }                   
            </ScrollView>
            </Content>
        )
    }
    render() {
        return (
            <Root>
            <Container>
                <Header {...this.props}/>
                <ScrollView>
                <Content padder>
                    <H1 style={styless.ticket_req}>Check the Status of a Ticket</H1>                                            
                    {this.renderTickets()}  
                </Content>
                </ScrollView>
                {this.state.isloading && (
                        <Loader />
                    )}
            </Container>    
            </Root>
        );
    }
}

Viewing all articles
Browse latest Browse all 28469

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>