I need to show Alert modal in every screen when intenet is down

Question

I need to show NetAlert modal in every screen when intenet is down. I have created a NetAlertModal component for that . I am not sure where to render this component . I am using react navigation Switch navigator. If I am rendering as below it is not showing login screen.

I am new to react native so please help.

Below is my code

/***App.js*/

  render() {
    return (
      <Provider store={store}>
        <PersistGate>
          <Fragment>
            <StatusBar barStyle="dark-content" />
            <SafeAreaView
              style={styles.safeArea}
              forceInset={{bottom: 'never', top: 'never'}}>
               <NetAlertModal />        <------ Need to show this
              <RootNav
                ref={navigatorRef => {
                  NavigationService.setTopLevelNavigator(navigatorRef);
                }}
              />
            </SafeAreaView>
          </Fragment>
        </PersistGate>
      </Provider>
    );
  }
}

/*rootNav.js*/

const RootNav = createSwitchNavigator(
  {
    Drawer: DrawerNavigator,
    Auth: AuthStack,
  },
  {
    initialRouteName: 'Auth',
  },
);

export default createAppContainer(RootNav);

*/AuthStack.js*/

import {createStackNavigator} from 'react-navigation';

import Login from '../components/login/Login';
import Verify from '../components/verify/Verify';

const rootConfiguration = {
  loginPage: {screen: Login},
  verifyPage: {screen: Verify},
};

const stackNavigatorConfiguration = {
  initialRouteName: 'loginPage',
  headerMode: 'none',
  defaultNavigationOptions: {
    headerTintColor: '#ffeb3b',
    headerTitleStyle: {
      fontWeight: 'bold',
      flex: 1,
      textAlign: 'center',
    },
  },
};

export const AuthStack = createStackNavigator(
  rootConfiguration,
  stackNavigatorConfiguration,
);

Answer 1

Try this below example in your app.js which I create using @react-native-community/netinfo library

import React, { Component } from 'react';
import NetInfo from "@react-native-community/netinfo";
import { View, Text, Modal } from 'react-native';

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isConnected: true,
        };
    }

   componentDidMount() {
        NetInfo.isConnected.addEventListener('connectionChange', this.handleConnectivityChange);
    }

    componentWillUnmount() {
        NetInfo.isConnected.removeEventListener('connectionChange', this.handleConnectivityChange);
    }


    handleConnectivityChange = isConnected => {
        this.setState({ isConnected });
    };

    render() {
        return (
            <View style={{ flex: 1 }}>
                <View style={{ flex: 1 }}>


                    {/* your app */}

                </View>
                {
                    !this.state.isConnected &&
                    <Modal
                        visible={!this.state.isConnected}
                        transparent={true}
                        animationType='slide'
                    >
                        <View style={styles.modelStyle}>
                            <View style={styles.modelWrapperStyle}>
                                <Text style={{ textAlign: 'center' }}>{global.strings.oops}</Text>
                                <Text style={{ textAlign: 'center' }}>{global.strings.internetConnection}</Text>
                            </View>
                        </View>
                    </Modal>
                }
            </View>
        );
    }
}

const styles = {
    modelStyle: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: 'rgba(0, 0, 0, 0.5)'

    },
    modelWrapperStyle: {
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#e3dfde',
        padding: 20,
        width: '90%',
        borderRadius: 20
    },
};

export default App;                                                             

Change this according to your requirement. Feel free for doubts.

Answer 2

import { NetInfo } from 'react-native';

 NetInfo.isConnected.fetch().then(isConnected => {
       if(isConnected)
       {
           console.log('Internet is connected');
       }
 })

use above code as a HOC or make it global for your root file