DEV Community: Zidane Gimiga

Building Offline-first Applications with React Native

Zidane Gimiga — Wed, 18 Sep 2024 21:30:00 +0000

Imagine your app being used by a retailer updating stock levels, a sales representative accessing customer data, or any user sending messages during intermittent connectivity. In all these cases, offline functionality can mean the difference between a seamless user experience and a frustrating one. This is where Offline-first thinking comes into play.

An Offline-first approach ensures your app remains functional even when the internet is unavailable. Apps like WhatsApp illustrate this concept perfectly. When you send a message while offline, it’s stored locally and automatically sent once the connection is restored. This seamless experience is achieved by leveraging local storage and monitoring network status. Whether it's through a database or device memory, the app continues to function, syncing stored data with the server when connectivity is available again.

In this article, I'll guide you through implementing offline support in React Native applications using local storage, database syncing, and Expo APIs. The benefits of an Offline-first approach include:

Improved User Experience: Users are less likely to experience downtime, which increases their overall satisfaction.
Data Consistency: Data is stored locally and synchronized when online, preventing data loss or corruption.
Increased Engagement: Apps that work offline provide greater flexibility, increasing engagement and retention, especially in regions with unreliable internet.

Setting Up Offline Support with Expo and React Native

Expo is a great framework for React Native development because it abstracts many platform-specific configurations, allowing you to focus on building features. In this section, we’ll explore how to implement offline support in a simple React Native app using Expo, AsyncStorage for local storage, and NetInfo for network status detection.

1. Set up the project

First, let’s start by creating a new Expo-powered React Native project.

npx create-expo-app offline-first-app
cd offline-first-app

Step 2: Installing Dependencies

For this example, we’ll use two key libraries:

@react-native-async-storage/async-storage: This library will allow us to store data on the device.
@react-native-community/netinfo: This library will help us detect network status, determining whether the device is online or offline.

Install the necessary packages:

expo install @react-native-async-storage/async-storage @react-native-community/netinfo

Step 3: Implementing Offline Logic

Next, we’ll build a simple application that fetches data from an API when online and stores it locally for use when offline. We will start by setting up the basic structure in App.js:

import React, { useState, useEffect } from 'react';
import { StyleSheet, Text, View, Button, FlatList } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';
import NetInfo from '@react-native-community/netinfo';

const DATA_API = 'https://jsonplaceholder.typicode.com/posts';

export default function App() {
  const [data, setData] = useState([]);
  const [isOffline, setIsOffline] = useState(false);

  useEffect(() => {
    const loadData = async () => {
      // Check network status
      const netInfo = await NetInfo.fetch();
      setIsOffline(!netInfo.isConnected);

      if (netInfo.isConnected) {
        // Fetch data from API when online
        try {
          const response = await fetch(DATA_API);
          const result = await response.json();
          setData(result);

          // Cache the data for offline use
          await AsyncStorage.setItem('cachedData', JSON.stringify(result));
        } catch (error) {
          console.error('Failed to fetch data:', error);
        }
      } else {
        // Load data from AsyncStorage when offline
        try {
          const cachedData = await AsyncStorage.getItem('cachedData');
          if (cachedData) {
            setData(JSON.parse(cachedData));
          }
        } catch (error) {
          console.error('Failed to load data from cache:', error);
        }
      }
    };

    loadData();
  }, []);

  return (
    <View style={styles.container}>
      <Text style={styles.header}>Offline-First App</Text>
      <Text>Status: {isOffline ? 'Offline' : 'Online'}</Text>

      <FlatList
        data={data}
        keyExtractor={(item) => item.id.toString()}
        renderItem={({ item }) => (
          <View style={styles.item}>
            <Text style={styles.title}>{item.title}</Text>
          </View>
        )}
      />

      <Button title="Reload" onPress={() => loadData()} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 50,
    paddingHorizontal: 20,
    backgroundColor: '#fff',
  },
  header: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20,
  },
  item: {
    backgroundColor: '#f9c2ff',
    padding: 20,
    marginVertical: 8,
  },
  title: {
    fontSize: 16,
  },
});

How Does It Work?

Network Status Detection: Using the NetInfo library, we check whether the device is online or offline. If it’s online, the app fetches data from the API and caches it. If the device is offline, the app retrieves cached data from AsyncStorage.
Data Caching: AsyncStorage allows us to store the data fetched from the API for offline access. This is essential for making the app functional without an active internet connection.
Data Synchronization: When connectivity is restored, the app fetches fresh data from the API and updates the cache, ensuring users always have the most up-to-date information when they’re online.

Advanced Offline Capabilities and Key Considerations

You can build upon this basic functionality by integrating more advanced features, such as:

Syncing Strategies: Some apps require advanced syncing strategies, where conflicts might arise (e.g., two users updating the same data offline). Tools like PouchDB or Firebase can help manage real-time data syncing and conflict resolution.
Database Solutions: For more complex apps, you may want to use a local database like Realm or SQLite for handling larger datasets and more sophisticated queries.
Optimistic Updates: In some apps, especially those with user-generated content like social media, it’s common to allow users to create, update, or delete data offline. You can implement optimistic updates, where changes are made in the UI immediately and synced with the server when the app reconnects to the internet.

Handling Complex Syncing and Conflict Resolution

In an offline-first app, conflicts arise when multiple users update the same data while offline and their changes are later synced with the server once the app reconnects to the internet. Handling these conflicts is crucial to maintain data consistency and provide a smooth user experience.

There are different strategies for resolving such conflicts, including:

Last Write Wins (LWW)
Manual Conflict Resolution
Operational Transformation (OT)

I have some examples here for you to check.

1. Last Write Wins (LWW)

In this strategy, the most recent change (based on a timestamp) is accepted as the final value when syncing data. It is simple and works well for many applications, but it may lead to data loss if multiple users edit the same data.

Imagine you are building a note-taking app, if two users edit the same note while offline, the user who syncs their changes last will overwrite the previous user’s changes.

Let’s assume we have a local storage system (using AsyncStorage) and a remote server.

import AsyncStorage from '@react-native-async-storage/async-storage';

// Simulate syncing the note data with the server
const syncNoteWithServer = async (localNote) => {
  try {
    const response = await fetch('evernotestefan-skliarovv1.p.rapidapi.com/getNote', {
        'x-rapidapi-key': 'Sign Up for Key',
    'x-rapidapi-host': 'Evernotestefan-skliarovV1.p.rapidapi.com',
    'Content-Type': 'multipart/form-data; boundary=---011000010111000001101001'
    });
    const serverNote = await response.json();

    // Compare timestamps
    if (localNote.updatedAt > serverNote.updatedAt) {
      // Local version is newer, so overwrite the server
      await fetch('https://api.example.com/note', {
        method: 'PUT',
        body: JSON.stringify(localNote),
        headers: { 'Content-Type': 'application/json' },
      });
    } else {
      // Server version is newer, discard local changes
      await AsyncStorage.setItem('note', JSON.stringify(serverNote));
    }
  } catch (error) {
    console.error('Sync failed:', error);
  }
};

// Example usage
const localNote = {
  content: 'This is an updated note.',
  updatedAt: Date.now(), // Timestamp of the last local update
};

syncNoteWithServer(localNote);

In this example:
The app compares the updatedAt timestamp of the local note (stored offline) with the note stored on the server.
If the local note is newer, it overwrites the server version. Otherwise, it discards local changes and updates the app with the server version.

Pros:

Simple to implement.
Works well for non-critical data.

Cons:

May lead to data loss (e.g., if both users made significant changes).

2. Manual Conflict Resolution

With manual conflict resolution, the user is prompted to resolve conflicts when multiple versions of the same data exist. This approach is more user-friendly in scenarios where every change is valuable and users need to decide which data to keep.

Here is a potential case, in a collaborative editing app, two users edit the same document while offline. Once both versions are synced, the user is prompted to choose which version to keep or merge.

import AsyncStorage from '@react-native-async-storage/async-storage';
import { Alert } from 'react-native';

// Simulate syncing the document with the server
const syncDocumentWithServer = async (localDoc) => {
  try {
    const response = await fetch('https://document.com/document');
    const serverDoc = await response.json();

    if (localDoc.updatedAt !== serverDoc.updatedAt) {
      // Conflict detected, ask the user to resolve it
      Alert.alert(
        'Document Conflict',
        'Both you and another user have edited this document. Choose which version to keep.',
        [
          {
            text: 'Keep Local',
            onPress: async () => {
              // Overwrite the server with local changes
              await fetch('https://api.example.com/document', {
                method: 'PUT',
                body: JSON.stringify(localDoc),
                headers: { 'Content-Type': 'application/json' },
              });
            },
          },
          {
            text: 'Keep Server',
            onPress: async () => {
              // Discard local changes and update the app with the server version
              await AsyncStorage.setItem('document', JSON.stringify(serverDoc));
            },
          },
        ],
      );
    } else {
      // No conflict, proceed with syncing
      await AsyncStorage.setItem('document', JSON.stringify(serverDoc));
    }
  } catch (error) {
    console.error('Sync failed:', error);
  }
};

// Example usage
const localDoc = {
  content: 'This is my latest edit.',
  updatedAt: Date.now(), // Timestamp of the last local update
};

syncDocumentWithServer(localDoc);

Here's what's happening
If the updatedAt timestamps differ between the local and server versions, the app alerts the user and asks them to choose which version to keep. The user can decide whether to keep the local or server version.

Pros:

Ensures that no important data is lost.
Suitable for collaborative apps where user input is valuable.

Cons:

Requires user intervention, which can be disruptive.
May confuse non-technical users.

3. Operational Transformation (OT)
Operational Transformation is a more advanced technique used in real-time collaboration apps like Google Docs. It automatically merges conflicting changes by transforming operations in a way that preserves both sets of edits. OT allows multiple users to work on the same document simultaneously, and their changes are merged intelligently.

In a document editor app, two users edit different parts of a document. OT ensures that both sets of edits are applied without overwriting each other.

This implementation is a bit complex and require specialized libraries, such as ShareDB or Yjs. Here’s a basic pseudocode example of how OT works:

// Example of transforming two concurrent operations
const operation1 = { type: 'insert', position: 5, value: 'Hello' }; // User 1 adds 'Hello' at position 5
const operation2 = { type: 'insert', position: 3, value: 'World' }; // User 2 adds 'World' at position 3

const transformOperations = (op1, op2) => {
  // If both operations modify different positions, no conflict
  if (op1.position !== op2.position) return [op1, op2];

  // If operations conflict, adjust positions accordingly
  if (op1.position > op2.position) op1.position += op2.value.length;
  else op2.position += op1.value.length;

  return [op1, op2];
};

// Transform the operations to avoid conflicts
const [transformedOp1, transformedOp2] = transformOperations(operation1, operation2);

The positions of the two conflicting operations are adjusted so that they can both be applied without overwriting each other.

Pros:

Ideal for real-time collaboration.
Automatically resolves conflicts without user intervention.

Cons:

Complex to implement.
Requires specialized algorithms and libraries.

Conclusion
Each conflict resolution strategy comes with its trade-offs. For simpler apps, Last Write Wins may suffice. However, for collaborative apps where user data is crucial, Manual Conflict Resolution or more advanced techniques like Operational Transformation might be necessary. Choosing the right strategy depends on the complexity of your app and the importance of the data being modified.

I plan to create a series of articles that dive deeper into the following key topics:

Optimistic UI Updates – We'll explore how to immediately reflect changes made while offline in the UI, giving users the impression that their actions were successful. This approach greatly improves the user experience.

Using Service Workers for Web-Based Apps – If you're deploying your app on the web via React Native Web, I'll explain how service workers can enable offline caching and background syncing for Progressive Web Apps (PWAs). This ensures that users can access resources and data even when they’re offline.

Real-World Use Cases of Offline-First Apps – I’ll take a closer look at how apps like Google Maps, Slack, Trello, and Notion handle offline scenarios. By studying these examples, you’ll gain a better understanding of the practical applications of offline-first techniques.

Testing Offline Capabilities – We'll cover the importance of testing offline functionality and review tools like React Native Debugger, Expo tools, and the Network Link Conditioner (for iOS) to simulate network interruptions. I’ll also show you how to write tests using libraries like Jest and React Native Testing Library to ensure your app behaves correctly in offline conditions.

Performance and Storage Considerations – Performance isn’t just about speed; it’s also about user experience. I’ll discuss strategies for optimizing performance by reducing cached data and implementing data expiry policies to avoid overwhelming local storage.

Stay tuned devs.

