React Native + Expo Go Week 8

School’s back in session for me, so I’ll be posting less. Still trying to learn throughout the school year though!

August 4th, 2025

Today, I followed the tutorial in creating a “sign out” functionality, where I deleted the session of AppWrite’s account object using the .deleteSession member function (it was previously started in the signIn function using the .createEmailPasswordSession member function):

const signOut = async () => {
        try {
            await account.deleteSession("current");
            setUser(null);
        } catch(error) {
            console.log(error)
        }
    };

Also, I added a button to the index.tsx file inside the (tabs) folder to implement this sgnOut functionality:

import { useAuth } from '../../lib/auth-context';

...
export default function Index() {
  const { signOut } = useAuth();
      ...
      <Button mode="text" onPress={signOut} icon={"logout"}>
        {" "}  // These are here to provide "padding" space for "Sign Out" button
        Sign Out {" "}
      </Button>

August 5th, 2025

As I continued to follow the tutorial in creating additional pages like streaks.tsx and add_habit.tsx, and try as I might to keep up with the tutorial, I still got tripped up with this error:

It never works out.

I initially thought it was because I misnamed one of the pages: add-habit, but no; that wasn’t the cause.

Once I reached out to ChatGPT for help, I argued with it back and forth about what the issue was, and later I ended up replacing the app/_layout.tsx with this simplistic code:

export default function RootLayout() {
  return (
    <AuthProvider>
      <PaperProvider>
        <SafeAreaProvider>
          <RouteGuard>
            <Stack>
              {/* 1) Register your auth screen */}
              <Stack.Screen
                name="auth"
                options={{ headerShown: false }}
              />
              {/* 2) Then your tabs */}
              <Stack.Screen
                name="(tabs)"
                options={{ headerShown: false }}
              />
            </Stack>
          </RouteGuard>
        </SafeAreaProvider>
      </PaperProvider>
    </AuthProvider>
  );
}

This was supposed to check if <RouteGuard>, the function component, worked.

It didn’t, and yet Expo Go threw the same error?!

Out of desperation, I tried to replace the auth-contect.tsx file also with PedroTech’s finished version…and it still didn’t work.

Great, and not ChatGPT is asking me to use a “test” page, hello.tsx to test my app:

import { Text, View } from 'react-native';
export default function Hello() {
  return (
    <View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
      <Text>Hello!</Text>
    </View>
  );
}

Guess what? my Expo Go still didn’t manage to show it.

You know what? This day had me running through that same error so much times. I quit for today; this is absurd.

I made 0 progress today, I feel disgusting.

August 6th, 2025

Another day, another chance…hopefully.

OH MY GOD I FIGURED IT OUT!!!

The error? It had nothing to do with configuration files or omission of components or anything: the reason I kept getting errors was because my file structure was wrong (and it was pretty hidden).

But, I wasn’t exactly “out of the woods” yet: I ran into another error, this time, I thought it had to do with the AppWrite database:

Next, when I went to ChatGPT to get some advice, it recommended that I go back to the AppWrite database dashboard to check which platform I chose. Even though I believed that the database should’ve still worked for both Android and iOS platforms, I switched the Bundle ID (what’s it called for iOS platforms anyways)…

…and it worked, what?! I’ve been pessimistic because of yesterday, this is a nice feeling :)

I suppose I’ll have to keep on changing the Bundle ID (for iOS) or Package Name (for Android) when I’m testing between environments.

After creating the Databases and Collections, I copy and pasted their IDs into my .env.local file for my app.

Now, I moved on to creating the database that will record the “habits” for the app. To do this, I went back to the AppWrite dashboard and into the “Databases” tab, and clicked “Create Database”. Then from within that database (which the tutorial named “habits-db”), I clicked on “Create Collection”, which conveniently allows me to customize the “collection’s” variables such as privatives like strings, integers, or even dates and other useful variables. Think of it like an object! A collection is basically an object (i.e., custom variable).

August 7th, 2025

Today I did a lot of work on my add-habit.tsx page, so I’ll do my best to include everything that I did today.

First, I created a <SegmentedButtons> component that contained all the buttons within one “long” button that represented different “frequency options” for a task, such as “daily” and “weekly”. Because of all of the input that the app was going to receive when a task is going to be made, I had to use primarily two functions that updated their values: onValueChange for button inputs and onChangeText for text inputs.

return (
    <View style={styles.container}>
      <TextInput
        label="Title" 
        mode="outlined" 
        onChangeText={setTitle} 
        style={styles.input} 
      />
      <TextInput 
        label="Description" 
        mode="outlined" 
        onChangeText={setDescription} 
        style={styles.input} 
      />
      <View style={styles.frequencyContainer}>
        <SegmentedButtons
          value={frequency}
          onValueChange={(value) => setFrequency(value as Frequency)}
            buttons={FREQUENCIES.map((freq) => ({
              value: freq,
              label: freq.charAt(0).toUpperCase() + freq.slice(1)
            }))}
            style={styles.segmentedButtons}
        />
      </View>
    ...

This also meant creating another function to handle submitting.

try {
      await databases.createDocument(
        DATABASE_ID, 
        HABITS_COLLECTION_ID, 
        ID.unique(),
        {
          user_id: user.$id,
          title,
          description,
          frequency,
          streak_count: 0,
          last_completed: new Date().toISOString(),
          created_at: new Date().toISOString
        }
      );
    } catch (error) {
    ...

createDocument as it’s named, creates a document. But more specifically, a document is the unit for a variable within a collection (as seen on my previous AppWrite screenshots). And if you look carefully, you can see that all the variables in the curly braces reference the attributes of the habits collection.

Resources:

Special Thanks:

To my mom who celebrated my breakthrough with me on Wednesday! (I hugged her)

1  I want to note that even though I’m posting about app development right now, I’m planning to add AI or ML into it later when making practice questions or whatnot (maybe I can use TensorFlow Lite for integrating AI? idk yet)