Skip to main content

Expo (React only)

This backend uses better-absurd-sql for web and Expo SQLite for native.

Installation​

Install expo packages:

expo install expo-sqlite

Install Kikko packages:

yarn add @kikko-land/react @kikko-land/sql.js @kikko-land/absurd-web-backend @kikko-land/native-expo-backend

Create webpack.config.js:

const createExpoWebpackConfigAsync = require("@expo/webpack-config");
const path = require("path");

module.exports = async function (env, argv) {
  const config = await createExpoWebpackConfigAsync(env, argv);

  config.module.rules.forEach((rule) => {
    (rule.oneOf || []).forEach((oneOf) => {
      if (oneOf.loader && oneOf.loader.indexOf("file-loader") >= 0) {
        oneOf.exclude.push(/\.wasm$/);
      }
    });
  });

  config.module.rules.push({
    test: /\.wasm$/,
    loader: "file-loader",
    type: "javascript/auto",
  });

  config.devServer = {
    ...config.devServer,
    headers: {
      ...config.devServer.headers,
      "Cross-Origin-Opener-Policy": "same-origin",
      "Cross-Origin-Embedder-Policy": "require-corp",
    },
  };

  return config;
};

Create metro.config.js:

const { getDefaultConfig } = require("expo/metro-config");

const defaultConfig = getDefaultConfig(__dirname);

defaultConfig.resolver.assetExts.push("db");
defaultConfig.resolver.assetExts.push("wasm");

module.exports = defaultConfig;

Modify App.tsx:

export default function App() {
  const isLoadingComplete = useCachedResources();
  const colorScheme = useColorScheme();

  return (() => {
    if (!isLoadingComplete) {
      return null;
    } else {
      return (
        <SafeAreaProvider>
          <DbProvider config={config}>
            <EnsureDbLoaded fallback={<Text>Loading db...</Text>}>
              <Navigation colorScheme={colorScheme} />
            </EnsureDbLoaded>
          </DbProvider>
        </SafeAreaProvider>
      );
    }
  })();
}

Configure Kikko:

const config: IInitDbClientConfig = {
  dbName: "kikko-db",
  dbBackend:
    Platform.OS === "web"
      ? require("@kikko-land/absurd-web-backend").absurdWebBackend({
          wasmUrl: require("@kikko-land/sql.js/dist/sql-wasm.wasm").default,
        })
      : require("@kikko-land/native-expo-backend").nativeExpoBackend(),
  plugins: [
    migrationsPlugin({ migrations: [] }),
    reactiveQueriesPlugin({ webMultiTabSupport: Platform.OS === "web" }),
  ],
};

Expo app example: https://github.com/kikko-land/kikko-expo-example