React Native + Expo Go Week 10

Week 13 of documenting my app development learning journey (Sept 7 - Sept 13)

Author

Brandon Kim
September 14, 2025

A Look Outside My Network:

App Store submissions are now open for iOS 26, iPadOS 26, macOS Tahoe 26, tvOS 26, visionOS 26, and watchOS 26! Well, I’m still a long ways from finishing my first app after finishing the tutorial I was following, but this will be good to know.

This Week’s Goal:

Get as far in the tutorial as you can.

What I Did Last Week:

I played around with AppWrite’s database settings, and ended up (kinda) setting up the “Add Habit” functionality in my app.

Hello everyone, sorry I wasn’t able to write the past few weeks; with my junior year in high school starting, things have been getting really busy around my life. I’ll find a way to post more often :)

September 13th, 2025

Ok! Onto learning and the tutorial. Today, I found out that I left off from adding the functionality that adds a habit; I found this out by seeing that I already had some habits listed in the Appwrite database from the last time I used/tested my app:

So after that, I followed the tutorial to adding the next functionality: actually displaying added habits. To do this, Pedro (the creator of the tutorial) explained that after using the await keyword to receive data from the database, you need the listDatabases() function (specifically member function of the Databases class from react-native-appwrite) to get specific data from Documents (JSON objects) that are in the database. This function’s parameters neatly correspond to the organization of an Appwrite database too!

const fetchHabits = async () => { try { const response = await databases.listDocuments( // Corresponds to Database (like a town) DATABASE_ID, // Corresponds to a Collection (like a neighborhood) HABITS_COLLECTION_ID, // Corresponds to a Document (like an individual house) [Query.equal("userid", user?.$id ?? "")] ) } catch (error) { ... }

You may have noticed that the last parameter [Query.equal("userid", user?.$id ?? "")] looks weird, right? Well, it’s called a Query, and it’s not an individual ID of a Document or anything, but actually is a “condition” that “auto-selects” all of the Documents in the specified Collection (i.e. HABITS_COLLECTION_ID).

It’s an Appwrite thing: Queries

Here’s how a Query’s notation works:

In the Appwrite listDocuments() function, queries are passed as an array of query objects created using the Query class from the Appwrite SDK. Each Query object represents a single condition or operation to filter, sort, or manipulate the list of documents retrieved from a collection.

  • Queries are combined with a logical AND by default. For example, two queries in the array mean both conditions must be met.

  • Basic query methods include:

    • Query.equal('attribute', condition) — matches documents where the field equals the given value.

    • Query.notEqual('attribute', condition)

    • Query.greaterThan('attribute', condition)

    • Query.lessThan('attribute', condition)

    • Query.orderAsc('attribute') and Query.orderDesc('attribute') — for sorting.

    • Query.contains('attribute', conditionArray) — checks if field contains any of the values (for arrays).

  • For logical OR queries, a nested Query.or([...queries]) can be used to match documents that satisfy any of the queries inside the OR list.

A diagram of the Query that I used in my code

  • user is an object that may or may not exist.

  • ?. safely accesses $id if user exists.

  • ?? "" provides a fallback (empty string) if no ID is found.

Later, I was instructed to create a setHabits state that used a custom Habit TypeScript type, where I had to define said type in another file called database.type.ts.

export interface Habit extends Models.Document { user_id: string; title: string; description: string; frequency: string; streak_count: string; last_completed: string; created_at: string; }

It’s an React thing: interfaces

Similar to how templates work in C++, an interface is a layout that defines the shape of an object or data structure.

Cool! I didn’t know about this before: VS Code and automatically detect where an unimported module is needed in a file.

Resources: