DEV Community: M. Saad Ullah

How I set up Design System for my React Native Projects for 10x Faster Development

M. Saad Ullah — Sun, 06 Oct 2024 12:29:09 +0000

Ever built apps that you wouldn't want to use yourself?

When I was a junior app developer, I used to build chaotic user interfaces.

Sometimes when looking at those UIs, I used to think "who in the world would even want to use this? It looks awful".

Other times, there was just "something off" that I just couldn't point out.

While I used to get amazing polished designs from design team, my apps would not look even 20% as good.

I was aware of this problem, and to fix it I went down on a rabbit hole of research in which I came across concept of having a design system which transformed the way I build apps.

What is this amazing thing called Design System?

It's crucial to understand what a design system is to be able to understand why do we need it.

Design system is basically a centralized source of truth for yours and your teams design decisions. It tells you what colours to use and where? How many types of buttons the app will have? Will the cards in your list have shadows? All answers comes from a design system.

Here are some of the benefits of having a design system:

Consistent UIs: Your interface will not have those weird gaps here and there for no reason. It will look and feel uniform across all devices.
Rapid decisions: Design systems enforces a certain set of constraints to make your decisions easier, not harder. The more options you have, the more analysis-paralysis you encounter.
Scalable Apps: As the app grows, a design system helps in reusing components rather than building from scratch.
Focus on development: You no longer have to stress whether the button should be green or blue. Instead, you'll focus on what matters.

Tools & Libraries

While there are tons of React Native UI libraries out there, I use custom approach as I've had horrible experiences with most of them regarding performance and bugs.

The only library I rely on for my approach is react-native-size-matters.

Now before you scream "size doesn't matter!", let me assure you it does. Especially, when it comes to mobile apps.

You don't want your users opening your app, seeing a giant logo covering everything, and think "What in the ugly..." before they delete without even trying because your logo hid the button.

That's where react-native-size-matters helps. It makes your apps responsive by scaling your components to fit the device. So, no matter which device users have, your logo stays exactly where you put it.

Set up theme

One of the first thing I define is my core design tokens. These are the building blocks of my design system. These include color palettes, typography, spacings, and font sizes.

I do this by creating a theme.ts file with the following code:

import {moderateScale} from 'react-native-size-matters';

// after installing custom fonts:
export const FontFamily = {
  bold: 'Poppins-Bold',
  semibold: 'Poppins-SemiBold',
  medium: 'Poppins-Medium',
  regular: 'Poppins-Regular',
  thin: 'Poppins-Thin',
};

const colors = {
  primary100: '#2E2C5F',
  primary80: '#524DA0',
  primary60: '#736DDF',
  primary40: '#A09BFF',
  primary20: '#DCDAFF',

  secondary100: '#484A22',
  secondary80: '#858945',
  secondary60: '#D9DF6D',
  secondary40: '#F8FCA1',
  secondary20: '#FDFFD4',

  neutral100: '#131218',
  neutral90: '#1D1C25',
  neutral80: '#272631',
  neutral70: '#343341',
  neutral60: '#3E3D4D',
  neutral50: '#53526A',
  neutral40: '#757494',
  neutral30: '#9C9AC1',
  neutral20: '#CBC9EF',
  neutral10: '#E8E7FF',
  white: '#fff',
  black: '#222',

  error: '#E7002A',
  success: '#3EC55F',
  warning: '#FECB2F',
  info: '#157EFB',
};

const theme = {
  colors,
  fontSizes: {
    xxl: moderateScale(32),
    xl: moderateScale(28),
    lg: moderateScale(24),
    md: moderateScale(20),
    body: moderateScale(17),
    sm: moderateScale(14),
    xs: moderateScale(12),
    xxs: moderateScale(10),
    xxxs: moderateScale(8),
  },
  spacing: {
    none: 0,
    xxs: moderateScale(4),
    xs: moderateScale(8),
    md: moderateScale(12),
    lg: moderateScale(16),
    xl: moderateScale(20),
    xxl: moderateScale(24),
    xxxl: moderateScale(28),
  },
};

export default theme;

Creating Reusable Components

Once my design tokens are in place, I define some reusable components such as Box, Typography, and Input. These components adhere to the design tokens, ensuring consistency across the app.

For example here's how I create Box component:

