Forem: olaseinde AYOWALE

React native Netinfo: Detecting Internet connectivity in react native.

olaseinde AYOWALE — Sun, 04 Sep 2022 14:52:14 +0000

In a typical mobile application, there are multiple instances that a mobile device can lose internet connectivity. This can result from myriads of reasons, from internet subscription exhaustion to sudden drop in internet speed to users turning off their internet connectivity altogether.

In these instances, how our React native application reacts to the disconnected internet is very important. If adequate strategies are not in place, the network request can keep the spinner spinning even though the connection is lost, or worst still, the application can react to the no data state and make an unnecessary update to our application. Comes in React native net-info library. Link

In this tutorial, we'll cover in detail

What does the Netinfo library do?
Listening for network change
Toggling component based on internet connectivity
An example, building your Internet detection component

First things first, let's install the libraries we'll be using for this tutorial,



npm @react-navigation/native @react-navigation/native-stack react-native-screens react-native-safe-area-context install

We need these libraries to create and manage the app's navigationRead more



npm install axios

For making our network request, we'll use the library axios and the NetInfo library.



npm install @react-native-community/netinfo

So, let's get to it

What the Netinfo library is really

The Netinfo is an API formally maintained and managed by the react native team. The team however stopped maintaining the API and advised the community package be used instead. What the API does is expose some key properties, methods, and event listeners that we can watch for in our application to respond appropriately. some of the exposed functionalities include.

The useNetInfo hook

The hook exposes details about the device's internet connectivity;



{
  "details": {
    "bssid": "02:00:00:00:00:00",
    "frequency": 2447,
    "ipAddress": "10.0.2.16",
    "isConnectionExpensive": false,
    "linkSpeed": 19,
    "rxLinkSpeed": 19,
    "strength": 99,
    "subnet": "255.255.255.255",
    "txLinkSpeed": 19
  },
  "isConnected": true,
  "isInternetReachable": true,
  "isWifiEnabled": true,
  "type": "wifi"
}

We can access properties like the isConnected to check whether or not a device is connected to the internet before making a network request.

The addEventListener Method

This is a very important part of the NetInfo library. It gives us the flexibility to watch for the network state change in devices and react accordingly. It works typically by passing a callback function, whose parameter serves as the current state of the internet connectivity. As an example:



const Example = () => {
    useEffect(() => {
        const unsubscribe = NetInfo.addEventListener(currentState => {
            console.log(`Device is ${currentState.isConnected ? 'Connected': 'not connected'}`);
          });

          return () => unsubscribe();
    }, [])
    return (
        <Text>
            Working With NetInfo
        </Text>
    )
}

What did we just do?

We need to first import our useEffect hoot from react, we need this because, we have to leverage the useEffect clean-up function, which works typically like the componentDidUnmount, calling our unsubscribe function in the cleanup function.
We also imported the NetInfo library and tie a callback function to the addEventListener method, passing the currentState argument, representing the current state of the internet connectivity.

There are still quite a few methods returned from the NetInfo library but for this tutorial, we'll limit it to those mentioned.

Listening for network change

We can explore a few options to listen for the change in internet connectivity. We can decide to set up redux to update a global state value when the network state changes, to be sure that all components get access to the new state. Another option is to leverage react context API, to perform a similar action in setting and updating the network context based on the current network state.

So, let's get right to it.

Setting up context

The context API is a very powerful bit in react, giving us the flexibility to create a global state in our application with very minimal code. Read More about react context

Firstly, let's create a file and call it NetworkContext.js



import React, { createContext, useState } from 'react'

export const NetworkContext = createContext({
    isConnected: false,
    setIsConnected: () => null,
})

export const NetworkProvider =({ children }) => {
    const [isConnected, setIsConnected] = useState(false)
    const value = { isConnected, setIsConnected }

    return <NetworkContext.Provider value={value}>{children}</NetworkContext.Provider>
}

What did we just do?

