Build an Expense Manager App with React Native – Part 6

Add connection status Banner

We are going to use the AppStateRootSaga we setup previously to show a banner to the user to indicate when he is online or not.

Use the following Banner Component (credits: https://pusher.com/tutorials/offline-react-native-part-2):

import React from "react";

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

const NetworkStatusBanner = ({ isConnected, isVisible }) => {

if (!isVisible) return null;

const boxClass = isConnected ? "success" : "danger";

const boxText = isConnected ? "online" : "offline";

return (

<Text style={styles.statusText}>you are {boxText}</Text>

</View>

)

}

const styles = {

alertBox: {

padding: 5

success: {

backgroundColor: "#88c717"

danger: {

backgroundColor: "#f96161"

statusText: {

fontSize: 14,

color: "#fff",

alignSelf: "center"

}

};

export default NetworkStatusBanner;

First map the offline.isConnected property in the MainScreen :

...

const mapStateToProps = (state) => {

return {

isLoading: state.data.isLoading,

expenses: state.data.expenses,

isOnline: state.offline.isConnected

}

...

Now on each state update, check the connectivity value:

// MainScreen

...

async componentDidUpdate (prevProps, prevState) {

const { isOnline } = this.props

if (isOnline && prevProps.isOnline != isOnline) {

this.props.fetchExpenses()

}

...

Include the NetworkStatusBanner:

...

<Button

buttonStyle={styles.buttonStyle}

onPress={() => this.props.navigation.navigate('AddExpenseScreen')}

title={i18next.t('app:addExpense')}

titleStyle={styles.buttonTitleStyle}

</View>

<NetworkStatusBanner

isConnected={this.props.isOnline}

isVisible={!this.props.isOnline}

...