Stop Activity indicator animation when server is not connected

[KalidassM01]

Hi,

You can find my Login screen API code below. I am using Activity indicator animation which is working fine, whenever the button is pressed. Once the user inputs(username & password) match with the API data correctly, the screen will be navigated to Home screen. Problem with the code is, i just want to stop the loader animation when server(API) is not connected. Or i want to show some alert message about server connection, whenever the app launches.

I am new React native. Kindly share your ideas.

        {
            this.setState({
                errorUsername:'',
                errorPassword:'',
                loader:true,
                loggedIn:this.props.receiveState //RECEIVE VALUE FROM REDUCER
            })
            await fetch(LOG_IN_URL,{
                method: 'POST',
                headers: new Headers({'content-type': 'application/json'}),
                body: JSON.stringify({"userId": this.state.username, "password": this.state.password})
                })
                .then(function (response) {  
                    return response.json();
                })
                .then((responseJson) => {
                    console.log("LOGGED IN SUCCESS OR FAILURE:::::::::"+JSON.stringify(responseJson));
                    if(responseJson.status === 'success')
                    {
                        const userToken = responseJson.data.userSession;
                        AsyncStorage.setItem('userSession', userToken)
                        console.log('ASYNC STORAGE VALUE IS SET::::::'+JSON.stringify(userToken));
                        this.setState({ 
                            loggedIn: true,
                            errorPassword:'',
                            errorUsername:'',
                            username:'',
                            password:'',
                            loader:false
                        })
                        this.props.sendState(this.state.loggedIn); //SEND VALUE TO REDUCER
                    }
                    else
                    {
                        this.refs.customToast.show('Invalid Details', DURATION.LENGTH_LONG);
                    }
                    })
                .catch(function (error) {
                    this.setState({loader:false})
                    this.refs.customToast.show('Check Network Connection', DURATION.LENGTH_LONG);
                    console.log("ERROR CAUGHT::::::::"+error);
                });
            this.state.loggedIn === true ? this.props.navigation.navigate('Home') : ''
        }
    }