React Native Quick Start Guide

In this quickstart, we will show you how to get started with SQLite Cloud and React Native by building a simple application that connects to and reads from a SQLite Cloud database.

1. Set up a SQLite Cloud account

• If you haven’t already, sign up for a SQLite Cloud account and create a new project.
• In this guide, we will use the sample datasets that come pre-loaded with SQLite Cloud.

2. Create a React Native project

• If you haven’t already, sign up for an Expo account.
• Create a new remote EAS project with the name sqlc-quickstart.
  • Link your remote project to a new local project. Replace {id} below with the project ID provided by Expo.

npm install --global eas-cli
npx create-expo-app sqlc-quickstart
cd sqlc-quickstart
eas init --id {id}

3. Install the SQLite Cloud JS SDK

npm install @sqlitecloud/drivers

4. Query data

• Replace the code in app/(tabs)/index.tsx with the following snippet.
• In your SQLite Cloud account dashboard, click on a Node, copy the Connection String, and replace <your-connection-string> below.

import { Database } from '@sqlitecloud/drivers';
import { useState, useEffect } from 'react';
import { View, Text, FlatList, StyleSheet } from 'react-native';

export default function App() {
  const [albums, setAlbums] = useState([]);

  useEffect(() => {
    async function getAlbums() {
      const db = new Database({
        connectionstring: '<your-connection-string>',
        usewebsocket: true,
      });

      const result =
        await db.sql`USE DATABASE chinook.sqlite; SELECT albums.AlbumId as id, albums.Title as title, artists.name as artist FROM albums INNER JOIN artists WHERE artists.ArtistId = albums.ArtistId LIMIT 20;`;

      setAlbums(result);
    }

    getAlbums();
  }, []);

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Albums</Text>
      <FlatList
        data={albums}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => (
          <Text style={styles.listItem}>
            • {item.title} by {item.artist}
          </Text>
        )}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 15,
  },
  title: {
    fontSize: 34,
    fontWeight: 600,
  },
  listItem: {
    paddingVertical: 3,
  },
});

• On App component mount, useEffect defines and calls a function that connects to and queries your database, updates the component’s state with the most up-to-date albums data, and renders the data in a list.

5. Run your app

npm start

• To see your app:
  • On iOS, use the Camera app to scan the QR code.
  • On Android, download and use the Expo Go app to scan the QR code.
  • On web, visit the localhost link.

And that’s it! You’ve successfully built a React Native app that reads data from a SQLite Cloud database.