Expo SQLite Hooks
Package that extends the expo-sqlite functionalities to use modern react hooks with functional components
Example
Initialize the Database
import React, { useEffect, useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Database from 'expo-sqlite-hooks/database';
import { DBProvider } from 'expo-sqlite-hooks/context/database';
import Pets from './src/components/pets';
const table = `
create table if not exists pets(
name varchar(50) not null unique,
type varchar(50) not null
);
`
export default function App() {
const [db, setDB] = useState(null);
useEffect(() => {
// Initialize the database
const db = new Database("myPets", "1.0");
db.createTables([table])
.then(response => {
setDB(db);
})
.catch(err => {
//Do something...
})
}, [])
return (
<View style={styles.container}>
{
// Show a custom loading component
db === null ?
<Text>Loading DB</Text>
:
<DBProvider db={db}>
<Pets/>
</DBProvider>
}
</View>
);
}
Database Hooks
import React, {useState, useEffect } from 'react';
import { StyleSheet, Text, View, TextInput, Button } from 'react-native';
import { useQuery, useInsert, useUpdate, useDelete } from 'expo-sqlite-hooks/hooks/database';
export default function Pets()
{
const [name, setName] = useState('');
const [type, setType] = useState('');
const [pets, setPets] = useState([])
const {loading, error, data, refresh} = useQuery("select * from pets", []);
const insertPet = useInsert("pets");
const updatePet = useUpdate("pets");
const deletePet = useDelete("pets");
useEffect(() => {
//Get all pets in the query
if(data)
{
const myPets = [];
for(let i = 0; i < data.rows.length; i++)
{
myPets.push(data.rows.item(i));
}
setPets(myPets);
}
}, [data]);
// Add hook
const handleAdd = () => {
insertPet(["name", "type"], [name, type])
.then(response => {
alert("Pet Added");
refresh();
})
.catch(err => {
alert("Pet can't be added");
console.error(err);
})
}
// Update hook
const handleUpdate = () => {
updatePet({column: "type", value: type}, {field: "name", conditional: "=", value: name})
.then(response => {
alert("Pet updated");
refresh();
})
.catch(err =>{
alert("Pet can't be updated");
console.error(err);
})
}
// Delete Hook
const handleDelete = () => {
deletePet({field: "name", conditional: "=", value: name})
.then(response => {
alert("Pet deleted");
refresh();
})
.catch(err =>{
alert("Pet can't be deleted");
console.error(err);
})
}
return (
<View>
<TextInput placeholder="Pet Name" onChangeText={(text) => setName(text)}/>
<TextInput placeholder="Pet Type" onChangeText={(text) => setType(text)}/>
<Button title="Add" onPress={handleAdd}/>
<Button title="Update" onPress={handleUpdate}/>
<Button title="Remove" onPress={handleDelete}/>
{
pets.map(pet => {
return <Text key={pet.name}>Pet Name: {pet.name} Pet type: {pet.type}</Text>
})
}
</View>
)
}
API
Database
import Database from 'expo-sqlite-hooks/database';
Methods
constructor
Parameter | Type | Description |
---|
name | string | The name of the database |
version | string | The version of the database |
return: void
createTables
Parameter | Type | Description |
---|
queries | string[] | The SQLite queries to create the tables |
executeQuery
Parameter | Type | Description |
---|
query | string | The SQLite query |
values | any[] | values to use as variables to replace '?' chars in the query |
Provider
import { DBProvider } from 'expo-sqlite-hooks/context/database';
Parameters
Parameter | Type | Description |
---|
db | Database | The database |
useQuery
Parameters
Parameter | Type | Description |
---|
query | string | The SQLite query |
variables | any[] | values to use as variables to replace '?' chars in the query |
return:
{
loading: boolean
error: SQLError class (expo-sqlite)
data: SQLResultSet (expo-sqlite)
refresh: () => void //Reload the query
}
useInsert
Parameters
Parameter | Type | Description |
---|
name | string | table name |
return: (fields: string[], variables: any[]) => Promise<SQLResultSet>
Parameter | Type | Description |
---|
fields | string[] | Fields name |
variables | any[] | fields values |
useUpdate
Parameters
Parameter | Type | Description |
---|
name | string | table name |
return: (newVal : ISQLiteUpdate, where: ISQLiteWhere) => Promise<SQLResultSet>
Parameter | Type | Description |
---|
newVal | {column: string, value: any} | New Field |
where | {field: string, conditional: string, value: any} | Where clausule |
useDelete
Parameters
Parameter | Type | Description |
---|
name | string | table name |
return: ( where: ISQLiteWhere) => Promise<SQLResultSet>
Parameter | Type | Description |
---|
where | {field: string, conditional: string, value: any} | Where clausule |