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

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:

Plain text

Copy to clipboard

Open code in new window

EnlighterJS 3 Syntax Highlighter

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>

);

}

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> ); }

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:

Plain text

Copy to clipboard

Open code in new window

EnlighterJS 3 Syntax Highlighter

<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>

<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>

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

isMa

Ingeniero en Informática, Investigador, me encanta crear cosas o arreglarlas y darles una nueva vida. Escritor y poeta. Más de 20 APPs publicadas y un libro en Amazon.