React Native Connectivity Banner

• A simple React Native Component that leverages @react-native-community/netinfo to display a banner alerting users when no or slow connection is detected.

Demo

For 2G & 3G Connection

For No Connection

Install the Package

Use NPM or Yarn

yarn add @quantfive/react-native-connectivity-banner

npm install --save @quantfive/react-native-connectivity-banner

Usage

1. Require @quantfive/react-native-connectivity-banner after installation

import { ConnectivityBanner } from '@quantfive/react-native-connectivity-banner'

2. Insert the component into your code

render() {
  return (
    <View> 
      <ConnectivityBanner />
    </View>
  )
}

Main Options

| Option |Type |Description | | ------------ | ------------ | ------------ | |interval | Integer | In milliseconds, determines how often the component will check the state of the device's connection. Defaults to 2000ms. | |messages |Object | { notConnected: String, lowConnectivity: String} Customize the message you want to display to users | |styleOverride | Object | Pass a style object to override or customize component's style |