react-native-network-toast

A native looking toast for Android. (Not sure about Ios as I dont have a MAC)

To Download, run:

yarn add react-native-network-toast
// or
npm install -s react-native-network-toast.

Since react native >0.59 netinfo has been deprecated, so if you haven't please run:

yarn add @react-native-community/netinfo
// or
npm install --save @react-native-community/netinfo

Add the following line for permission to AndroidManifest.xml:

android:name="android.permission.ACCESS_NETWORK_STATE"

You then need to link the native parts of the library for the platforms you are using. The easiest way to link the library is using the CLI tool by running this command from the root of your project:

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

To know more about netinfo click here

Usage example:

//import HOC from react-native-network-toast
import { withNetwork } from "react-native-network-toast";

class YourComponent extends Component {
    componentDidMount() {
        // configure the retry button to execute your own
        const { setupNetworkRetry } = this.props;
        setupNetworkRetry(() => {
            console.warn("retry fetching data");
        });
    }

    render() {
        const { connected } = this.props; // get connection status from props
        return (
            <View>
                {connected} ? <Text>Im connected</Text> : <Text>Im not connected</Text> 
            </View>
        );
    }
}

export default withNetwork()(YourComponent);

Android Screenshot:

You can also configure the toast message style:

export default withNetwork({
    buttonText: "fetch",
    buttonStyles: {
        backgroundColor: "white"
    },
    buttonTextStyles: {
        color: "green"
    },
    containerStyles: {
        backgroundColor: "red"
    },
    messageStyles: {
        color: "yellow"
    },
    messageText: "Failed",
    position: "top",
    positionOffset: 50
})(C);

Android Screenshot:

API Help

adding function to setupNetworkRetry.

Arguments	Explanation	defaults
functions	takes in a function only	void

configuring withNetwork(arguments).

Arguments	Explanation	defaults
buttonText	text for retry button	Retry
buttonStyles	styles for button container	default styles
buttonTextStyles	styles for button text	default styles
containerStyles	styles for toast container	default styles
messageStyles	styles for toast message	default styles
messageText	text for toast message	No Connection
position	postion of toast message	bottom
positionOffset	how much should toast offset	0 for bottom 30 for top