import {
  View,
  type ViewProps,
  type FlexAlignType,
  type ViewStyle,
} from 'react-native';
import theme from '../styles/theme/theme';

export interface IBox extends ViewProps {
  backgroundColor?: keyof typeof theme.colors;
  p?: keyof typeof theme.spacing;
  pv?: keyof typeof theme.spacing;
  ph?: keyof typeof theme.spacing;
  pt?: keyof typeof theme.spacing;
  pb?: keyof typeof theme.spacing;
  pl?: keyof typeof theme.spacing;
  pr?: keyof typeof theme.spacing;
  m?: keyof typeof theme.spacing;
  mv?: keyof typeof theme.spacing;
  mh?: keyof typeof theme.spacing;
  mt?: keyof typeof theme.spacing;
  mb?: keyof typeof theme.spacing;
  ml?: keyof typeof theme.spacing;
  mr?: keyof typeof theme.spacing;
  gap?: number;
  flex?: number;
  flexDirection?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
  alignItems?: FlexAlignType;
  justifyContent?:
    | 'center'
    | 'flex-start'
    | 'flex-end'
    | 'space-between'
    | 'space-around'
    | 'space-evenly';
  rounded?: boolean;
}

export default function Box({
  backgroundColor,
  p,
  pv,
  ph,
  pt,
  pb,
  pr,
  pl,
  m,
  mv,
  mh,
  mt,
  mb,
  ml,
  mr,
  children,
  style,
  flex,
  alignItems,
  justifyContent,
  flexDirection = 'column',
  rounded = false,
  gap = undefined,
  ...rest
}: IBox) {
  const getMargin = () => {
    const obj: any = {};

    if (m) {
      obj.margin = theme.spacing[m];
      return obj;
    }
    if (mt) obj.marginTop = mt ? theme.spacing[mt] : 0;
    if (mb) obj.marginBottom = mb ? theme.spacing[mb] : 0;
    if (ml) obj.marginLeft = ml ? theme.spacing[ml] : 0;
    if (mr) obj.marginRight = mr ? theme.spacing[mr] : 0;
    if (mv) obj.marginVertical = theme.spacing[mv];
    if (mh) obj.marginHorizontal = theme.spacing[mh];
    return obj;
  };

  const getPadding = () => {
    const obj: any = {};

    if (p) {
      obj.padding = theme.spacing[p];
      return obj;
    }

    if (pt) obj.paddingTop = pt ? theme.spacing[pt] : 0;
    if (pb) obj.paddingBottom = pb ? theme.spacing[pb] : 0;
    if (pl) obj.paddingLeft = pl ? theme.spacing[pl] : 0;
    if (pr) obj.paddingRight = pr ? theme.spacing[pr] : 0;
    if (pv) obj.paddingVertical = theme.spacing[pv];
    if (ph) obj.paddingHorizontal = theme.spacing[ph];

    return obj;
  };

  const boxStyles: ViewStyle[] = [
    {
      backgroundColor: backgroundColor
        ? theme.colors[backgroundColor]
        : undefined,
      flex,
      justifyContent,
      alignItems,
      flexDirection,
      borderRadius: rounded ? 10 : 0,
      gap,
    },
    getMargin(),
    getPadding(),
    style,
  ];

  return (
    <View style={boxStyles} {...rest}>
      {children}
    </View>
  );
}

