React Native Connection Notice

A React Native component that gives a notice every time the user internet connection goes down

Installation

npm install react-native-connection-notice

Dependencies

You also need to install @react-native-community/netinfo.

If you have a Expo managed project, in your project directory, run:

npx expo install @react-native-community/netinfo

If you have a bare React Native project, in your project directory, run:

npm install --save @react-native-community/netinfo

If you encounter any problems with linking follow these additional installation instructions.

Preview

Usage

Place the component in the App file below your others components

import ConnectionNotice from "react-native-connection-notice";

const App: React.FC = () => {
  return (
    <View style={{ flex: 1, alignItems: "center" }}>
      <StatusBar style="auto" />
      {/* your components... */}
      <ConnectionNotice />
    </View>
  );
};

export default App;

ConnectionNotice props

Props	type	description	default
style	StyleProp	style of the notice container	style default
styleText	StyleProp	style of the text inside the notice	styleText default
height	number	height of the notice	StatusBar.currentHeight or 40
offlineColor	string	background color when offline	red
offlineText	string	text when offline	No internet connection
onlineColor	string	background color when online	green
onlineText	string	text when online	Connected
slideDuration	number	duration of the slide in and out	200

style default

flexDirection: "row",
position: "absolute",
top: 0,
left: 0,
right: 0,
justifyContent: "center",
alignItems: "center",
width: Dimensions.get("screen").width

styleText default

color: "#FFF",

Hooks

useNetworkInfo

import { useNetworkInfo } from "react-native-connection-notice";

const App = () => {
  const isConnected = useNetworkInfo();

  return <Text>{isConnected ? "Connected" : "Not connected"}</Text>;
};

Listener that tells you if the device is connected to the internet