expo-sqlite-explorer

A SQLite database browser and explorer component for React Native and Expo applications. Provides a complete UI for browsing tables, viewing data, executing queries, and analyzing schema.

Features

• Table Browser - Browse all tables with row counts
• Data Grid - Paginated data view with sorting and filtering
• Row Details - Modal view for full row inspection
• SQL Query - Execute custom SELECT queries
• Schema View - View columns, indexes, and foreign keys
• DDL View - View CREATE TABLE statements
• Column Statistics - Min/max values, null percentages, distinct counts
• Export - Export data to CSV or JSON
• Theming - Built-in light/dark themes with custom theme support
• Clipboard - Copy cells, rows as JSON

Installation

npm install expo-sqlite-explorer
# or
yarn add expo-sqlite-explorer

Peer Dependencies

This package requires the following peer dependencies:

{
  "react": ">=18.0.0",
  "react-native": ">=0.72.0",
  "react-native-svg": ">=15.12.1",
  "expo-sqlite": ">=14.0.0",
  "expo-clipboard": ">=6.0.0",
  "mobx": ">=6.0.0",
  "mobx-react-lite": ">=4.0.0"
}

Usage

Basic Usage

import * as SQLite from "expo-sqlite";
import { SqliteExplorer, ExpoSqliteAdapter } from "expo-sqlite-explorer";

// Open your database
const db = await SQLite.openDatabaseAsync("myapp.db");

// Create adapter
const adapter = new ExpoSqliteAdapter({ database: db });

// Render explorer
<SqliteExplorer adapter={adapter} />;

With Dark Theme

import {
  SqliteExplorer,
  ExpoSqliteAdapter,
  darkTheme,
} from "expo-sqlite-explorer";

<SqliteExplorer adapter={adapter} theme={darkTheme} />;

Development-Only Mode

<SqliteExplorer
  adapter={adapter}
  devOnly={true} // Only renders when __DEV__ is true
/>

Custom Page Size

<SqliteExplorer
  adapter={adapter}
  pageSize={100} // Default is 50
/>

Custom Database Adapters

You can create custom adapters by implementing the IDatabaseAdapter interface:

import type { IDatabaseAdapter } from "expo-sqlite-explorer";

class MyCustomAdapter implements IDatabaseAdapter {
  isReady(): boolean {
    /* ... */
  }
  getTables(): Promise<TableInfo[]> {
    /* ... */
  }
  getColumns(tableName: string): Promise<ColumnInfo[]> {
    /* ... */
  }
  getIndexes(tableName: string): Promise<IndexInfo[]> {
    /* ... */
  }
  getForeignKeys(tableName: string): Promise<ForeignKeyInfo[]> {
    /* ... */
  }
  getTableDDL(tableName: string): Promise<string> {
    /* ... */
  }
  getColumnStatistics(tableName: string): Promise<ColumnStatistics[]> {
    /* ... */
  }
  query<T>(sql: string, params?: SqlParameter[]): Promise<QueryResult<T>> {
    /* ... */
  }
  getRowCount(
    tableName: string,
    filterColumn?: string,
    filterValue?: string
  ): Promise<number> {
    /* ... */
  }
  getRows<T>(tableName: string, options: PaginationOptions): Promise<T[]> {
    /* ... */
  }
}

Custom Theming

Create a custom theme by providing a SqliteExplorerTheme object:

import type { SqliteExplorerTheme } from "expo-sqlite-explorer";

const customTheme: SqliteExplorerTheme = {
  mode: "dark",
  colors: {
    background: "#1a1a2e",
    foreground: "#eaeaea",
    card: "#16213e",
    border: "#0f3460",
    primary: "#e94560",
    primaryForeground: "#ffffff",
    muted: "#1f4068",
    mutedForeground: "#a0a0a0",
    success: "#00d09c",
    successForeground: "#ffffff",
    warning: "#ffc107",
    warningForeground: "#000000",
    destructive: "#ff6b6b",
    destructiveForeground: "#ffffff",
  },
};

<SqliteExplorer adapter={adapter} theme={customTheme} />;

API Reference

SqliteExplorer Props

Prop	Type	Default	Description
adapter	IDatabaseAdapter	required	Database adapter instance
theme	SqliteExplorerTheme	lightTheme	Theme configuration
pageSize	number	50	Rows per page
devOnly	boolean	false	Only render in development

Exports

// Main component
import { SqliteExplorer } from "expo-sqlite-explorer";

// Adapter
import { ExpoSqliteAdapter } from "expo-sqlite-explorer";

// Themes
import { lightTheme, darkTheme } from "expo-sqlite-explorer";

// Types
import type {
  IDatabaseAdapter,
  SqliteExplorerTheme,
  TableInfo,
  ColumnInfo,
  ColumnStatistics,
} from "expo-sqlite-explorer";

Development

To build the project locally:

# Install dependencies
npm install

# Compile TypeScript to dist/
npm run build

# Run TypeScript type check
npm run compile

License

MIT © Reza Ebrahimi