I use this newly created Box component as a replacement of View. It allows me to quickly style it through props (and give suggestions if you're using typescript) like so:

Here's an example of how I create Typography component which I use instead of React Native's Text component:

import React from 'react';
import {Text, type TextProps} from 'react-native';
import theme, {FontFamily} from '../styles/theme/theme';

export interface ITypography extends TextProps {
  size?: keyof typeof theme.fontSizes;
  color?: keyof typeof theme.colors;
  textAlign?: 'center' | 'auto' | 'left' | 'right' | 'justify';
  variant?: keyof typeof FontFamily;
}

export default function Typography({
  size,
  color,
  textAlign,
  children,
  style,
  variant,
  ...rest
}: ITypography) {
  return (
    <Text
      {...rest}
      style={[
        {
          color: color ? theme.colors[color] : theme.colors.white,
          textAlign,
          fontSize: size ? theme.fontSizes[size] : theme.fontSizes.body,
          fontFamily: variant ? FontFamily[variant] : FontFamily.regular,
        },
        style,
      ]}>
      {children}
    </Text>
  );
}

Here's a preview of how quickly I am able to add styles to my custom Typography component:

Custom `useTheme` hook

Instead of importing theme again and again, I make my code more readable by creating a custom useTheme hook which I call anywhere in the app to add styles that adhere with my theme.

In order to do this, I leverage React's Context API to pass my theme in the app.

I create a ThemeProvider.tsx file and inside define the ThemeContext and ThemeProvider to wrap my app component inside it. Here's the code:

import React, {type PropsWithChildren, createContext} from 'react';
import theme from './theme';

export const ThemeContext = createContext(theme);

export default function ThemeProvider({children}: PropsWithChildren) {
  return (
    <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>
  );
}

Then, inside my App component:

export default function App() {
  return (
    <ThemeProvider>
      <AppNavigation />
    </ThemeProvider>
  );
}

Now that my entire app has access to ThemeContext, I create my useTheme hook:

import {useContext} from 'react';
import {ThemeContext} from '../styles/theme/ThemeProvider';

export default function useTheme() {
  const theme = useContext(ThemeContext);
  return theme;
}

Now I can access my theme anywhere by calling the useTheme hook like so:

const theme = useTheme();
// example usage:
theme.colors.primary100;
theme.spacing.md;
theme.fontSizes.lg;

Dark Mode

To implement dark mode colors, first define the dark theme colors in your theme.ts file with the same keys as light mode:

export const darkTheme = {
/// your colors with same keys but different colors
}

Make sure to export both the light theme colors and the dark theme colors.

Next, in your ThemeProvider.tsx file, check whether the device is in dark mode or light mode and switch colors accordingly. Here's an example:

import {useColorScheme} from 'react-native';

export default function ThemeProvider({children}: PropsWithChildren) {
  const isDark = useColorScheme() === 'dark';

  const AppTheme = {
    ...theme,
    colors: isDark ? darkTheme : colors,
  };

  return (
    <ThemeContext.Provider value={AppTheme}>{children}</ThemeContext.Provider>
  );
}

And now, inside your custom components, instead of using theme imported from the theme.ts file, use the theme returned from useTheme hook!

Here's a full example of the Box component we created earlier:

import {
  View,
  type ViewProps,
  type FlexAlignType,
  type ViewStyle,
} from 'react-native';
import theme from '../styles/theme/theme';
import useTheme from '../hooks/useTheme';

export interface IBox extends ViewProps {
  backgroundColor?: keyof typeof theme.colors;
  p?: keyof typeof theme.spacing;
  pv?: keyof typeof theme.spacing;
  ph?: keyof typeof theme.spacing;
  pt?: keyof typeof theme.spacing;
  pb?: keyof typeof theme.spacing;
  pl?: keyof typeof theme.spacing;
  pr?: keyof typeof theme.spacing;
  m?: keyof typeof theme.spacing;
  mv?: keyof typeof theme.spacing;
  mh?: keyof typeof theme.spacing;
  mt?: keyof typeof theme.spacing;
  mb?: keyof typeof theme.spacing;
  ml?: keyof typeof theme.spacing;
  mr?: keyof typeof theme.spacing;
  gap?: number;
  flex?: number;
  flexDirection?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
  alignItems?: FlexAlignType;
  justifyContent?:
    | 'center'
    | 'flex-start'
    | 'flex-end'
    | 'space-between'
    | 'space-around'
    | 'space-evenly';
  rounded?: boolean;
}

export default function Box({
  backgroundColor,
  p,
  pv,
  ph,
  pt,
  pb,
  pr,
  pl,
  m,
  mv,
  mh,
  mt,
  mb,
  ml,
  mr,
  children,
  style,
  flex,
  alignItems,
  justifyContent,
  flexDirection = 'column',
  rounded = false,
  gap = undefined,
  ...rest
}: IBox) {
  const AppTheme = useTheme();
  const getMargin = () => {
    const obj: any = {};

    if (m) {
      obj.margin = AppTheme.spacing[m];
      return obj;
    }
    if (mt) obj.marginTop = mt ? AppTheme.spacing[mt] : 0;
    if (mb) obj.marginBottom = mb ? AppTheme.spacing[mb] : 0;
    if (ml) obj.marginLeft = ml ? AppTheme.spacing[ml] : 0;
    if (mr) obj.marginRight = mr ? AppTheme.spacing[mr] : 0;
    if (mv) obj.marginVertical = AppTheme.spacing[mv];
    if (mh) obj.marginHorizontal = AppTheme.spacing[mh];
    return obj;
  };

  const getPadding = () => {
    const obj: any = {};

    if (p) {
      obj.padding = AppTheme.spacing[p];
      return obj;
    }

    if (pt) obj.paddingTop = pt ? AppTheme.spacing[pt] : 0;
    if (pb) obj.paddingBottom = pb ? AppTheme.spacing[pb] : 0;
    if (pl) obj.paddingLeft = pl ? AppTheme.spacing[pl] : 0;
    if (pr) obj.paddingRight = pr ? AppTheme.spacing[pr] : 0;
    if (pv) obj.paddingVertical = AppTheme.spacing[pv];
    if (ph) obj.paddingHorizontal = AppTheme.spacing[ph];

    return obj;
  };

  const boxStyles: ViewStyle[] = [
    {
      backgroundColor: backgroundColor
        ? AppTheme.colors[backgroundColor]
        : undefined,
      flex,
      justifyContent,
      alignItems,
      flexDirection,
      borderRadius: rounded ? 10 : 0,
      gap,
    },
    getMargin(),
    getPadding(),
    style,
  ];

  return (
    <View style={boxStyles} {...rest}>
      {children}
    </View>
  );
}

Notice that we're using theme for auto suggestions in props, but actually using the theme returned from the hook to style our components allowing us to easily switch colors based on user device theme!

Here's a full modified version of Typography component:

import React from 'react';
import {Text, TextProps, useColorScheme} from 'react-native';
import theme, {FontFamily} from '../styles/theme/theme';
import useTheme from '../hooks/useTheme';

export interface ITypography extends TextProps {
  size?: keyof typeof theme.fontSizes;
  color?: keyof typeof theme.colors;
  textAlign?: 'center' | 'auto' | 'left' | 'right' | 'justify';
  variant?: keyof typeof FontFamily;
}

export default function Typography({
  size,
  color,
  textAlign,
  children,
  style,
  variant,
  ...rest
}: ITypography) {
  const AppTheme = useTheme();
  return (
    <Text
      {...rest}
      style={[
        {
          color: color
            ? AppTheme.colors[color]
            : useColorScheme() === 'dark'
            ? AppTheme.colors.white
            : AppTheme.colors.black,
          textAlign,
          fontSize: size ? AppTheme.fontSizes[size] : AppTheme.fontSizes.body,
          fontFamily: variant ? FontFamily[variant] : FontFamily.regular,
        },
        style,
      ]}>
      {children}
    </Text>
  );
}

Notice we're changing the default color of the text to white if the device is in dark mode and black if in light mode.

Conclusion

Following this clear structured approach has brought much needed clarity, consistency, and aesthetics in my app while also sped up my development speed by at least 10x since I no longer have to dwell over design decisions.

I encourage you to try this approach and let me know what you guys think in the comments. Maybe improve it a little bit eh?

Building Offline-First Apps using React Native, React Query, and AsyncStorage

M. Saad Ullah — Tue, 01 Oct 2024 20:51:28 +0000

As the world is advancing in technology, people have started to expect a lot of things from even a simple mobile app. One of which is being able to run apps offline and also be able to sync data across different devices.

In this article, I will show you how to build an offline-first mobile app using React Native, React Query, and AsyncStorage.

But first, let's understand how syncing data actually works.

How syncing works

In an offline-first app, user data is stored locally in the user's device as well as in the server.

If a user a loses internet connectivity for some reason, and the data changes, we basically check what data has changed and once internet connection is restored, we modify data in the database accordingly.

You might be wondering, if the data is stored locally, it means that it is not good strategy for apps that have large datasets to be developed in an offline-first approach as app will take up a lot of your phone storage, and you'll be right.

Building offline-first apps that deal with huge amounts of data requires strategic storage solutions such as lazy-loading, partially storing some of the data, on-demand syncing, offline-modes for some specific features, and many others are used.

What we'll build

I will be building a simple offline-first Todo list app for demonstration in this article.

The user will be able to add and fetch tasks and the app will run both online and offline.

I highly recommend that you understand the concept and come up with your solutions according to your project needs.

So without further ado, let's start.

Initialize a new project

Start by creating a new react native project by running the following command in your projects directory:

npx react-native@latest init TodoApp

Inside the project folder, create src folder which will contain all our code files.

Install required libraries

For this project, we will need 3 libraries:

React Query - A rock-solid React data fetching library that makes fetching, caching, synchronizing and updating server state a breeze. It works with React Native out of the box so you don't need to configure anything. You can learn more about it in the documentation.

AsyncStorage - An asynchronous, unencrypted, persistent, key-value storage system for React Native.

Lodash - A modern JavaScript utilities library.

To install these libraries run the following command:

yarn add lodash @react-native-async-storage/async-storage @tanstack/react-query

Don't forget to install pods:

cd ios && pod install

NOTE: Before continuing with this article, I highly recommend getting a basic understanding of how React Query works.

Building a basic app UI

First, let's create a basic UI of the app.
Create a file Home.tsx and paste the following code:

import React, {useEffect, useState} from 'react';
import {
  Button,
  FlatList,
  SafeAreaView,
  StyleSheet,
  Text,
  TextInput,
  TouchableOpacity,
  View,
} from 'react-native';

export default function Home() {
  const [inputText, setInputText] = useState('');
  const onSubmit = () => {
    // add todo
  };

  return (
    <SafeAreaView style={styles.safeArea}>
      <View style={styles.container}>
        <View
          style={{
            flexDirection: 'row',
            alignItems: 'center',
          }}>
          <TextInput
            style={styles.input}
            placeholder="Enter your todo item"
            placeholderTextColor={'#888'}
            value={inputText}
            onChangeText={text => setInputText(text)}
          />
          <TouchableOpacity style={styles.button} onPress={onSubmit}>
            <Text style={styles.buttonText}>Add</Text>
          </TouchableOpacity>
        </View>
        <FlatList
          data={[]}
          renderItem={({item}) => (
            <View style={styles.todoItemCard}>
              <Text style={styles.todoItem}>{item.title}</Text>
            </View>
          )}
          keyExtractor={item => item.title}
        />
      </View>
    </SafeAreaView>
  );
}
const styles = StyleSheet.create({
  safeArea: {
    flex: 1,
    width: '100%',
    backgroundColor: '#000',
  },
  container: {
    flex: 1,
    alignItems: 'center',
    gap: 8,
    padding: 12,
  },
  input: {
    borderWidth: 2,
    borderColor: 'white',
    flex: 1,
    padding: 16,
    borderRadius: 10,
    fontSize: 18,
    color: '#fff',
    marginVertical: 10,
  },
  button: {
    backgroundColor: 'white',
    marginLeft: 10,
    padding: 12,
    borderRadius: 5,
  },
  buttonText: {
    textAlign: 'center',
    fontSize: 20,
    fontWeight: 'bold',
  },
  todoItem: {
    color: '#000',
    fontSize: 20,
  },
  todoItemCard: {
    backgroundColor: 'white',
    width: '100%',
    marginVertical: 8,
    padding: 16,
    borderRadius: 5,
  },
});

This will build a basic UI for our app so let's replace boilerplate react native code inside App.tsx to display our Home screen:

import Home from './src/Home';
export default function App() {
  return <Home />;
}

We also need to initialize and wrap our app with the Provider provided by React Query so we can access it in our app:

import {QueryClient, QueryClientProvider} from '@tanstack/react-query';
import Home from './src/Home';

const queryClient = new QueryClient();

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Home />
    </QueryClientProvider>
  );
}

