React Native NetInfo 'connectionChange' event not fired

Question

I have two PoCs I'm working on. 1)RNRestAPI. 2)RNNavigate.

In RNRestAPI index.android.js and index.ios.js both looks like this;

import React, { Component } from 'react';
import {
  AppRegistry,
  View
} from 'react-native';
import Login from './app/screens/Login/Login';
import About from './app/screens/About/About';

export default class RNRestAPI extends Component {
  render() {
    return (
      <View style={{flex:1}}>
        <Login />
      </View>
    );
  }
}

AppRegistry.registerComponent('RNRestAPI', () => RNRestAPI);

Login.js is like this;

import React, { Component } from 'react';
import {
  AppRegistry,
  View,
  TextInput,
  StyleSheet,
  Button,
  Text,
  Alert,
  TouchableHighlight,
  Platform,
  Image,
  NetInfo,
  ProgressBarAndroid,
  ProgressViewIOS
} from 'react-native';
import I18n from '../../resources/strings/i18n';
import Colors from '../../resources/styles/colors';
import Dimensions from '../../resources/styles/dimensions';
import Styles from '../../resources/styles/styles';
import Config from '../../config';

export default class Login extends Component {
  constructor() {
    super();

    this.state = {
      username:'',
      password:'',
      buttonLoginDisabled:false,
      isConnected:false
    }

    // I18n.locale = 'en';
  }

  componentWillMount() {
    NetInfo.addEventListener(
      'connectionChange',
      this.handleConnectivityChange.bind(this)
    );
  }

  componentWillUnmount() {
    NetInfo.removeEventListener('connectionChange', handleConnectivityChange);
  }

  handleConnectivityChange(connectionInfo) {
    console.log('First change, type: ' + connectionInfo.type + ', effectiveType: ' + connectionInfo.effectiveType);

    if(connectionInfo.type === 'none') {
      this.setState({
        isConnected:false,
        buttonLoginDisabled:true
      });
    } else {
      this.setState({
        isConnected:true,
        buttonLoginDisabled:false
      });
    }
  }

  onLoginClicked() {
    var valid = this.validateLoginForm();

    if(valid === true) {
      this.setState({
        buttonLoginDisabled:true
      });

      this.makeLoginRequest();
    } else {
      Alert.alert(I18n.t('dialogLoginInvalidTitle'), I18n.t('dialogLoginInvalidMessage'));
    }
  }

  validateLoginForm() {
    if(this.state.username === '') {
      return false;
    }

    if(this.state.password === '') {
      return false;
    }

    return true;
  }

