Meet Waddler
Get started

Get Started with Waddler and Expo

This guide assumes familiarity with:
  • Expo SQLite - A library that provides access to a database that can be queried through a SQLite API - read here

Step 1 - Setup a project from Expo Template

npm
yarn
pnpm
bun 
npx create-expo-app --template blank-typescript

You can read more about this template here.

Basic file structure

📦 <project root>
 ├ 📂 assets
 ├ 📜 .gitignore
 ├ 📜 .npmrc
 ├ 📜 app.json
 ├ 📜 App.tsx
 ├ 📜 babel.config.ts
 ├ 📜 index.ts
 ├ 📜 package.json
 └ 📜 tsconfig.json

Step 2 - Install expo-sqlite package

npm
yarn
pnpm
bun 
npx expo install expo-sqlite

Step 3 - Install required packages

npm
yarn
pnpm
bun 
npm i waddler

Step 4 - Connect Waddler to the database

Create a App.tsx file in the root directory and initialize the connection:

import * as SQLite from 'expo-sqlite';
import { waddler } from 'waddler/expo-sqlite';

const client = SQLite.openDatabaseSync('inMemoryDb', {}, ':memory:');
const sql = waddler({ client });

Step 5 - Create a table

(async () => {
  await sql.unsafe(`create table if not exists users (
    id    integer primary key autoincrement,
    name  text    not null,
    age   integer not null,
    email text    not null unique
    );
  `).run();
})()

Step 6 - Setup babel config

Create a file babel.config.js in root folder and add this code inside:

babel.config.js
module.exports = function(api) {
	api.cache(true);
	return {
		presets: ['babel-preset-expo'],
		plugins: [
			'@babel/plugin-transform-class-static-block',
		],
	};
};

Step 7 - Query your db:

Let’s update App.tsx file with queries to create, insert and read users.

import { Text, View } from 'react-native';
import { useEffect, useState } from 'react';
import * as SQLite from 'expo-sqlite';
import { waddler } from 'waddler/expo-sqlite';

const client = SQLite.openDatabaseSync('inMemoryDb', {}, ':memory:');
const sql = waddler({ client });

export default function App() {
  const [items, setItems] = useState<{[columnName: string]: any}[] | null>(null);

  useEffect(() => {

    (async () => {
      	await sql.unsafe(`create table if not exists users (
	    	id    integer primary key autoincrement,
	    	name  text    not null,
	    	age   integer not null,
	    	email text    not null unique
	    	);
	  	`).run();

	    const user = [
	    	'John',
	    	30,
	    	'[email protected]',
	  	];

	  	await sql`
	    	insert into ${sql.identifier('users')}(${sql.identifier(['name', 'age', 'email'])}) 
	      	values ${sql.values([user])};
	  	`.run();
	  	console.log('New user created!')

	  	const users = await sql`select * from ${sql.identifier('users')};`.all();
	  	console.log('Getting all users from the database:', users)
	  	/*
	  	const users: {
	  	  id: number;
	  	  name: string;
	  	  age: number;
	  	  email: string;
	  	}[]
	  	*/

      	setItems(users);
    })();
  });

  if (items === null || items.length === 0) {
    return (
      <View>
        <Text>Empty</Text>
      </View>
    );
  }

  return (
    <View
      style={{
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        width: '100%',
        height: '100%',
        justifyContent: 'center',
      }}
    >
      {items.map((item) => (
        <Text key={item.id}>{item.email}</Text>
      ))}
    </View>
  );
}

Step 8 - Prebuild and run expo app

tips

To run your app on the iOS Simulator, launch Xcode, install the iOS component in Settings, and then execute the command below.

npm
yarn
pnpm
bun
npx expo run:ios