And now we can start using React Query in our application!

Implement `useOfflineTodosSync` hook

I am going to write a reusable custom hook where all the data fetching and syncing logic for our todos will live. Again, feel free to customize according to your project needs.

Start by creating a hooks folder, and inside create useOfflineTodosSync.ts file.

Listen for network changes

Now, the first thing we will set up is a network listener that will run when a change happens to our internet connection.

For that, we need to install @react-native-community/netinfo package. To do so run:

yarn add @react-native-community/netinfo

Then install pods:

cd ios && pod install

We will then import NetInfo object provided by @react-native-community/netinfo.

Then, we need to attach an event listener that will listen for internet connectivity changes and update our application state accordingly.

In the useOfflineTodosSync.ts file, paste the following code:

import {useEffect, useState} from 'react';
import NetInfo from '@react-native-community/netinfo';

export default function useOfflineTodosSync() {
  const [isOnline, setIsOnline] = useState<boolean | null>(true);
  useEffect(() => {
    const unsubscribe = NetInfo.addEventListener(state => {
      setIsOnline(state.isConnected);
      if (state.isConnected) {
        // sync our todos
      }
    });
    return () => unsubscribe();
  }, []);
  return {};
}

Creating and fetching todos using React Query

We now need a way to fetch our todos from storage and for that we will use AsyncStorage and useQuery hook provided by React Query:

import {useQuery} from '@tanstack/react-query';
import AsyncStorage from '@react-native-async-storage/async-storage';

Inside useOfflineTodosSync hook:

const localId = 'todos';
const {
    data,
    isFetching,
    isError,
  } = useQuery({
    queryKey: [localId],
    queryFn: async () => {
      const result = await AsyncStorage.getItem(localId);
      return result ? JSON.parse(result) : [];
    },
  });

useQuery takes an object parameter containing queryKey which is a unique key for the query and a function which returns a promise that resolves with data or throws an error. In our case, we are just getting our todos from the storage.

To learn how queries work in react-query, read here.

useQuery provides us many useful stuff but for now I have destructured:

data which is a cached data object maintained by React Query and which will contain our todos.
isFetching which contains loading state.
isError which is a boolean indicating whether an error occurred or not.

If you're using TypeScript, define type definition of todo item:

type Todo = {
  title: string;
  isCompleted: boolean;
  synced: boolean; // flag to check if the item is synced or not
};

And now lets define our addTodo function which we'll use to create new todos. Inside our hook function body, paste the following:

const addTodo = async (newTodo: Todo) => {
  const updatedTodos = [...data, newTodo];
  // we'll write storing and syncing logic later
};

Make sure to return data and addTodo function:

export default function useOfflineTodosSync() {
 // your code...

return {
    data,
    isFetching,
    isError,
    addTodo,
  };
}

Now back to our Home.tsx component, lets import this hook:

import useOfflineTodosSync from './hooks/useOfflineTodosSync';

Then, destructure data and our addTodo function:

const {data, addTodo} = useOfflineTodosSync();

Pass the data to the FlatList:

<FlatList
  data={data} // <-- replace [] with data
  renderItem={({item}) => (
    <View style={styles.todoItemCard}>
      <Text style={styles.todoItem}>{item.title}</Text>
     </View>
  )}
  keyExtractor={item => item.title}
/>

Now we can add new todos by calling addTodo inside onSubmit handler:

const onSubmit = () => {
  // check if input is empty
  if(!inputText) return console.log('input is empty');

  // add our todo
  addTodo({
   title: inputText,
   isCompleted: false,
   synced: false, // initially synced value will be false
  });

  // reset state
  setInputText('');
};

Now once we add a todo, we need to reflect the updated list on our UI. Right now, our new todo item won't appear in the list because we are not saving updatedTodos to our React Query's cached data.

To update our UI once we add a new item, we need to directly update the cache data provided by useQuery hook.

To do this, React Query provides us 2 ways: either using refetch() function or setQueryData provided by the queryClient instance we passed to QueryClientProvider.

You can read more about the differences between them in the documentation but the key difference is:

refetch clears the cache and initiates a new query to update the cache with latest data from the server.
setQueryData directly updates the cache.

Since we are building offline-first, we will need to directly update the cache and then sync it in the cloud when our internet is restored. Therefore, we will need to use setQueryData instead of refetch as it relies on internet connection.

We can access queryClient instance using the useQueryClient hook inside our custom hook like so:

import {useQuery, useQueryClient} from '@tanstack/react-query';

const queryClient = useQueryClient();

Sync todos

Now we'll create syncTodos function in which we'll loop over our todos and check which todos are not synced.

Then, it will update those todos in our database when we're connected to the internet by sending a POST request to our server and change the synced flag to true for the todos stored in our local storage otherwise it will keep the sync value false so that when the internet connection is restored, we attempt to sync again.

