Does React Native support Indexed DB?

Question

This question was asked on GitHub, with the answer being "Hey, have you heard of this website Stack Overflow? You should ask the question there!".

So here I am, asking a question!

Does React Native support Indexed DB?

When refactoring an existing web-application to support react-native, does one have to forgo Indexed DB support? Or, does Indexed DB work out of the box?

What is the reason for the answer to the above question? Does Indexed DB not work simply because we're not in a browser and React Native doesn't currently implement that API? Can we polyfill Indexed DB in React Native? Or, should we turn to alternative persistence methods for this platform?

I am asking this as a technical lead, wanting to know whether or not react-native is going to be an easy or difficult transition for our team.

Adulthood

Answer 1

No, as of now React Native doesn't support IndexedDB.

For persistent storage in React Native the options are:

AsyncStorage: The easiest way to store objects, provides Key-value based asynchronous APIs to store data. Only provides basic get-put APIs, not suitable for search queries.

Realm: Fully fledged document oriented mobile database with the capacity for complex queries. Has both Pro and free open source editions. Best option for developing offline applications synchronised with the server.

Polson

Answer 2

I've manage to create an instance for both web and android. I'm open to any suggestions here but this works together with expo-sqlite and dexie. No need to eject

db.ts

import Dexie, { Table } from 'dexie';
import { Platform } from 'react-native';
import * as SQLite from 'expo-sqlite';
import setGlobalVars from 'indexeddbshim/dist/indexeddbshim-noninvasive';

const win = {};

if (Platform.OS !== 'web') {
  setGlobalVars(win, {
    checkOrigin: false,
    win: SQLite,
    deleteDatabaseFiles: false,
    useSQLiteIndexes: true,
  });
}

export interface Friend {
  id?: number;
  name: string;
  age: number;
}

export class IndexDb extends Dexie {
  friends!: Table<Friend>;

  constructor() {
    super('mydb', {
      // The indexedDB and IDBKeyRange are provided by the indexeddbshim
      indexedDB: Platform.OS === 'web' ? window.indexedDB : win.indexedDB,
      IDBKeyRange: Platform.OS === 'web' ? window.IDBKeyRange : win.IDBKeyRange,
    });

    this.version(1).stores({
      friends: '++id, name, age', // Primary key and indexed props
    });
  }
}

export const db = new IndexDb();

package.json

"expo-sqlite": "~13.2.2",
"indexeddbshim": "^13.0.0",
"react-native": "0.73.4",
"expo": "~50.0.8",
"dexie": "^3.2.5",
"dexie-react-hooks": "^1.1.7",

sampleComponent.tsx

export default function App() {
  const friends = useLiveQuery(() => db.friends.toArray());
  const addFriend = () => {
    db.friends.add({ name: 'John', age: 25 });
  };

  return (
    <Box w="$full" h="$full" justifyContent="center">
      <Center>
        <Button onPress={addFriend}>
          <Text>Add a friend</Text>
        </Button>

        {friends?.map((friend) => <Text key={friend.id}>{friend.name}</Text>)}
      </Center>
    </Box>
  );
}

Reata

Have you used this in production? Or have you done any performance testing? – Hazlitt

Answer 3

I don't think react-native currently supports it, but if you want data to persist you can always use AsyncStorage: https://facebook.github.io/react-native/docs/asyncstorage.html

or if you're using redux, you can use redux-persist.

Overissue

seems like this link is broken, Can you please provide updated one? – Membranophone

Answer 4

I'm giving a chance to realm.io.

There is a very very expensive licensing for pro, but it's basically free and open source so you can freely try without limitations if you don't use their platform.

Here specific and official doc for react native: https://realm.io/docs/javascript/latest

Skipjack

Answer 5

Pouchdb is another way to use indexeddb in web and react-native.

Pouchdb work in any browser support indexeddb or webSQL if not support. On the react-native pouchdb have an adaptor to connect to sqlLit.

On any environment your code is same.

Acrogen

pouchdb has an adapter error case as I tried it – Lucey

Unfortunately, pouchdb react-native adapter is not maintained good – Acrogen

Answer 6

If you're using Expo, you also have expo-sqlite but it does get flakey at times and their API is hard to work with. I had to wrap it so I can make it work with async await.

Autarky