Here, we are going to integrate the offline mode to the app. This feature is very handy when we are out of connection and we can still access some of the features in the app. Here, we are just going to notify the network status and cache the data using package. Caching will help to pull the data from the AsyncStorage during the offline mode.so this app inspired from from instamobile react-native-NetInfo React native template Notify user when offline Here, we are going to notify the user when we are offline. For that, we are going to display network status. Hence, we need to create a new file called NetworkStatus.js in component folder. Then, we need to install the netinfo package into our project. For that, we need to run the following command in our project directory: yarn add @react-native-community/netinfo Then, we need to link the package to native files as we did in previous installation. In Android, we need to add a configuration to file: ‘./android/build.gradle buildscript { ext { buildToolsVersion = minSdkVersion = compileSdkVersion = targetSdkVersion = androidXCore = } "28.0.3" 16 28 28 "1.0.2" // Put here other AndroidX dependencies Now, we need to make the following imports to the file: NetworkStatus.js React ; {List} NetInfo ; {Text, StyleSheet} ; import from 'react' import from 'react-native-paper' import from '@react-native-community/netinfo' import from 'react-native' Then, we need to define a new function called function as shown in the code snippet below handleConnectivityChange { state = { : , }; componentDidMount() { NetInfo.isConnected.addEventListener( , .handleConnectivityChange, ); } componentWillUnmount() { NetInfo.isConnected.removeEventListener( , .handleConnectivityChange, ); } handleConnectivityChange = { .setState({isConnected}); .log( .state.isConnected); }; export default . class NetworkProvider extends React Component isConnected true 'connectionChange' this 'connectionChange' this => isConnected this console this Here, we have defined a state variable called which handles the connection info. Then, we have defined a function called which takes the parameter. Then, we have called the function in the function provided by the module in the hook to subscribe to network change. And, we have also called the function in the function of module in the hook to unsubscribe from network change. isConnected handleConnectivityChange isConnected addEventListener NetInfo componentDidMount removeEventListener NetInfo componentWillUnmount Now, we need to the template to display the offline mode. For that, we need to use the code from the following code snippet: render() { iconPrefix = Platform.OS === ? : ; .state.isConnected ? ( ) : ( <List.Icon icon="airplane-off" />} /> ); } } const styles = StyleSheet.create({ offLine: { marginRight: 15, flexDirection: 'row', }, }); const 'ios' 'ios' 'md' return this < > Text </ > Text < = = => List.Item title "Offline mode" left {() Here, we have returned the template based in state. If true, it returns else it returns component with airplane mode icon. isConnected null Item Now, we need to show the icon in every screen header if we are offline. For that, we need to import the file in the Navigator file as shown in the code snippet below: NetworkStatus.js NetworkStatus ; import from './NetworkStatus' Then, we need to include it to the option of the config as shown in the code snippet below: headerRight navigationOptions { : { {routeName} = navigation.state.routes[navigation.state.index]; { : routeName, : navigationOptions ( ) => {navigation} const return headerTitle headerRight , }; }, }, < /> NetworkStatus Hence, we will get following result in the emulator screens if we disconnect: Summary In this chapter, we learned how to implement the offline mode in the react native app. We used the netinfo package to display the offline icon in the header by checking the network status of the device.
