Building a TODO app in React Native with Supabase
Tags: react, reactnative, supabase
Published: 2023-07-12 03:47:03

---
title: Building a TODO app in React Native with Supabase
published: true
description: 
tags: react, reactnative, supabase
# cover_image: https://images.unsplash.com/photo-1521931961826-fe48677230a5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=3270&q=80
# Use a ratio of 100:42 for best results.
# published_at: 2023-07-12 03:41 +0000
---

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](https://instamobile.io/mobile-development/best-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:

```bash
npm install -g expo-cli
```

Next, create a new React Native project:

```bash
expo init TodoApp
```

Move into your project directory:

```bash
cd TodoApp
```

## Step 2: Setting Up Supabase

Head over to [Supabase](https://supabase.io/) and create a new project. Once the project is set up, navigate to the `SQL` section and create a new table for your todos:

```sql
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.

```bash
npm install @supabase/supabase-js
```

Then, initialize Supabase in your app:

```javascript
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`:

```jsx
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`:

```jsx
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:

```jsx
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:

```jsx
<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`:

```jsx
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:

```jsx
<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](https://supabase.io/docs/reference/javascript/getting-started) for more information.

Happy coding!