Creando un ToDo List con Expo

to do list un snack de expo

Hola ávidos del código, hoy les traigo un proyecto pequeño en el que podrás seguir los pasos para estar creando un ToDo List con Expo. Lo primero sera registrarse en el sitio de expo, y luego crear un nuevo snack.

Desde aquí, vamos a comenzar con el código para el todo list con expo.

Puedes ver el tutorial en este video y seguir con el documento para seguir el ritmo de como se hace:

Creando un ToDo List con Expo

Comenzaremos modificando App.js, en especifico, la function App() para que se vea de esta manera:

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';


export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.headText}>
        ToDo List
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#ecf0f1',
  },
  headText: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});

el resultado sera una pagina simple con un texto de titulo, como la image siguiente.

todo app list usando expo

Para continuar, crearemos un nuevo fichero y lo incluiremos dentro de la carpeta components. Este fichero sera la actividad generada dentro de la lista. Al fichero yo le voy a llamar TareaItem.js, pero ustedes pueden darle el nombre que deseen.

En el fichero crearemos un contenedor View el cual presentara el orden de la tarea, su nombre y una opción para eliminar dicha tarea.

import React from 'react';
import {StyleSheet, Text, View, TouchableOpacity} from 'react-native';
import {MaterialIcons} from '@expo/vector-icons';

export default function TareaItem(props){
  return (
    <View style={styles.container}>
      <View style={styles.ixContainer}>
        <Text style={styles.index}>{props.index}</Text>
      </View>
      <View style={styles.tareaContainer}>
        <Text style={styles.tarea} onPress={() => props.abrirTarea()}>{props.tarea}</Text>
        <TouchableOpacity onPress={() => props.borrarTarea()}>
          <MaterialIcons style={styles.borrar} name="delete" size={18} color='#fff' />
        </TouchableOpacity>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    marginHorizontal: 20,
  },
  ixContainer:{
    backgroundColor:'#3e3364',
    borderRadius:'50%',
    marginRight:10,
    alignItems:'center',
    justifyContent:'center',
    width:50,
    height:50,
  },
  index:{
    color:'#fff',
    fontSize:20,
  },
  tareaContainer:{
    backgroundColor:'#3e3364',
    borderRadius:25,
    flexDirection:'row',
    justifyContent:'space-between',
    alignItems: 'center',
    flex:1,
    paddingHorizontal:10,
    paddingVertical:5,
    minHeight:50,
  },
  tarea:{
    color:'#fff',
    width:'90%',
    fontSize:16,
  },
  borrar:{marginRight:10,}
});

Lo siguiente es el componente que permitirá agregar las tareas. Este fichero lo vamos a llamar TareaInputField.js.

import React, {useState} from 'react';
import {KeyboardAvoidingView, StyleSheet, View, TextInput, TouchableOpacity, Platform} from 'react-native';
import {MaterialIcons} from '@expo/vector-icons';

export default function TareaInputField(props) {
  const[tarea, setTarea] = useState();
  const handleAgregarTarea = (value) =>{
    props.addTarea(value);
    setTarea(null);
  }

  return(
    <KeyboardAvoidingView style={styles.container} behavior={Platform.OS === "ios" ? "padding" : "height"}>
      <TextInput style={styles.inputField} value={tarea} onChangeText={text => setTarea(text)} placeholder={"Agrega una Tarea"} placeholderTextColor={'#fff'} />
      <TouchableOpacity onPress={() => handleAgregarTarea(tarea)}>
        <View style={styles.boton}>
          <MaterialIcons name="keyboard-arrow-up" size={24} color="black" />
        </View>
      </TouchableOpacity>
    </KeyboardAvoidingView>
  );
}

const styles = StyleSheet.create({
  container:{
    borderColor:'white',
    backgroundColor:'#3e3364',
    borderWidth:1,
    marginHorizontal:20,
    borderRadius:25,
    flexDirection:'row',
    alignItems:'center',
    justifyContent:'space-between',
    paddingHorizontal:10,
    position:'absolute',
    bottom:20,
  },
  inputField:{
    color:'white',
    height:50,
    flex:1,
    marginLeft:10,
  },
  boton:{
    height:30,
    width:30,
    borderRadius:25,
    backgroundColor:'white',
    alignItems:'center',
    justifyContent:'center'
  }
});

Agregar todo a App.js y ya esta lista la aplicacion ToDo List.

import React, {useState} from 'react';
import { Text, View, StyleSheet, Keyboard, ScrollView } from 'react-native';
import TareaInputField from './components/TareaInputField';
import TareaItem from './components/TareaItem';


export default function App() {
  const [tareas, setTareas] = useState([]);
  const addTarea = (tarea) => {
    if(tarea == null) return;
    setTareas([...tareas, tarea]);
    Keyboard.dismiss();
  }
  const borrarTarea = (deleteIndex) => {
    setTareas(tareas.filter((value, index) => index != deleteIndex));
  }
  const abrirTarea = () => {
    
  }
  return (
    <View style={styles.container}>
      <Text style={styles.headText}>
        ToDo List
      </Text>
      <ScrollView style={styles.scrView}>
        {tareas.map((tarea, index) => {
          return(
            <View key={index} style={styles.tareaContainer}>
              <TareaItem index={index +1} tarea={tarea} borrarTarea={() => borrarTarea(index) } />
            </View>
          )
        })}
      </ScrollView>
      <TareaInputField addTarea={addTarea} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#ecf0f1',
  },
  headText: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
  scrView:{marginBottom:70,},
  tareaContainer:{marginTop:20}
});

Resultado Final

Continua Aprendiendo aquí:

  • Crear y exportar una tabla HTML a PDF

    Crear y exportar una tabla HTML a PDF

    Compartelo:Hola, en este tutorial vamos a continuar aprendiendo a exportar documentos html a pdf. Esta vez estaremos aprendiendo como crear y exportar una tabla HTML […] Leer más


  • Creando un ToDo List con Expo

    Creando un ToDo List con Expo

    Compartelo:Hola ávidos del código, hoy les traigo un proyecto pequeño en el que podrás seguir los pasos para estar creando un ToDo List con Expo. […] Leer más


  • Crear botones para web y Aplicaciones

    Crear botones para web y Aplicaciones

    Compartelo:Aprende como crear botones para web y aplicaciones de forma fácil y rápida. Con estos tips podrás conseguir un resultado profesional en cuestión de minutos. […] Leer más


  • Contador de clicks en listas

    Contador de clicks en listas

    Compartelo:Hola, este articulo “Contador de clicks en listas”, es la continuación del tutorial Contador de Clicks. Esta vez, vamos a utilizarlo en una lista no […] Leer más


  • Exportando HTML a Paginas PDF Usando JavaScript

    Exportando HTML a Paginas PDF Usando JavaScript

    Compartelo:Hola, este tutorial sera mas sencillo pues vamos a solo agregar un poco de código al tutorial de Como exportar una imagen a pdf usando […] Leer más


  • Agregar imagen a pdf usando JavaScript

    Agregar imagen a pdf usando JavaScript

    Compartelo:Hola, en este tutorial vamos a ver como podemos Agregar imagen a pdf usando JavaScript con la librería jspdf. Para comenzar, vamos crear una pagina […] Leer más


Deja una respuesta

Tu dirección de correo electrónico no será publicada.