1.0.4 • Published 4 years ago

react-native-no-internet-screen v1.0.4

Weekly downloads
16
License
ISC
Repository
-
Last release
4 years ago

react-native-no-internet-screen

A simple and fully customizable React Native component that implements a no internet screen UI.

ScreenShots

Example OneExample Two
no_internet_screenno_internet_screen_error

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

NameDescriptionDefaultType
headingYour custom heading here.Oops! There is no Internet ConnectionYour custom heading here.String
contentYour custom content here.We're having a little difficulty in connecting to the Internet. Please check your connection and try again.String
buttonLabelYour custom buttonLabel here.Try AgainString
errorTextYour custom error message here.We still can't connect - please try again.String
MainComponentYour 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.