We imported the createContext from react, and exported the NetworkContext. What this does is use the useState hook to create a global state, and exported the NetworkProvider, passing the isConnected and the setConnected as values of the NetworkContext Provider.

Now, need to create the component that will serve as the ParentComponent, which will be monitoring the network change. This component will be wrapped around all the pages of the app. The idea is that by having the ParentComponent wrapping all other components, we can from this component manage the network state. That way, on all pages of the app, we can display a notification whenever the app loses internet connectivity. In this component, we need to import our NetworkContext to update the context from here and access it in all nested components.
Let's put this into writing.



import React, { useState, useContext, useEffect } from "react";
import { Text, View} from "react-native";
import NetInfo from "@react-native-community/netinfo";
import { NetworkContext  } from "./NetworkContext"; //importing the NetworkContext


const ParentComponent = ({ children }) => {
    const [isOffline, setOfflineStatus] = useState(false);
    const { isConnected, setIsConnected } = useContext(NetworkContext) //using the createContext to access the setIsConnected state

    useEffect(() => {
        const removeNetInfoSubscription = NetInfo.addEventListener((state) => {
            const offline = !(state.isConnected && state.isInternetReachable);
            setOfflineStatus(offline);
            setIsConnected(offline)
        });
        return () => removeNetInfoSubscription();
    }, []);

    return (
        <View style={{
            flex: 1
        }}>
            {children} //The nested component
        </View>
    )
}

Toggling component based on internet connectivity

The next thing is to create a component that will be displayed based on whether or not the device is connected to the internet.
create a file, name it NoInternet.js



import React from "react";
import { Animated, StatusBar,StyleSheet, Text } from "react-native";

const styles = StyleSheet.create({
    container: {
        width: '100%',
        height: 40,
        backgroundColor: 'red',
        padding: 5,
        paddingLeft: 10,
        position: 'absolute',
        top: 0,
        zIndex: 100
    },
    text: {
        fontSize: 17,
        color: '#fff'
    }
})


const NoInternet = () => {
    return (
        <Animated.View style={[styles.container]}>
            <StatusBar
                backgroundColor='red'
            />
            <Text style={styles.text}>
                No Internet Connection
            </Text>
        </Animated.View>
    )
}

export default NoInternet

The heavy lifting has been done already, so let's create our pages and also set up our app's navigation just so we can move between pages and be sure that our NoInternet component will be displayed on every component when we go offline.
Firstly, let's create a screen, name it Home.js



import React from "react";
import { Text, View, TouchableOpacity } from "react-native";
import ParentComponent from "./Network";
const HomePage = ({ navigation }) => {
    return (
        <ParentComponent>
            <View
                style={{
                    flex: 1,
                    justifyContent: 'center',
                    alignItems: 'center'
                }}
            >
                <Text>The Home Page</Text>
                <TouchableOpacity
                    onPress={() => navigation.navigate('Settings')}
                    style={{
                        width: '90%',
                        height: 50,
                        display: 'flex',
                        justifyContent: 'center',
                        alignItems: 'center',
                        backgroundColor: 'teal'
                    }}
                >
                    <Text style={{
                        color: 'white'
                    }}>
                        Go to Settings Page
                    </Text>
                </TouchableOpacity>
            </View>
        </ParentComponent>
    )
}

export default HomePage

What just happened?

We imported our ParentComponent, Wrapping our HomePage component as its child, that way, we can display the NoInternet component when the device is offline
We also need to destructure our navigation prop to be able to move between screens.

Next up, let's create another page and name it Settings.js



import React from "react";
import { Text, View, TouchableOpacity } from "react-native";

