app development · react native

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):

First map the offline.isConnected property in the MainScreen :

Now on each state update, check the connectivity value:

Include the NetworkStatusBanner: