Let's build a Todo mobile app using React Native and Supabase. This tutorial assumes you have a basic understanding of JavaScript, React Native, and SQL.

Building a Todo Application with React Native and Supabase

In this tutorial, we will learn how to build a simple Todo application using React Native for the frontend and Supabase for the backend.

Interested in building more complex apps? Check out these amazing mobile app templates.

Prerequisites

Before you begin this guide you'll need the following:

• Basic understanding of JavaScript and React Native.
• Node.js and npm/yarn installed on your system.
• Expo CLI for building React Native apps.
• A code editor (like Visual Studio Code).
• A Supabase account.

Step 1: Setup your Development Environment

Let's begin by setting up our development environment. We need to install Expo CLI if it's not already installed:

npm install -g expo-cli

Next, create a new React Native project:

expo init TodoApp

Move into your project directory:

cd TodoApp

Step 2: Setting Up Supabase

Head over to Supabase and create a new project. Once the project is set up, navigate to the SQL section and create a new table for your todos:

CREATE TABLE todos (
  id SERIAL PRIMARY KEY,
  task VARCHAR(255),
  done BOOLEAN
);

Make sure to replace YOUR_PROJECT_URL and YOUR_PROJECT_KEY with your actual Supabase project URL and the anon public key. You can find these in the settings of your Supabase project.

npm install @supabase/supabase-js

Then, initialize Supabase in your app:

import { createClient } from '@supabase/supabase-js'

const supabaseUrl = 'YOUR_PROJECT_URL'
const supabaseAnonKey = 'YOUR_PROJECT_KEY'

export const supabase = createClient(supabaseUrl, supabaseAnonKey)

Step 3: Building The Todo Application

Let's create a simple UI for our Todo application. We'll need a text input for adding new tasks, a button for submitting tasks, and a flat list for displaying the tasks.

In your App.js:

import React, { useState } from 'react';
import { View, Text, TextInput, Button, FlatList } from 'react-native';

export default function App() {
  const [task, setTask] = useState("");

  const handleAddTask = () => {
    // Add task to supabase
  }

  return (
    <View>
      <TextInput
        value={task}
        placeholder="Add a task"
        onChangeText={setTask}
      />
      <Button title="Add Task" onPress={handleAddTask} />
    </View>
  );
}

Step 4: Adding Tasks

To add a task, we need to create a function that makes a request to our Supabase client. This function should be asynchronous, as it needs to wait for the request to complete.

Update handleAddTask in your App.js:

const handleAddTask = async () => {
  if (task.length > 0) {
    await supabase
      .from('todos')
      .insert([{ task, done: false }])
      .single();

    setTask("");
  }
};

Step 5: Displaying Tasks

To display tasks, we need to fetch them from our Supabase client and store them in state.

Add a useEffect hook to fetch tasks from your Supabase client when the component mounts:

import React, { useState, useEffect } from 'react';

export default function App() {
  const [todos, setTodos] = useState([]);

  useEffect(() => {
    fetchTodos();
  }, []);

  const fetchTodos = async () => {
    const { data } = await supabase.from('todos').select('*');
    setTodos(data);
  }

  // Rest of your component
}

Then, use a FlatList to display the tasks:

<FlatList
  data={todos}
  renderItem={({ item }) => <Text>{item.task}</Text>}
  keyExtractor={(item) => item.id.toString()}
/>

Step 6: Marking Tasks as Done

To mark a task as done, we need to make a PUT request to our Supabase client.

Add a handleDone function to your App.js:

const handleDone = async (id) => {
  const { data, error } = await supabase
    .from('todos')
    .update({ done: true })
    .eq('id', id);

  // Handle response
};

Add a "Done" button to each todo item:

<FlatList
  data={todos}
  renderItem={({ item }) => (
    <View>
      <Text>{item.task}</Text>
      <Button title="Done" onPress={() => handleDone(item.id)} />
    </View>
  )}
  keyExtractor={(item) => item.id.toString()}
/>

And there you have it! You now have a simple Todo application using React Native and Supabase. You can add additional features like user authentication, delete tasks or update tasks. You can check the Supabase documentation for more information.

Happy coding!