Inside your hook, paste the following function:

const syncTodos = async (todos: Todo[]) => {
    const unsyncedTodos = todos.filter((todo: Todo) => !todo.synced);
    if (unsyncedTodos.length > 0) {
      try {
        if (isOnline) {
          unsyncedTodos.forEach(async (todo: Todo) => {
            await fetch('http://127.0.0.1:8000/todos/create', {
              method: 'POST',
              body: JSON.stringify(todo),
              headers: {
                'Content-Type': 'application/json',
              },
            });
          });
        }

        const updatedTodos = todos.map((todo: any) =>
          todo.synced ? todo : {...todo, synced: isOnline ? true : false},
        );
        await AsyncStorage.setItem(localId, JSON.stringify(updatedTodos));
        queryClient.setQueryData([localId], updatedTodos);
      } catch (error) {
        console.error('Error syncing todos:', error);
      }
    }
  }

Modify addTodo function to now update the data and then we will call syncTodos function passing it our updated todos list:

const addTodo = async (newTodo: Todo) => {
  const updatedTodos = [...data, newTodo];
  await syncTodos(updatedTodos);
};

And now finally, inside our network listener, we'll add the code to sync our todos when the our connection is restored:

const unsubscribe = NetInfo.addEventListener(state => {
      setIsOnline(state.isConnected);
      if (state.isConnected) {
        AsyncStorage.getItem(localId)
          .then(todos => {
            if (todos) {
              syncTodos(JSON.parse(todos));
            }
          })
          .catch(err => console.log(err));
      }
    });

Now, if you reload the app you'll notice that syncTodos will run a few times. That is because on initial render, NetInfo can run multiple events depending on different states of the network.

To fix this, we can use debouncing method and delay the execution of syncTodos.

Simply import debounce from lodash and pass the syncTodos function code as the first parameter to the debounce function and 500 milliseconds as the second parameter which is the delay after which we call this syncTodos:

import {debounce} from 'lodash';

const syncTodos = debounce(async (todos: Todo[]) => {
    const unsyncedTodos = todos.filter((todo: Todo) => !todo.synced);
    if (unsyncedTodos.length > 0) {
      console.log('unsynced todos found');

      try {
        if (isOnline) {
          unsyncedTodos.forEach(async (todo: Todo) => {
            await fetch('http://127.0.0.1:8000/todos/create', {
              method: 'POST',
              body: JSON.stringify(todo),
              headers: {
                'Content-Type': 'application/json',
              },
            });
          });
        }

        const updatedTodos = todos.map((todo: any) =>
          todo.synced ? todo : {...todo, synced: isOnline ? true : false},
        );
        await AsyncStorage.setItem(localId, JSON.stringify(updatedTodos));
        queryClient.setQueryData([localId], updatedTodos);
      } catch (error) {
        console.error('Error syncing todos:', error);
      }
    }
  }, 500);

And that's it! We now have reusable custom hook we can use anywhere in the app to fetch and create new todos and sync.

Whenever you call addTodo function while connected to the internet or whenever network state changes, sync will occur.

Now for testing purposes, you can clone this Node.js server repo I have created for you to test this app.

After cloning, install dependencies:

yarn

You will also need to replace MongoDB connection string with your own inside the connectDb function.

To set up a Mongo cluster, simply follow this tutorial:

And then, simply run the command to start the server:

yarn dev

You can now test the app!

Conclusion

I hope I was able to show you how you can develop offline-first app. This obviously, is one of the many approaches but I hope you got the concept.

This was my first article on dev.to which hopefully you liked 😊 Let me know in the comments.

DEV Community: M. Saad Ullah

How I set up Design System for my React Native Projects for 10x Faster Development

What is this amazing thing called Design System?

Tools & Libraries

Set up theme

Creating Reusable Components

Custom useTheme hook

Dark Mode

Conclusion

Building Offline-First Apps using React Native, React Query, and AsyncStorage

How syncing works

What we'll build

Initialize a new project

Install required libraries

Building a basic app UI

Implement useOfflineTodosSync hook

Listen for network changes

Creating and fetching todos using React Query

Sync todos

Conclusion

Custom `useTheme` hook

Implement `useOfflineTodosSync` hook