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 and peer dependencies

npm install @sqlitecloud/drivers react-native-tcp-socket react-native-fast-base64

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() {
      let db = null;
      try {
        db = new Database('<connection-string>');

        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);
      } catch (error) {
      // manage error state
      console.error(`getAlbums - ${error}`, error)
      } finally {
        db?.close();
      }
    }

    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

Expo run iOS

npx expo prebuild && npx expo run:ios

Expo run Android

npx expo prebuild && npx expo run:android

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