Thank you for reading all the way through. I genuinely enjoy documenting and sharing my learnings. I plan to create more content, including video tutorials, which I'll share on Instagram and TikTok. If you're new here, I'm Zidane Gimiga, a software developer with a passion for optimizing user experiences. As technology becomes more integrated into our lives, it's essential to make it as easy and accessible as possible for everyone. Let's keep pushing for better, user-friendly solutions.

Oh, I'm on Github

useRef, forwardRefs and useImperativeHandle.

Zidane Gimiga — Sun, 24 Sep 2023 09:26:32 +0000

Picture this. You are creating a form on your React/React Native application, and you want an input tag to be focused as soon as the form is rendered and mounted on the screen. I'm writing to share my learnings on how to access a DOM node's property in React, control which properties of the node you would like to be exposed and be able to pass refs from a parent to a child component.

Let's start with the basics. What is a ref? To put it simply, it's a label or name for a specific thing or location where something is stored. In React, you may want to access, interact and directly manipulate a DOM node like <input/>, <p> and so on.

The React library has a hook that allows you to define refs and attach them to specific DOM elements you may like. It's called useRef.

import { useRef } from "react";

const Form = () =>{
  const inputRef = useRef(null);

  return(
    <form>
       <input ref={inputRef}/>
    </form>
  )
}

In the above code we are importing useRef, defining a component Form, adding an input tag wrapped by a form tag. We create a reference to the input tag called inputRef and initialize it as null. This allows us to do something cool like, focusing the input as soon as the form renders. For this, we'll utilize the useEffect hook as follows:

import { useRef, useEffect } from "react";

const Form = () =>{
  const inputRef = useRef(null);

  useEffect(()=>{
    inputRef.current.focus();    
  }, [])

  return(
    <form>
       <input ref={inputRef}/>
    </form>
  )
}

With the ref, you can perform more things like setting style properties e.g

  inputRef.current.style.borderColor = "green";

It basically exposes all of the properties of a DOM node to you.

Now, let's say you are creating a MyInput component because of your design system and it's also a best practice to create reusable components in React so as to avoid code duplication.

Being this independent, you can pass a ref to a specific input component. For this, we utilize forwardRef.

Your input component might look like:

import { forwardRef } from "react";

const MyInput = forwardRef(function MyInput(ref, props)){
  return(
    <input 
     value={props.value}
    />
  )
}

You will then use it in the Form component by passing a ref as a prop to the MyInput component. This will allow you to immediately focus the specific input field as soon as the Form renders. You could perform extra things like when a user enters an invalid value or attempts to submit values without filling a field, then you could scroll to and focus on that field, and perhaps change the border color to red. Refs open you up to special conditional customizations of your DOM elements.

Let's say you want to hide some functions or values from the Parent Form component. You could also want to create custom functions that bundle together different ref functions that the Form component can use. I will introduce you to a React hook called useImperativeHandler.

The hook is a way to control what properties and methods are accessible from a child component when accessed through a ref.

import React, { useRef, useImperativeHandle, forwardRef } from 'react';

const MyInput = forwardRef((props, ref) => {
  const inputRef = useRef();

  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    },
    getValue: () => {
      return inputRef.current.value;
    },
  }));

  return <input ref={inputRef} />;
});

const Form = () => {
  const childRef = useRef();

  const handleFocus = () => {
    // This will call the custom focus method in the child component
    childRef.current.focus(); 
  };

  const handleGetValue = () => {
    // This will call the custom getValue method in the child component
    const value = childRef.current.getValue(); 
    console.log('Value:', value);
  };

  return (
    <div>
      <MyInput ref={childRef} />
      <button onClick={handleFocus}>Focus Input</button>
      <button onClick={handleGetValue}>Get Value</button>
    </div>
  );
}

In this example, the Input component uses useImperativeHandle to customize the interface exposed through the ref. It exposes a focus method to focus on the input field and a getValue method to retrieve its value. The Form component can then use these methods through the childRef.

This approach allows you to encapsulate and control the interactions with a child component, exposing only the necessary functionality to the parent component through the ref.

Please refer to the following links for more in depth information regarding refs in React.

I am Zidane Gimiga, a full Stack software engineer and fervent Web3 enthusiast. I am committed to sharing different things I learn with others, mostly in software development. I hope you found value in this or had your interest piqued. Please feel free to ask questions or share your feedback. Until next time!