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
1. Instalando SQLite
Expo proporciona un wrapper para SQLite, lo instalamos con:
npx expo install expo-sqlite
npx expo install expo-sqlite
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 = () => {
'CREATE TABLE IF NOT EXISTS tasks (id INTEGER PRIMARY KEY AUTOINCREMENT, text TEXT);'
export const getTasks = (callback) => {
tx.executeSql('SELECT * FROM tasks;', [], (_, { rows }) => {
export const addTask = (task, callback) => {
tx.executeSql('INSERT INTO tasks (text) VALUES (?);', [task], () => {
export const deleteTask = (id, callback) => {
tx.executeSql('DELETE FROM tasks WHERE id = ?;', [id], () => {
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);
});
});
};
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([]);
const handleAddTask = () => {
<View style={{ padding: 20 }}>
placeholder="Nueva tarea"
style={{ borderBottomWidth: 1, marginBottom: 10 }}
<Button title="Agregar" onPress={handleAddTask} />
keyExtractor={(item) => item.id.toString()}
renderItem={({ item }) => (
<TouchableOpacity onPress={() => deleteTask(item.id, setTasks)}>
<Text>{item.text}
</Text> 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
npm install styled-components
npm install styled-components
Modificamos HomeScreen.js
para usar estilos:
import styled from 'styled-components/native';
const Container = styled.View`
background-color: #f8f9fa;
const TaskInput = styled.TextInput`
border-bottom-width: 1px;
const TaskText = styled.Text`
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;
`;
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
:
placeholder="Nueva tarea"
<Button title="Agregar" onPress={handleAddTask} />
keyExtractor={(item) => item.id.toString()}
renderItem={({ item }) => (
<TouchableOpacity onPress={() => deleteTask(item.id, setTasks)}>
<TaskText>{item.text}
</TaskText> <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.
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.
Post Views: 1
Relacionado