const SettingPage = ({ navigation }) => {
    return (
        <View
            style={{
                flex: 1,
                justifyContent: 'center',
                alignItems: 'center'
            }}
        >
            <Text>The Setting Page</Text>
            <TouchableOpacity
                onPress={() => navigation.navigate('Home')}
                style={{
                    width: '90%',
                    height: 50,
                    display: 'flex',
                    justifyContent: 'center',
                    alignItems: 'center',
                    backgroundColor: 'teal'
                }}
            >
                <Text style={{
                    color: 'white'
                }}>
                    Go to Home Page
                </Text>
            </TouchableOpacity>

        </View>
    )
}

export default SettingPage

The same thing applies, we wrapped our ParentComponent over our Settings.js page to display the NoInternet component and also destructured the navigation prop to move between screens.

Lastly, we need to set up the navigation in our App.js to handle moving between screens. You can read more about moving between screens here



import React from 'react';
import {
  StyleSheet,
} from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import HomePage from './src/Home';
import SettingPage from './src/Setting';

const Stack = createNativeStackNavigator()


const App = () => {

  return (
      <NavigationContainer>
        <Stack.Navigator
          screenOptions={{
            headerShown: false
          }}
        >
          <Stack.Screen name='Home' component={HomePage} />
          <Stack.Screen name='Settings' component={SettingPage} />
        </Stack.Navigator>
      </NavigationContainer>
  )

};


export default App;

We need to make some adjustments to our parent component, to toggle the NoInternet.js component based on the internet connectivity state.



import NoInternet from "./NoInternet"; //import the NoInternet Component

Add the line of code to the returned statement in the ParentComponent



   {isOffline && <NoInternet />}

What was that? We imported the NoInternet component and based on the isOffline state in the ParentComponent, we display the NoInternet.js component Great, we can not test our implementation

Everything seems to be working fine. Now, let's try making use of the isConnected we get from the NetworkContext, to prevent making an API call when we are not connected to the internet.

Firstly, let's create a NetworkModal component that will be displayed whether or not the device is connected with a network request is about to be made.



import React, { useState } from 'react'
import { Text, TouchableOpacity, Modal, StyleSheet, View} from 'react-native';
import { useNetInfo } from '@react-native-community/netinfo';

const NetworkModal = ({visible, setVisible}) => {
    const netinfo = useNetInfo();
    return (
        <Modal
            visible={visible}
            onRequestClose={() => setVisible(!visible)}
            animationType='fade'
            transparent={true}
        >
            <View
                style={styles.container}
            >
                <View
                    style={styles.box_1}
                >
                    <Text style={styles.header}>
                        Oops
                    </Text>
                    <Text 
                        style={styles.text}
                    >
                        Seems like you are not connected to the internet,
                        Please check your connectivity and try again
                    </Text>
                    <TouchableOpacity
                        onPress={() => {
                            if(netinfo.isConnected){
                                setVisible(false)
                            }
                        }}
                        style={styles.box_2}
                    >
                        <Text style={styles.try_again}>
                            Try Again
                        </Text>
                    </TouchableOpacity>

                </View>

            </View>

        </Modal>
    )
}


const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'rgba(0,0,0,0.5)',
        justifyContent: 'center',
        alignItems: 'center'
    },
    box_1: {
        width: '80%',
        height: 250,
        borderRadius: 10,
        backgroundColor: 'white',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center'
    },
    header: {
        fontSize: 18,
        fontWeight:'600'
    },
    text: {
        width: 200,
        marginBottom: 20,
        textAlign: 'center'
    },
    box_2: {
        height: 45,
        width: '75%',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: 25,
        backgroundColor: 'red'
    },
    try_again: {
        color: '#fff'
    }
})

export default NetworkModal

Okay, what was that?

We imported the modal component from react-native and we also imported the NetInfo library. The idea is that, when a network request is about to be made, we first check whether or not the device is connected, if it is, we go ahead to make the request, if not, the modal is displayed with a button to try again. When users click on this button, we use the useNetInfo hook to check whether or not the device is back online. If it is, we hide the modal and otherwise leave the modal displayed.

Next up, we need to make some adjustments to our Home component, we will be making our network request from there. Add these lines of code.



