Tukukkk

I am working on React Native app. I am still new to react native and react world so I might be doing something wrong here that I don't know but I need help. So what is happening right now in my app when I try to update reducer state, it is calling it twice updating it twice.

Here is what I am trying to do,

1) When app opens, set default `deviceData` object.

2) Check for internet connection and update device data.

3) I disable internet that updates `deviceData` object once.

4) I enable internet and that updates `deviceData` object twice where it comes back as false.

Here is my code,

NoInternet.js file

import React, {PureComponent} from 'react';

import {View, Text, NetInfo, Dimensions, StyleSheet} from 'react-native';

import {statusBarHeight} from "./AppBar";

import {RED_DARKEN_THREE} from "./colors";

import {connect} from "react-redux";

import {updateInternetState} from '../actions/internetStateChangeAction';



const {width} = Dimensions.get('window');



function MiniOfflineSign() {

    return (

        <View style={styles.offlineContainer}>

            <Text style={styles.offlineText}>No Internet Connection</Text>

        </View>

    );

}



class OfflineNotice extends PureComponent {

    state = {

        isConnected: true

    };



    componentDidMount() {

        NetInfo.isConnected.addEventListener('connectionChange', this.handleConnectivityChange);

    }



    componentWillUnmount() {

        NetInfo.isConnected.removeEventListener('connectionChange', this.handleConnectivityChange);

    }



    handleConnectivityChange = isConnected => {

        this.setState({isConnected});

        this.props.updateConnectivityChange({isConnected});

    };



    render() {

        if (!this.state.isConnected) {

            return <MiniOfflineSign/>;

        }

        return null;

    }

}



const styles = StyleSheet.create({

    offlineContainer: {

        backgroundColor: RED_DARKEN_THREE,

        height: 30,

        justifyContent: 'center',

        alignItems: 'center',

        flexDirection: 'row',

        width,

        position: 'absolute',

        top: statusBarHeight,

    },

    offlineText: {

        color: '#fff',

        fontFamily: "Muli-Regular",

    }

});



function mapStateToProps(state, {navigation}) {

    return {

        state,

        navigation

    };

}

const mapDispatchToProps = dispatch => ({

    updateConnectivityChange: ({isConnected}) => {

        dispatch(updateInternetState({isConnected}));

    }

});



export default connect(mapStateToProps, mapDispatchToProps)(OfflineNotice);

internetStateChangeAction.js file

export const UPDATE_INTERNET_STATE = 'UPDATE_INTERNET_STATE';



export const updateInternetState = data => ({

    type: UPDATE_INTERNET_STATE,

    data,

});

deviceReducer.js file

import {Platform} from 'react-native';

import {UPDATE_INTERNET_STATE} from '../actions/internetStateChangeAction';



const deviceData = {

    deviceType: Platform.OS,

    deviceID: null,

    isInternetAvailable: true,

};





const deviceDataReducer = (state = deviceData, action) => {

    switch (action.type) {

        case UPDATE_INTERNET_STATE:

            return {

                ...state,

                isInternetAvailable: action.data.isConnected

            };

        default:

            return state;

    }

};



export default deviceDataReducer;

And here is my debug log,

As you can see, there are four logs of actions.

1) First action is default when app is opened and it is called to check internet connection.

2) Second action is when I disable internet in my iMac by disconnecting from wifi (I am developing this app on iMac and using iOS simulator)

3) HERE IS THE MOST IMPORTANT PART, I should see only one action when I enable wifi access in my iMac and connect to internet. Which happens as third action and internet connection as true

4) But there is fourth action called automatically which returns false and that fails everything.

And if I disable internet again and enable again, it gets called twice again and I get following result,

I don't know where I am doing wrong and what!

Thanks everyone!

There is a known problem with the NetInfo Component. It seems to return false after first reconnection. I would change your aproach. You need to keep in mind that NetInfo informs if there is a protocol connection to internet like WiFi or 3G, but not if data transit over internet is possible. You could try this by leaving WIFI connected and unplugging the data cabel from internet modem. Wifi signal would be still there, but not data transmit over internet would be possible however NetInfo should be returing true.

I had the same problem as you. Everytime the App start i wanted to make sure if there is internet or not. And my solution was calling www.google.com through fetch or axios by first App launch. If it fails, means that there is no internet connection or data transit. You should also give a timeout for slow internet conections. Finally everytime that i had to make a request over internet i tried to handle that error in the catch method of a Promise.

Thank you all for helping me out here. As Helmer mentioned that it is known bug in react native, I ended up using Axios to check internet connection in handleConnectivityChange everytime I get isConnected = false. And I run axios code in background every 5 seconds while my app is disconnected from the internet and trying to connect to Google and so if I run into any error or response is not 200, I call my handleConnectivityChange function again after 5 seconds and keep repeating process until I can access Google.