SQLite with expo-sqlite in React Native - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What is the output after inserting and querying a record?

Consider this React Native code using expo-sqlite. What will be the value of result.rows.length after the transaction?

React Native

import * as SQLite from 'expo-sqlite';
const db = SQLite.openDatabase('test.db');

// Create table and insert one record

db.transaction(tx => {
  tx.executeSql('CREATE TABLE IF NOT EXISTS items (id INTEGER PRIMARY KEY NOT NULL, name TEXT);');
  tx.executeSql('INSERT INTO items (name) VALUES (?);', ['apple']);
  tx.executeSql('SELECT * FROM items;', [], (_, result) => {
    console.log(result.rows.length);
  });
});

A Throws an error

B 1

C undefined

D 0

💡 Hint

Remember that the SELECT query runs after the INSERT in the same transaction.

The code creates a table if it doesn't exist, inserts one record, then queries all records. The SELECT callback receives the result with one row, so result.rows.length is 1.

❓ lifecycle

intermediate

When is the best time to open the SQLite database in a React Native app?

In a React Native app using expo-sqlite, when should you open the database connection to ensure it is ready for queries?

A Inside a useEffect hook with an empty dependency array

B Inside the component's render function

C Once, outside any component, at module load time

D Every time a button is pressed

💡 Hint

Opening the database multiple times can cause issues and is unnecessary.

Opening the database once at module load time ensures a single connection reused throughout the app. Opening inside render or on button press causes repeated openings and potential errors.

📝 Syntax

advanced

What error does this code produce?

What error will this code cause when running a transaction with expo-sqlite?

React Native

db.transaction(tx => {
  tx.executeSql('INSERT INTO items (name) VALUES (?);', ['banana'],
    () => console.log('Insert success'),
    () => { console.log('Insert failure'); return false; }
  );
});

A No error, logs 'Insert success' on success

B TypeError because the failure callback returns undefined instead of false

C SyntaxError due to missing parameters

D Runtime error because the failure callback does not return true

💡 Hint

The failure callback must return false to signal error handled.

The failure callback must return false to prevent the transaction from rolling back. Returning undefined causes a TypeError internally in expo-sqlite.

❓ navigation

advanced

How to ensure data is loaded before navigating?

You want to load data from SQLite before navigating to a new screen. Which approach ensures data is ready before navigation?

A Call navigation.navigate inside the executeSql success callback

B Call navigation.navigate immediately after starting the transaction

C Call navigation.navigate inside a setTimeout with 1 second delay

D Call navigation.navigate in a useEffect without dependencies

💡 Hint

SQLite queries are asynchronous; navigation must wait for completion.

The executeSql success callback runs after the query finishes. Navigating inside it ensures data is loaded before moving screens.

🧠 Conceptual

expert

Why use transactions in expo-sqlite?

Which is the main reason to use db.transaction when working with expo-sqlite?

A To encrypt the database contents for security

B To speed up queries by running them in parallel

C To automatically cache query results for offline use

D To execute multiple SQL statements atomically and rollback on failure

💡 Hint

Think about what happens if one statement fails inside a transaction.

Transactions ensure all statements succeed together or none apply, preserving data integrity. They do not speed up queries, cache results, or encrypt data.

Practice

1. What is the main purpose of using expo-sqlite in a React Native app?

easy

A. To store and manage data locally using a small database

B. To fetch data from a remote server

C. To style the app interface

D. To handle user authentication

Solution

1. Step 1: Understand expo-sqlite functionality

   expo-sqlite provides a way to store data locally on the device using a SQLite database.

2. Step 2: Compare options with expo-sqlite purpose

   Only To store and manage data locally using a small database describes local data storage with a database, which matches expo-sqlite's role.

3. Final Answer:

   To store and manage data locally using a small database -> Option A

4. Quick Check:

   expo-sqlite = local database storage [OK]

Hint: expo-sqlite is for local data storage, not remote or styling [OK]

Common Mistakes:

• Confusing expo-sqlite with network data fetching
• Thinking expo-sqlite handles UI styling
• Assuming expo-sqlite manages user login

