SWR + React Native 🐮

Add React Native + React Navigation compatibility to swr. 👨🏻‍🔧

- import useSWR from 'swr'
+ import useSWRNative from '@nandorojo/swr-react-native'

That's it.

SWR revalidation now works in your React Native app. Requests also revalidate when your React Navigation screens focus.

Why?

swr is an awesome data fetching + caching library by Vercel.

However, some of its essential features, such as revalidateOnFocus & revalidateOnConnect, don't work on React Native.

This library provides a simple drop-in replacement for useSWR, which adds compatibility for React Native / React Navigation.

It comes with 2 hooks: useSWRNative, and useSWRNativeRevalidate.

Features

• Adds support for revalidateOnConnect & revalidateOnFocus.
• Configurable focusEventThrottle
• Web, iOS and Android support
• Zero config
• Revalidates when AppState becomes active
• Works with React Navigation, revalidating on screen focus
• TypeScript support
• useSWRInfinite support

Installation

yarn add @nandorojo/swr-react-native

Next, install peer dependencies:

# if you're using expo
expo install @react-native-community/netinfo

# if you aren't using expo
yarn add @react-native-community/netinfo

Usage with SWR v1

Currently, SWR v1 is in beta:

yarn add swr@beta

To use swr-react-native, you can install with @beta too:

yarn add @nandorojo/swr-react-native@beta

Usage

There are 2 ways to use this library:

1. Simplest usage

Replace imports of useSWR with useSWRNative. That's it!

import useSWRNative from '@nandorojo/swr-react-native'

const { data, mutate, error } = useSWRNative(key, fetcher, config)

2. Custom usage

If, for some reason, you don't want to replace your imports, you can use the useSWRNativeRevalidate hook. This allows you to de-couple the revalidation from the useSWR hook itself.

This option exists in case useSWR makes some big changes to their API or something down the line. Or, maybe you're using React Native web, and not all screens are nested in a React Navigation stack, so you want to call this only in those places.

If you're using useSWRInfinite, then this is the method for you.

import { useSWRNativeRevalidate } from '@nandorojo/swr-react-native'

Call useSWRNativeRevalidate, likely below your useSWR function:

const { data, mutate } = useSWR(key, fetcher)

useSWRNativeRevalidate({
  // required: pass your mutate function returned by SWR
  mutate

  // optional, defaults copied from SWR
  revalidateOnFocus: true,
  revalidateOnReconnect: true,
  focusThrottleInterval: 5000,
})

The mutate function is required!

If you're using useSWRInfinite, this you should rely on this usage:

const { data, mutate } = useSWRInfinite(...)

useSWRNativeRevalidate({
  // required: pass your mutate function returned by SWR
  mutate
})

Context

I'm a big fan of SWR. I've also built a fetching library for Firebase/Firestore based on swr, which you can find here.

The idea for this library originated from this issue. Thanks to @te-online for help testing it.