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.
- 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.
- 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.
- Link your remote project to a new local project. Replace
npm install --global eas-cli
npx create-expo-app sqlc-quickstart
cd sqlc-quickstart
eas init --id {id}
- Install the SQLite Cloud JS SDK
npm install @sqlitecloud/drivers
- 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-datealbums
data, and renders the data in a list.
- 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.