  makeLoginRequest() {
    fetch('http://webapitest', {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
        'MobilePlatformId': Config.MobilePlatformId,
        'ApplicationId': Config.ApplicationId,
        'Version': '1.9.6'
      },
      body: JSON.stringify({
        Username: this.state.username,
        Password: this.state.password
      })
    })
    .then((response) => response.json())
    .then((responseJson) => {
      console.log(responseJson);

      if(responseJson.Token !== null) {
        console.log('login successful');
      } else {
        this.setState({
          buttonLoginDisabled:false
        });

        Alert.alert(I18n.t('dialogInvalidLoginTitle'), I18n.t('dialogInvalidLoginMesage'));
      }
    })
    .catch((error) => {
      console.log(eror);

      this.setState({
        buttonLoginDisabled:false
      });
    })
  }

  setUsername(value) {
    this.setState({
      username:value
    });
  }

  setPassword(value) {
    this.setState({
      password:value
    });
  }

  onMoreClicked() {
    Alert.alert(I18n.t('dialogLearnMoreTitle'), I18n.t('dialogLearnMoreMesage'));
  }

  getLoginButtonStyle() {
    if(this.state.buttonLoginDisabled) {
      return styles.buttonLoginDisabled;
    } else {
      return styles.buttonLogin;
    }
  }

  render() {
    return (
      <View style={styles.container}>
        <View>
          <Image source={require('../../resources/images/facilit_logo_welcome.png')}
            style={{width:266, height:50, resizeMode:Image.resizeMode.cover}} />
        </View>
        <View style={styles.wrapperLoginInput}>
          <TextInput
            keyboardType='default' 
            placeholder={I18n.t('username')} 
            returnKeyType='next' 
            onChangeText={(value) => this.setUsername(value)}
            style={Styles.primaryTextInput} />

          <TextInput secureTextEntry={true} 
            placeholder={I18n.t('password')}
            onChangeText={(value) => this.setPassword(value)}
            style={Styles.primaryTextInput} />

          <TouchableHighlight onPress={this.onLoginClicked.bind(this)}
            style={{marginTop:(Platform.OS === 'ios') ? 10 : 30}}
            underlayColor='#00000000'
            disabled={this.state.buttonLoginDisabled}>
            <View style={this.getLoginButtonStyle()}>
              <Text style={styles.buttonLoginText}>{I18n.t('login')}</Text>
            </View>
          </TouchableHighlight>


          <View style={styles.wrapperLearnMoreLink}>
            <TouchableHighlight onPress={this.onMoreClicked.bind(this)}
              underlayColor='#00000000'>
              <Text style={styles.learnMoreLink}>{I18n.t('learnMore')}</Text>
            </TouchableHighlight>
          </View>
        </View>
      </View> 
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex:1,
    backgroundColor:Colors.primaryBlue,
    justifyContent:'center',
    alignItems:'center'
  },
  wrapperLoginInput: {
    width:300,
    marginTop:100
  },
  buttonLogin: {
    backgroundColor:Colors.primaryYellow,
    alignItems:'center',
    height:Dimensions.primaryButtonHeight,
    justifyContent:'center',
    borderRadius:Dimensions.primaryButtonBorderRadius,
    borderWidth:Dimensions.primaryButtonBorderWidth,
    borderColor:Colors.primaryButtonBorderColor,
  },
  buttonLoginDisabled: {
    backgroundColor:Colors.primaryButtonDisabledGray,
    alignItems:'center',
    height:Dimensions.primaryButtonHeight,
    justifyContent:'center',
    borderRadius:Dimensions.primaryButtonBorderRadius,
    borderWidth:Dimensions.primaryButtonBorderWidth,
    borderColor:Dimensions.primaryButtonBorderColor,
  },
  buttonLoginText: {
    fontSize:Dimensions.primaryButtonFontSize,
    color:Colors.primaryButtonFontColor
  },
  wrapperLearnMoreLink: {
    alignItems:'center',
    marginTop:150,
  },
  learnMoreLink: {
    color:Colors.secondaryTextColor,
    textDecorationLine:'underline'
  }
});

AppRegistry.registerComponent('Login', () => Login);

The important bits are componentWillMount() and handleConnectivityChange(connectionInfo). They work as expected and my code handles online/offline scenarios.

The second PoC(RNNavigate) is basically a copy of RNRestAPI but with the inclusion of react-navigation https://reactnavigation.org/. I'm basically trying to create the navigation for my app after the user logs in successfully into my app. So accordingly I have done the following modification to my code.

1) Create App.js

import React, { Component } from 'react';
import {
  AppRegistry,
  View
} from 'react-native';

import Login from './app/screens/Login/Login';
import About from './app/screens/About/About';
import FacilitySearch from './app/screens/FacilitySearch/FacilitySearch';

import { StackNavigator } from 'react-navigation';

export default class RNNavigate extends Component {
  render() {
    return (
      <View style={{flex : 1}}>
        <RNNavigateApp />
      </View>
    );
  }
}

const RNNavigateApp = StackNavigator({
    Login : {
      screen : Login,
      navigationOptions : ({navigation}) => ({
        header : null
      })
    },
    About : { screen : About },
    FacilitySearch : { 
      screen : FacilitySearch,
      navigationOptions : ({
        headerLeft : null
      })
    }
});

AppRegistry.registerComponent('RNNavigate', () => RNNavigate);

2) Modify index.android.js and index.ios.js to;

import './App.js';

Login.js is untouched. But the connectionChange event is no longer fired. Any expert help is much appreciated to guide me figuring out as to why it's no longer fired or educate me on if I have done something wrong in terms of using React Navigate.

Answer 1

For me, the event was not fired because I didn't restart my react-native server after adding <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> in the AndroidManifest.xml.

Kill your server and restart it after then it should fire.