Constantly check network connectivity throughout the application

Question

I am working on an application that captures its data from an external API. Whenever a user tries to establish a connection and is not connected, he receives an ugly red screen of death.

I played with NetInfoto facilitate this, in particular NetInfo.isConnected.

As my logic is renderstructured, I don’t think I can get it this.state.isConnected === falseto actually run, even when I purposefully turn off the Internet in iOS Simulator. If I set this logic to disable its method AlertIOS.Alertwhen it this.state.isConnectedreturns some fake value, it will disable this unpleasant warning even if the user has a connection because it getInitialStatesets it to nullinitially . How can I fix this?

Also, should I expect this logic to be recreated for all of my components, as I have the feeling that I will need to almost constantly check network access?

===

Here is my getInitialStatelife cycle method

  getInitialState: function() {
    return {
      accessToken: false,
      isConnected: null,
      selectedTab: 'products'
    }
  },

componentWillMount NetInfo.isConnected, :

  componentWillMount: function() {
    NetInfo.isConnected.addEventListener('change', this.handleConnectivityChange)
    NetInfo.isConnected.fetch().done((data) => {
      console.log(this.state.isConnected);
      this.setState({
        isConnected: data
      })
    })
  },

componentDidMount, , isConnected boolean true accessToken. , API :

  componentDidMount: function() {
    if (this.state.isConnected && !this.state.accessToken){
      api.getToken()
        .then((responseData) => {
          this.setState({
            accessToken: responseData.access_token,
          });
        })
        .done();
    }
  },

componentWillUnmount:

  componentWillUnmount: function() {
    NetInfo.isConnected.removeEventListener(
      'change',
      this.handleConnectivityChange
    );
  },

handleConnectivityChange :

  handleConnectivityChange: function(change) {
    this.setState({
      isConnected: change
    })
    console.log("I have changed!" + change)
  },

, render , :

  render: function() {
    if (this.state.isConnected === 'null') {
      return (
        <View style={styles.container}>
          <Loading
            loaded={this.state.isConnected} />
        </View>
        )
    }
    if (this.state.isConnected === 'false') {
      return (
        <View>
          {AlertIOS.alert('You need to be connected to the internet!')}
        </View>
        )
    }
    return (
      <TabBarIOS>
        <Icon.TabBarItem
          title='Home'
          selected={this.state.selectedTab === 'products'}
          iconName={'home'}
          iconSize={20}
          onPress={() => {
            if (this.state.selectedTab !== 'products') {
              this.setState({
                selectedTab: 'products'
              });
            } else if (this.state.selectedTab === 'products') {
              this.refs.productRef.popToTop();
            }
          }}>
          {this.renderProductView()}
        </Icon.TabBarItem>
        <Icon.TabBarItem
          title="Collections"
          selected={this.state.selectedTab === 'collections'}
          iconName={'list'}
          iconSize={20}
          onPress={() => {
            if (this.state.selectedTab !== 'collections') {
              this.setState({
                selectedTab: 'collections'
              });
            } else if (this.state.selectedTab === 'collections') {
              this.refs.collectionRef.popToTop();
            }
          }}>
          {this.renderCollectionView()}
        </Icon.TabBarItem>
        <Icon.TabBarItem
          title="About"
          selected={this.state.selectedTab === 'about'}
          iconName={'info'}
          iconSize={20}
          onPress={() => {
            this.setState({
              selectedTab: 'about'
            });
          }}>
          {this.renderAboutView()}
        </Icon.TabBarItem>
      </TabBarIOS>
      )
  },

Answer 1

:

-, catch API. :

  getCollectionsData: function() {
    api.getFeaturedCollections(this.props.accessToken)
      .then((responseData) => {
        this.setState({
          featuredCollectionsDataSource: this.state.featuredCollectionsDataSource.cloneWithRows(responseData.collections),
          loaded: true
        })
      })
    .then(() => {
      api.getAllCollections(this.props.accessToken)
        .then((responseData) => {
          this.setState({
            allCollectionsDataSource: this.state.allCollectionsDataSource.cloneWithRows(responseData.collections),
          })
        })
    })
    .catch((error) => {
      AlertIOS.alert('Error', 'You need to be connected to the internet')
    })
    .done()
  },

API componentWillMount.

AppState.IOS, , /:

  componentDidMount: function() {
    AppStateIOS.addEventListener('change', this.handleAppStateChange);
  },

  componentWillUnmount: function() {
    AppStateIOS.removeEventListener('change', this.handleAppStateChange);
  },

getCollectionsData.