Build a Simple Todo App with React Native and TypeScript

Build a Simple Todo App with React Native and TypeScript

hackernoon.com hackernoon.com4 months ago in #Dev Love55

Set up the advance surroundings by means of putting in Expo CLI (https://reactnative.dev/medical doctors/environment-setup) yarn world upload expo-cli Create a new undertaking (app): expo init todo-app # make a selection “clean (TypeScript)” Start the advance server: cd todo-app yarn beginning # press w to open the internet app Create a To-Do app Prerequisites Install a checkbox element: yarn upload react-native-bouncy-checkbox Then create the next folders & information construction: ./todo-app/ … fashions/ todo.type.ts parts/ todo.tsx todo-list.tsx menu.tsx perspectives/ edit-todo.view.tsx … The Data Model Define the information type within the document fashions/todo.type.ts: interface ITodo { identity: string performed: boolean textual content: string colour: string } export default ITodo Basic parts Create the Todo element in parts/todo.tsx: import React, { useState } from “react”; import { StyleSheet, Text, View } from ‘react-native’; import BouncyCheckbox from “react-native-bouncy-checkbox”; import ITodo from “../fashions/todo.type”; interface ITodoProps { information: ITodo } const Todo = (props: ITodoProps) ={ const [isDone, setDone] = useState(false); go back ( {props.information.textual content} ); } export default Todo const kinds = StyleSheet.create({ container: { width: ‘100%’, minHeight: ’30px’, peak: ‘auto’, colour: ‘black’, alignItems: ‘heart’, justifyContent: ‘flex-start’, show: ‘flex’, flexDirection: ‘row’, marginBottom: 5, padding: 10, borderRadius: 5, }, checkbox: { width: 40, minWidth: 40, peak: 40, }, textual content: { colour: ‘black’, width: ‘100%’, } }); Then, the Todo List element in parts/todo-list.tsx: import React, { useState } from “react”; import { StyleSheet, FlatList } from ‘react-native’; import ITodo from “../fashions/todo.type”; import Todo from “./todo”; interface ITodoListProps { information: ITodo[] } const TodoList = (props: ITodoListProps) ={ const [isDone, setDone] = useState(false); go back ( { go back ( ) } } keyExtractor={(merchandise, index) =merchandise.identity} /); } export default TodoList const kinds = StyleSheet.create({ container: { // peak: ‘100%’, maxHeight: ‘100%’, peak: 500, width: ‘100%’, flexDirection: ‘column’, padding: 10, overflow: ‘scroll’, }, }); And the Main Menu in parts/menu.tsx: import React, { useState } from “react”; import { Button, StyleSheet, Text, View } from ‘react-native’; interface IMenu { onAddTodo: () =void } const Menu = (props: IMenu) ={ go back ( props.onAddTodo()}/); } export default Menu const kinds = StyleSheet.create({ container: { width: ‘100%’, minHeight: ’30px’, peak: ‘auto’, colour: ‘black’, alignItems: ‘heart’, justifyContent: ‘heart’, show: ‘flex’, flexDirection: ‘row’, padding: 20, }, }); Views Create the Add/Edit View in view/edit-todo.view.tsx: import React, { useState } from “react” import { Modal, StyleSheet, TextEnter, View, Text, TouchableOpacity, KeyboardAvoidingView } from ‘react-native’; import ITodo from “../fashions/todo.type”; interface IEditTodoProps { isVisible: boolean onClose: () =void onSave: (information: any) =void information?: ITodo } const EditTodoView = (props: IEditTodoProps) ={ const colours = [‘#87D3F5’, ‘#BDE991’, ‘#BAAAFB’] const [colorIndex, setColorIndex] = useState(0) const identify = props.information ? ‘Edit Todo’ : ‘Add Todo’ const [text, setText] = useState(props.information?.textual content || ”) const onSave = () ={ if (textual content.trim().period === 0) { props.onClose() go back } if (props.information) { const newData = { …props.information, textual content } props.onSave(newData) } else { const newData = { identity: ‘id-‘ Math.ground(Math.random() * 10000000), textual content, performed: false, colour: colours[colorIndex], } props.onSave(newData) } } go back ( {identify} ToDo Text: ToDo Color: setColorIndex(0)}setColorIndex(1)}setColorIndex(2)}props.onClose()} Cancel Save ) } export default EditTodoView const kinds = StyleSheet.create({ modal: { backgroundColor: ‘rgba(0,0,0,0)’, }, container: { width: ‘100%’, peak: ‘100%’, paddingTop: 100, // backgroundColor: ‘#fff’, backgroundColor: ‘rgba(0,0,0,0.7)’, flexDirection: ‘column’, }, content material: { backgroundColor: ‘#fff’, flexDirection: ‘column’, }, identify: { fontSize: 24, fontWeight: ‘daring’, padding: 20, paddingBottom: 0, backgroundColor: ‘#fff’, }, menu: { show: ‘flex’, width: ‘100%’, peak: 60, paddingLeft: 30, paddingTop: 15, flexDirection: ‘row’, justifyContent: ‘space-between’, backgroundColor: ‘#fff’ }, enter: { peak: ‘auto’, margin: 12,  » Read More

Like to keep reading?

This article first appeared on hackernoon.com. If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply