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