react-native-connection-notice v1.0.7

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

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