46
loading...
Showing an offline screen for your React-Native app using NetInfo package.
So you want to check internet connection and show an offline screen if you are disconnected?
Here are simple steps to create one:
1) Install netinfo package from npm:
npm install --save @react-native-community/netinfo2) Import it in your js file wherever you want it to be, declare a variable and set it's value to null:
let NetInfoSubscription = null;3) Initialize a state and set the default value to false:
const [connectionStatus, setConnectionStatus] = useState(false);4) Create a function that changes the value of the connectionStatus based on if the internet is connected or not:
const handleConnectionChange = (state) => {
setConnectionStatus(state.isConnected);
};5) Inside useEffect hook reassign the value of NetInfoSubscription and add this piece of code:
NetInfoSubscription = NetInfo.addEventListener(handleConnectionChange);
return () => {
NetInfoSubscription;
};6) Now just use a ternary operator to show the main contents if the connection is there or show the offline screen if the connection is disconnected.
example:
example:
connectionStatus ? <MainContent /> : <OfflineScreen />That is it now if the internet is disconnected offline screen will be rendered.
Let me know if you have some questions or want to see how I created my Offline Screen :)
46