Creando un ToDo List con 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:

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.

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