Summary - Offline support
- React Native course
- Advanced
- Lesson 36/83
- 5 min
Combine NetInfo, cache and sync to write an offline-first app.
Summary - Offline
In this group you learned to query the network state with NetInfo, set up an offline cache, trigger synchronization, do conflict resolution and write a retry queue. The core of an offline app is these five pieces.
In the summary we will merge the network state, cache and synchronization in a single app. These three pieces together form a real offline flow. Let us merge them now.
Practice Summary - Query the network state
Complete the empty checkOnline function. Call const state = await NetInfo.fetch(). Return the connection state with return state.isConnected.
Starter code
import NetInfo from '@react-native-community/netinfo';
export async function checkOnline() {
// query the network state and return isConnected
}Sample solution
const state = await NetInfo.fetch();
return state.isConnected;Practice Summary - Resolve the conflict
Complete the resolveConflict function. It takes local and server as parameters. Write if (local.updatedAt > server.updatedAt) return local; else return server.
Starter code
export function resolveConflict(local, server) {
// resolve the conflict with last-write-wins
}Sample solution
if (local.updatedAt > server.updatedAt) return local;
return server;Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Write the network state function
const state = await NetInfo.____();const state = await NetInfo.fetch();Explanation: fetch gives the current network state.
2 Match each flow part to its role
| Term | Meaning |
|---|---|
NetInfo.fetch() |
Network state |
AsyncStorage.getItem |
Reads cache |
syncQueue |
Sends the queue |
resolveConflict |
Resolves conflict |