Mejorando la App de Tareas con SQLite y Estilos en React Native

Tiempo de lectura: 2 minutos

En esta segunda parte, mejoraremos nuestra app de tareas de React Native con las siguientes mejoras:

• Persistencia avanzada con SQLite.
• Eliminación de tareas.
• Interfaz mejorada con Styled Components.

Requisitos previos

• Haber completado el primer tutorial: https://devcodelight.com/crea-una-app-de-tareas-con-react-native/.
• Haber instalado todas las dependencias de React Native y Expo.

1. Instalando SQLite

Expo proporciona un wrapper para SQLite, lo instalamos con:

npx expo install expo-sqlite

Creamos un archivo database.js en src/utils/ para manejar la base de datos:

import * as SQLite from 'expo-sqlite';

const db = SQLite.openDatabase('tasks.db');

export const setupDatabase = () => {
  db.transaction(tx => {
    tx.executeSql(
      'CREATE TABLE IF NOT EXISTS tasks (id INTEGER PRIMARY KEY AUTOINCREMENT, text TEXT);'
    );
  });
};

export const getTasks = (callback) => {
  db.transaction(tx => {
    tx.executeSql('SELECT * FROM tasks;', [], (_, { rows }) => {
      callback(rows._array);
    });
  });
};

export const addTask = (task, callback) => {
  db.transaction(tx => {
    tx.executeSql('INSERT INTO tasks (text) VALUES (?);', [task], () => {
      getTasks(callback);
    });
  });
};

export const deleteTask = (id, callback) => {
  db.transaction(tx => {
    tx.executeSql('DELETE FROM tasks WHERE id = ?;', [id], () => {
      getTasks(callback);
    });
  });
};

2. Modificar la Pantalla para Usar SQLite

Editamos HomeScreen.js:

import React, { useState, useEffect } from 'react';
import { View, Text, TextInput, Button, FlatList, TouchableOpacity } from 'react-native';
import { setupDatabase, getTasks, addTask, deleteTask } from '../utils/database';

export default function HomeScreen() {
  const [task, setTask] = useState('');
  const [tasks, setTasks] = useState([]);

  useEffect(() => {
    setupDatabase();
    getTasks(setTasks);
  }, []);

  const handleAddTask = () => {
    if (task.trim()) {
      addTask(task, setTasks);
      setTask('');
    }
  };

  return (
    <View style={{ padding: 20 }}>
      <TextInput
        placeholder="Nueva tarea"
        value={task}
        onChangeText={setTask}
        style={{ borderBottomWidth: 1, marginBottom: 10 }}
      />
      <Button title="Agregar" onPress={handleAddTask} />
      <FlatList
        data={tasks}
        keyExtractor={(item) => item.id.toString()}
        renderItem={({ item }) => (
          <TouchableOpacity onPress={() => deleteTask(item.id, setTasks)}>
            <Text>{item.text} ❌</Text>
          </TouchableOpacity>
        )}
      />
    </View>
  );
}

3. Aplicando Estilos con Styled Components

Instalamos Styled Components:

npm install styled-components

Modificamos HomeScreen.js para usar estilos:

import styled from 'styled-components/native';

const Container = styled.View`
  flex: 1;
  padding: 20px;
  background-color: #f8f9fa;
`;

const TaskInput = styled.TextInput`
  border-bottom-width: 1px;
  margin-bottom: 10px;
  padding: 5px;
`;

const TaskText = styled.Text`
  font-size: 18px;
  color: #333;
`;

Dentro del return:

<Container>
  <TaskInput
    placeholder="Nueva tarea"
    value={task}
    onChangeText={setTask}
  />
  <Button title="Agregar" onPress={handleAddTask} />
  <FlatList
    data={tasks}
    keyExtractor={(item) => item.id.toString()}
    renderItem={({ item }) => (
      <TouchableOpacity onPress={() => deleteTask(item.id, setTasks)}>
        <TaskText>{item.text} ❌</TaskText>
      </TouchableOpacity>
    )}
  />
</Container>

4. Probar la Aplicación

Ejecuta:

npx expo start

Verifica que las tareas se guardan y eliminan correctamente.