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!
Top comments (0)