2. Which of the following is the correct way to open a database using expo-sqlite?

easy

A. const db = SQLite.newDatabase('mydb.db');

B. const db = SQLite.createDatabase('mydb.db');

C. const db = SQLite.connect('mydb.db');

D. const db = SQLite.openDatabase('mydb.db');

Solution

1. Step 1: Recall expo-sqlite database opening method

   The correct method to open or create a database is openDatabase.

2. Step 2: Match method names with options

   Only const db = SQLite.openDatabase('mydb.db'); uses openDatabase, which is the correct syntax.

3. Final Answer:

   const db = SQLite.openDatabase('mydb.db'); -> Option D

4. Quick Check:

   openDatabase() opens SQLite DB [OK]

Hint: Use openDatabase() to open or create SQLite DB [OK]

Common Mistakes:

• Using createDatabase() which does not exist
• Using connect() or newDatabase() which are invalid
• Missing the correct method name openDatabase()

3. Given this code snippet, what will be logged to the console?

const db = SQLite.openDatabase('test.db');
db.transaction(tx => {
  tx.executeSql('CREATE TABLE IF NOT EXISTS items (id INTEGER PRIMARY KEY NOT NULL, name TEXT);');
  tx.executeSql('INSERT INTO items (name) VALUES (?)', ['apple']);
  tx.executeSql('SELECT * FROM items;', [], (_, { rows }) => {
    console.log(rows._array);
  });
});

medium

A. undefined

B. [{ id: 1, name: 'apple' }]

C. []

D. SyntaxError

Solution

1. Step 1: Understand the SQL commands executed

   The code creates a table if missing, inserts one row with name 'apple', then selects all rows.

2. Step 2: Analyze the SELECT query result

   The SELECT returns one row with id 1 and name 'apple', logged as an array of objects.

3. Final Answer:

   [{ id: 1, name: 'apple' }] -> Option B

4. Quick Check:

   Inserted row appears in SELECT result [OK]

Hint: Inserted rows appear in SELECT query result array [OK]

Common Mistakes:

• Expecting empty array before insertion
• Confusing rows._array with undefined
• Assuming syntax error from correct SQL

4. What is wrong with this code snippet that tries to insert data into a SQLite table?

db.transaction(tx => {
  tx.executeSql('INSERT INTO users (name, age) VALUES (?, ?)', ['John']);
});

medium

A. The SQL statement has fewer values than placeholders

B. The table name is incorrect

C. The transaction method is missing a callback

D. The executeSql method cannot use placeholders

Solution

1. Step 1: Check SQL placeholders and values

   The SQL has two placeholders (?, ?) but only one value 'John' is provided.

2. Step 2: Identify mismatch causing error

   Mismatch between placeholders and values causes an error during execution.

3. Final Answer:

   The SQL statement has fewer values than placeholders -> Option A

4. Quick Check:

   Placeholders must match values count [OK]

Hint: Match number of ? placeholders with values array length [OK]

Common Mistakes:

• Ignoring mismatch between placeholders and values
• Assuming table name is wrong without checking
• Thinking executeSql cannot use placeholders

5. You want to display a list of items stored in a SQLite table inside your React Native app. Which approach correctly updates the UI after fetching data from the database?

const [items, setItems] = useState([]);

useEffect(() => {
  db.transaction(tx => {
    tx.executeSql('SELECT * FROM items;', [], (_, { rows }) => {
      // What should go here?
    });
  });
}, []);

hard

A. items = rows._array;

B. return rows._array;

C. setItems(rows._array);

D. console.log(rows._array);

Solution

1. Step 1: Understand React state update

   To update UI, React state setter setItems must be called with new data.

2. Step 2: Identify correct way to update state

   Assigning directly to items or returning data won't update state; logging only shows data.

3. Final Answer:

   setItems(rows._array); -> Option C

4. Quick Check:

   Use setItems() to update state and UI [OK]

Hint: Use setState function to update React state after DB fetch [OK]

Common Mistakes:

• Assigning directly to state variable instead of using setter
• Returning data inside executeSql callback
• Only logging data without updating state