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