Meet Waddler
Get started

Get Started with Waddler and OP-SQLite

This guide assumes familiarity with:
  • OP-SQLite - SQLite library for react-native - 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 required packages

npm
yarn
pnpm
bun 
npm i waddler @op-engineering/op-sqlite

Step 3 - Connect Waddler to the database

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

import { open } from '@op-engineering/op-sqlite';
import { waddler } from 'waddler/op-sqlite';

const client = open({
  name: 'inMemoryDb',
  location: ':memory:',
});
const sql = waddler({ client });

Step 4 - 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 5 - Setup babel config

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

Step 6 - Query your db:

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

import { Text, View } from 'react-native';
import { open } from '@op-engineering/op-sqlite';
import { useEffect, useState } from 'react';
import { waddler } from 'waddler/op-sqlite';

const client = open({
  name: 'inMemoryDb',
  location: ':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 7 - 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