Crea una App de Tareas con React Native

Tiempo de lectura: 2 minutos

En este tutorial, vamos a construir una sencilla app de tareas con React Native, que incluya:

• Interfaz moderna con animaciones usando React Native Reanimated.
• Almacenamiento local con AsyncStorage.
• Navegación con React Navigation.

Requisitos previos

• Node.js instalado (versión 18 o superior).
• Expo CLI instalado (npm install -g expo-cli).
• Un emulador o dispositivo físico con la app Expo Go.

1. Creación del Proyecto

Ejecuta el siguiente comando en tu terminal para crear un nuevo proyecto Expo:

npx create-expo-app my-tasks-app
cd my-tasks-app
npm install

Iniciamos el proyecto con:

npx expo start

2. Instalación de Dependencias

Instalamos las librerías necesarias:

npm install @react-navigation/native @react-navigation/stack
npm install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context react-native-async-storage/async-storage

3. Configurar Navegación

Creamos navigation.js dentro de src/:

import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import { NavigationContainer } from '@react-navigation/native';
import HomeScreen from '../screens/HomeScreen';

const Stack = createStackNavigator();

export default function Navigation() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

En App.js importamos la navegación:

import React from 'react';
import Navigation from './src/navigation';
export default function App() {
  return <Navigation />;
}

4. Crear la Pantalla de Tareas

Creamos HomeScreen.js en src/screens/:

import React, { useState, useEffect } from 'react';
import { View, Text, TextInput, Button, FlatList } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';

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

  useEffect(() => {
    loadTasks();
  }, []);

  const saveTasks = async (tasks) => {
    await AsyncStorage.setItem('tasks', JSON.stringify(tasks));
  };

  const loadTasks = async () => {
    const storedTasks = await AsyncStorage.getItem('tasks');
    if (storedTasks) setTasks(JSON.parse(storedTasks));
  };

  const addTask = () => {
    if (task.trim()) {
      const newTasks = [...tasks, task];
      setTasks(newTasks);
      saveTasks(newTasks);
      setTask('');
    }
  };

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

5. Agregar Animaciones

Instalamos Reanimated:

npm install react-native-reanimated

Modificamos HomeScreen.js para agregar animaciones:

import Animated, { FadeIn, FadeOut } from 'react-native-reanimated';
// Dentro del render:
<FlatList
  data={tasks}
  keyExtractor={(item, index) => index.toString()}
  renderItem={({ item }) => (
    <Animated.View entering={FadeIn} exiting={FadeOut}>
      <Text>{item}</Text>
    </Animated.View>
  )}
/>

6. Prueba la Aplicación

Ejecuta:

npx expo start

Escanea el QR con Expo Go en tu móvil o usa un emulador.