NetState

NetState.md

import PropTypes from 'prop-types'
import {Platform, StyleSheet, View, Text, Modal, NetInfo, TouchableWithoutFeedback} from 'react-native'
import Colors from '../../themes/Colors'
import I18n from 'react-native-i18n'
class NetState extends Component {
  static propTypes = {
    message: PropTypes.string,
    closeOnTouch: PropTypes.bool
  }

  constructor (props) {
    super(props)

    this.state = {
      connected: false,
      message: props.message || I18n.t('noInternetAccess').toUpperCase()
    }
  }

  componentDidMount () {
    NetInfo.isConnected.fetch().then(isConnected => {
      this.setState({connected: !isConnected})
    })

    NetInfo.isConnected.addEventListener(
      'connectionChange',
      (isConnected) => {
        this.setState({connected: !isConnected})
      }
    )
  }

  shouldComponentUpdate (nextProps, nextState) {
    return this.state.connected !== nextState.connected
  }

  render () {
    let messageIOS = Platform.OS === 'ios' ? styles.messageIOS : {}

    return (
      <Modal
        animationType='none'
        transparent
        visible={this.state.connected}
        style={[styles.modal]}
        onRequestClose={() => this.props.closeOnTouch ? this.setState({connected: false}) : {}}
      >
        <TouchableWithoutFeedback onPress={() => this.props.closeOnTouch === true ? this.setState({ connected: false }) : {}}>
          <View style={styles.modalUnderlay} />
        </TouchableWithoutFeedback>
        <View style={[styles.message, messageIOS, this.props.style || {}]}>
          <Text style={[styles.messageText, this.props.styleText || {}]}>{this.state.message}</Text>
        </View>
      </Modal>
    )
  }
}

const styles = StyleSheet.create({
  modal: {
    flex: 1,
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    zIndex: 999999,
    backgroundColor: 'transparent'
  },
  modalUnderlay: {
    position: 'absolute',
    left: 0,
    top: 0,
    bottom: 0,
    right: 0,
    backgroundColor: 'transparent'
  },
  message: {
    backgroundColor: Colors.error,
    justifyContent: 'center',
    alignItems: 'center',
    height: (Platform.OS === 'ios') ? 64 : 54
  },
  messageText: {
    color: '#ffffff',
    fontWeight: '600',
    textAlign: 'center',
    justifyContent: 'center',
    fontSize: 15
  },
  messageIOS: {
    paddingTop: 20
  }
})

module.exports = NetState

cách dùng

'use strict'
import React, { Component } from 'react'
import { Text, View, ScrollView } from 'react-native'
// import { DrawerNavigator, StackNavigator, DrawerItems } from 'react-navigation'
// import Ionicons from 'react-native-vector-icons/Ionicons'
import { connect } from 'react-redux'

import PrimaryNav from '../routers/PrimaryNav'
import LoginStack from '../routers/LoginStack'
import I18n from '../i18n/I18n'
import Reactotron from 'reactotron-react-native'
import { NetState } from '../components'

class AppContainer extends Component {
  constructor (props) {
    super(props)
    let language = props.infoAccount && props.infoAccount.language ? props.infoAccount.language.substr(0, 2) : 'en'
    I18n.defaultLocale = language || 'en'
    I18n.locale = language || 'en'
    // I18n.currentLocale()
  }

  render () {
    if (this.props.navigation) {
      console.log('DEBUG_', 'NAV: ' + this.props.navigation)
    }
    return (
      <View style={{ flex: 1 }}>
        <NetState closeOnTouch={false} />
        {this.props.auth.isLoggedIn
          ? <PrimaryNav initialRouteName='Drawer' />
          : <LoginStack />
        }
      </View>
    )
  }
}

const mapStateToProps = state => ({
  user: state.auth.user,
  auth: state.auth,
  nav: state.navigation,
  infoAccount: state.auth.infoAccount
})

export default connect(mapStateToProps)(AppContainer)