React Native has become a popular framework for building cross-platform mobile applications. Its ability to create native-like apps using JavaScript makes it a favorite among developers. In this article, we will explore how to build a simple yet functional To-do List app with Firebase integration, demonstrating real-world application development.

Understanding the Project Setup

Before diving into coding, ensure you have the necessary tools installed. You will need:

  • Node.js and npm installed on your machine
  • React Native CLI or Expo CLI
  • Firebase account and project setup

Set up a new React Native project using your preferred tool. For example, with Expo:

expo init todo-app

Configuring Firebase

Create a new project in Firebase console. Enable Firestore Database and set security rules according to your needs. Then, add your app to Firebase and obtain your configuration object, which includes apiKey, authDomain, projectId, etc.

Install Firebase SDK:

npm install firebase

Integrating Firebase into React Native

Create a firebase.js file to initialize Firebase:

import { initializeApp } from 'firebase/app';

const firebaseConfig = {

apiKey: 'YOUR_API_KEY',

authDomain: 'YOUR_AUTH_DOMAIN',

projectId: 'YOUR_PROJECT_ID',

storageBucket: 'YOUR_STORAGE_BUCKET',

messagingSenderId: 'YOUR_MESSAGING_SENDER_ID',

appId: 'YOUR_APP_ID',

};

const app = initializeApp(firebaseConfig);

export default app;

Building the To-Do List App

Now, create the main component where users can add, display, and delete to-do items. Use React hooks for state management.

Import necessary modules:

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

import { getFirestore, collection, addDoc, onSnapshot, deleteDoc, doc } from 'firebase/firestore';

import firebaseApp from './firebase';

const db = getFirestore(firebaseApp);

Creating the To-Do List Component

Define the component:

function TodoApp() {

const [todos, setTodos] = useState([]);

const [newTodo, setNewTodo] = useState('');

useEffect(() => {

const unsubscribe = onSnapshot(collection(db, 'todos'), (snapshot) => {

setTodos(snapshot.docs.map(doc => ({ id: doc.id, text: doc.data().text })));

});

return () => unsubscribe();

}, []);

const addTodo = async () => {

if (newTodo.trim() === '') return;

await addDoc(collection(db, 'todos'), { text: newTodo });

setNewTodo('');

};

const deleteTodo = async (id) => {

await deleteDoc(doc(db, 'todos', id));

};

return (

To-Do List

type="text"

value={newTodo}

onChange={(e) => setNewTodo(e.target.value)}

placeholder="Enter new task"

/>

    {todos.map((todo) => (

  • {todo.text}
    • ))}

);

};

export default TodoApp;

Running and Testing the App

Start your React Native app using:

expo start

Open the app on your device or emulator. You should see an input box, an add button, and a list of to-do items. Test adding and deleting tasks to ensure Firebase synchronization is working correctly.

Conclusion

Building a to-do list app with Firebase in React Native demonstrates how to integrate cloud database services into mobile applications. This project can serve as a foundation for more complex apps, incorporating features like user authentication, data validation, and advanced UI components. With Firebase’s real-time capabilities, your app can provide a seamless experience across devices.