const [title, setTitle] = useState('')
    const {isConnected} = useContext(NetworkContext)

    const getDummyTodos = async () => {
        const res = await axios.get('https://jsonplaceholder.typicode.com/todos/1')
        setTitle(res?.data?.title)
    }

    const handleFetch = () => {
        if(isConnected){
            setVisible(true)
            return
        }

        getDummyTodos()
    }

We imported the NetworkContext to access the isConnected state that is handled by our ParentComponent. We'll be using the jsonplaceholder to get dummy todo text.
The getDummyTodos makes the call to our API
The handleFetch function first checks to see if we are not connected, if the device is offline, we display the modal and return from the function immediately, to prevent other blocks of code from running. If the device is connected, the isConnected checks false, and the code block within the conditional is not evaluated, then the call of our getDummyTodos function

And lastly, we need to make changes to the button to trigger the
handleFetch function. Here's what changed.



<TouchableOpacity
                    onPress={handleFetch}
                    style={{
                        width: '90%',
                        height: 50,
                        display: 'flex',
                        justifyContent: 'center',
                        alignItems: 'center',
                        backgroundColor: 'teal' //375027 
                    }}
                >
                    <Text style={{
                        color: 'white'
                    }}>
                        Get Dummy Todos
                    </Text>
                </TouchableOpacity>
                <Text>
                    Dummy to do: {title}
                </Text>

Also not to forget, let's add the NetworkModal to our home page



<NetworkModal
      visible={visible}
      setVisible={setVisible}
 />

Yeah, that's a lot of code. Here's what it looks like

So that's it.

Conclusion

The approach we used in handling network state is just one of the many approaches available. I decided to use this method in my projects because it offers flexibility and is easy to customize. Also, we can decide to add more functionality to our parent component as our project grows. Say, for example, we decide to prompt users to input their pin after they exit the app for some minutes, we can easily do that by using the AppState hook in our ParentComponent, and displaying the Pin modal after the set time is past. We can also prevent it from displaying on certain screens by checking for the route name.

The point is, that there is so much more we can do and more customization with this approach. Hope it helps. Cheers!!

This code can be found on Github

Data Flow In React

olaseinde AYOWALE — Tue, 16 Nov 2021 16:36:19 +0000

The understanding of how data flows in react is crucial to building a bug free app. As a self-taught developer, I many of the times wrote apps that broke or behave unexpectedly. Going through the code to find nothing wrong but the code is still breaking; until I had a thorough understanding of how data flows in react, I was able to write code that is bug free and should there be a bug, I'll hunt it down quickly. In this guide, I will be walking you through some common pitfalls in react and how I was able to navigate through them.

1)Unidirectional Data flow

React sends data from top to bottom. Data flows from the state to the rendered component and the nested component should there be one. To understand this, consider this code

import React, { useState, useEffect } from 'react';

const ScreenOne = () => {

    const [number, setNumber] = useState({current: 0});

    const { current } = number;


    const _onClick = () => {
         setNumber({current: number.current + 1})
         //THE CURRENT NUMBER LOGGED TO THE CONSOLE WILL 
         //BE A SNAPSHOT OF THE PREVIOUS STATE, NOT THE NEW 
         //VALUE UPDATED BY THE BUTTON

          console.log(current)
    }
    return (
        <div>
            The Current State is <span>{current}</span>
            <button onClick={_onClick}>INCREMENT</button>
        </div>
    )
}

export default ScreenOne

To make sure the current number rendered on the screen is the same as that logged on the console, we can achieve this either by using a useEffect hook or by getting the snapShot of the previous state and adding directly to it as shown in this code:

//USING USEEFFECT HOOK
import React, { useState, useEffect } from 'react'

...
useEffect(() => {
        (() => {
            console.log(current)
        })()
    }, [current])

...

