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 --save

Install - Dependencies

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

Linking

react-native link @react-native-community/netinfo

Linking Documents

react-native-netinfo

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.
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.

---