https://github.com/itispx/react-native-connection-notice
📶 | Connection notice for React Native
https://github.com/itispx/react-native-connection-notice
connection connection-notice notice react-component react-component-library react-native
Last synced: about 2 months ago
JSON representation
📶 | Connection notice for React Native
- Host: GitHub
- URL: https://github.com/itispx/react-native-connection-notice
- Owner: itispx
- License: mit
- Created: 2022-10-02T22:45:04.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2022-10-23T13:22:38.000Z (over 3 years ago)
- Last Synced: 2025-12-29T01:05:13.576Z (3 months ago)
- Topics: connection, connection-notice, notice, react-component, react-component-library, react-native
- Language: TypeScript
- Homepage:
- Size: 5.61 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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.](https://github.com/react-native-netinfo/react-native-netinfo#getting-started)
# Preview
# Usage
Place the component in the App file below your others components
```js
import ConnectionNotice from "react-native-connection-notice";
const App: React.FC = () => {
return (
{/* your components... */}
);
};
export default App;
```
## ConnectionNotice props
| Props | type | description | default |
| ------------- | -------------------- | ----------------------------------- | --------------------------------------- |
| style | StyleProp | style of the notice container | [style default ](#style-default) |
| styleText | StyleProp | style of the text inside the notice | [styleText default](#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
```cs
flexDirection: "row",
position: "absolute",
top: 0,
left: 0,
right: 0,
justifyContent: "center",
alignItems: "center",
width: Dimensions.get("screen").width
```
### styleText default
```cs
color: "#FFF",
```
## Hooks
### useNetworkInfo
```js
import { useNetworkInfo } from "react-native-connection-notice";
const App = () => {
const isConnected = useNetworkInfo();
return {isConnected ? "Connected" : "Not connected"};
};
```
Listener that tells you if the device is connected to the internet