1.0.4 • Published 6 years ago
react-native-no-internet-screen v1.0.4
react-native-no-internet-screen
A simple and fully customizable React Native component that implements a no internet screen UI.
ScreenShots
| Example One | Example Two |
|---|---|
![]() | ![]() |
Install
npm install react-native-no-internet-screen --saveInstall - Dependencies
npm install --save @react-native-community/netinfoLinking
react-native link @react-native-community/netinfoLinking Documents
Usage
import React from "react";
import { NoInternet } from "react-native-no-internet-screen";
class MainComponent extends React.Component {
state = {
value: 0.2
};
render() {
return (
<NoInternet
heading={"Oops! There is no Internet Connection"}
content={"We're having a little difficulty in connecting to the Internet. Please check your connection and try again."}
buttonLabel={"Try Again"}
errorText={"We still can't connect - please try again."}
MainComponent={<View><Text>My Test Component.</Text></View>}
containerStyle={{backgroundColor: "orange"}}
textStyle={{color: "white"}}
/>
);
}
}Documentation
Props
| Name | Description | Default | Type | |
|---|---|---|---|---|
| heading | Your custom heading here. | Oops! There is no Internet Connection | Your custom heading here. | String |
| content | Your custom content here. | We're having a little difficulty in connecting to the Internet. Please check your connection and try again. | String | |
| buttonLabel | Your custom buttonLabel here. | Try Again | String | |
| errorText | Your custom error message here. | We still can't connect - please try again. | String | |
| MainComponent | Your Route component here. | <View><Text>My Test Component.</Text></View> | JSX Component |
Contributing
Pull requests are always welcome! Feel free to open a new GitHub issue for any changes that can be made.