//ADDING DIRECTLY TO THE SNAPSHOT OF THE PREVIOUS STATE
 const _onClick = () => {

            setNumber(prevState => ({current: prevState.current + 1}))
    }
....

2) Universal state update

There might be a better name to describe this but what is means is that, when a single source of truth like redux is integrated into a react app, when a dispatch function is fired, the state of the entire app get updated even if there is no change in the previous state compared to the current state. This behaviour can really affect performance and in some instances, break the app. To get a better understanding of this concept of universal state update, consider this code:

For this code snippet, redux, react-redux, redux-logger were installed.

ScreenTwo.component.jsx

import React from 'react';
import { connect } from 'react-redux'
import { setNumber } from '../redux/screen.action';
import ScreenThree from './screen-three.component';


const ScreenTwo = ({currentNumber, number}) => {

    const _onClick = () => {
        number(currentNumber + 1)
    }

    return (
        <div>
            This is the data from screen one { currentNumber }
            <button onClick={_onClick}>INCREMENT FROM SCREEN TWO</button>
            <ScreenThree />
        </div>
    )
}

const mapDispatchToProps = dispatch => ({
    number: data => dispatch(setNumber(data))
})


const mapStateToProps = ( { number : { initial_number } } ) => ({
    currentNumber: initial_number
})

export default connect(mapStateToProps, mapDispatchToProps)(ScreenTwo)

ScreenThree.component.jsx

import React from 'react';
import { connect } from 'react-redux'
import { setValue } from '../redux/screen-three.action';

const ScreenThree = ({val, setVal}) => {

    const _onClick = () => {
        setVal(val + 1)
    }

    return (
        <div>
            <div>The is data from Screen Three {val} </div>
            <button onClick={_onClick}>INCREMENT SCREEN THREE</button>
        </div> 
    )
}

const mapStateToProps = ({value: { initial_value}}) => {
    //THIS LOG TO THE CONSOLE IS FIRED ANYTIME THERE IS A STATE 
    // UPDATE
    console.log('State is Being Updated from Screen Three')
    return { val: initial_value }
}

const mapDispatchToProps = dispatch => ({
    setVal: value => dispatch(setValue(value))
})

export default connect(mapStateToProps, mapDispatchToProps)(ScreenThree)

Given we have installed a logging library in our app, we can view from our console State is Being Updated from Screen Three regardless of where state got updated.
This behaviour of the state always been updated can really slow down the app. To mitigate this, the state should be memoized. With memoization, only the component where state changed will get re-rendered. To memoize out react state, we use a library called reselect.
This code snippet shows a simple reselect setup:

screen-three-selector.js

import { createSelector } from 'reselect'


//THE SELECTOR TAKES THE ENTIRE STATE AND RETURNS JUST 
// FRACTION OF IT
const selectValue = state => state.value


//BASED ON THE STATED RETURNED FROM THE FUNCTION ABOVE
//WE CAN NOW RETURN A SPECIFIC STATE VALUE
export const selectInitialValue = createSelector(
    [selectValue],
    (value) => value.initial_value
)

screen-two-selector.js

import { createSelector } from 'reselect';


const selectNumber = state => state.number;

export const selectInitialNumber = createSelector(
    [selectNumber],
    (number) => number.initial_number
)

In our ScreenThree.component.jsx, we add these new lines of imports:

import { selectInitialValue } from '../redux/screen-three-selectors';
import { createStructuredSelector } from 'reselect';

In our mapStateToProps function, we change it such that our selector has access to the state object.

const mapStateToProps = createStructuredSelector ({
    val: selectInitialValue
})

Also in our ScreenTwo.component.jsx, we follow the same procedure, import createStructuredSelectors and selectInitialValues, the selector for ScreenTwo.

With this setup in place, we can be sure that a state update in one of the state values will not cause a re-rendering of the entire app state.
For more detailed documentation on the usage of the reselect library, please visit the official documentation reselect.

These are some of the few ways data flow in react can lead to a bad app performance.