├── .expo-shared └── assets.json ├── .gitignore ├── App.js ├── README.md ├── app.json ├── assets ├── adaptive-icon.png ├── favicon.png ├── icon.png └── splash.png ├── babel.config.js ├── components └── Task.js ├── mockup.png ├── package.json └── yarn.lock /.expo-shared/assets.json: -------------------------------------------------------------------------------- 1 | { 2 | "12bb71342c6255bbf50437ec8f4441c083f47cdb74bd89160c15e4f43e52a1cb": true, 3 | "40b842e832070c58deac6aa9e08fa459302ee3f9da492c7e77d93d2fbf4a56fd": true 4 | } 5 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/**/* 2 | .expo/* 3 | npm-debug.* 4 | *.jks 5 | *.p8 6 | *.p12 7 | *.key 8 | *.mobileprovision 9 | *.orig.* 10 | web-build/ 11 | 12 | # macOS 13 | .DS_Store 14 | -------------------------------------------------------------------------------- /App.js: -------------------------------------------------------------------------------- 1 | import React, {useState} from 'react'; 2 | import { KeyboardAvoidingView, StyleSheet, Text, View, TextInput, TouchableOpacity, Keyboard, ScrollView } from 'react-native'; 3 | import Task from './components/Task'; 4 | 5 | export default function App() { 6 | const [task, setTask] = useState(); 7 | const [taskItems, setTaskItems] = useState([]); 8 | 9 | const handleAddTask = () => { 10 | Keyboard.dismiss(); 11 | setTaskItems([...taskItems, task]) 12 | setTask(null); 13 | } 14 | 15 | const completeTask = (index) => { 16 | let itemsCopy = [...taskItems]; 17 | itemsCopy.splice(index, 1); 18 | setTaskItems(itemsCopy) 19 | } 20 | 21 | return ( 22 | 23 | {/* Added this scroll view to enable scrolling when list gets longer than the page */} 24 | 30 | 31 | {/* Today's Tasks */} 32 | 33 | Today's tasks 34 | 35 | {/* This is where the tasks will go! */} 36 | { 37 | taskItems.map((item, index) => { 38 | return ( 39 | completeTask(index)}> 40 | 41 | 42 | ) 43 | }) 44 | } 45 | 46 | 47 | 48 | 49 | 50 | {/* Write a task */} 51 | {/* Uses a keyboard avoiding view which ensures the keyboard does not cover the items on screen */} 52 | 56 | setTask(text)} /> 57 | handleAddTask()}> 58 | 59 | + 60 | 61 | 62 | 63 | 64 | 65 | ); 66 | } 67 | 68 | const styles = StyleSheet.create({ 69 | container: { 70 | flex: 1, 71 | backgroundColor: '#E8EAED', 72 | }, 73 | tasksWrapper: { 74 | paddingTop: 80, 75 | paddingHorizontal: 20, 76 | }, 77 | sectionTitle: { 78 | fontSize: 24, 79 | fontWeight: 'bold' 80 | }, 81 | items: { 82 | marginTop: 30, 83 | }, 84 | writeTaskWrapper: { 85 | position: 'absolute', 86 | bottom: 60, 87 | width: '100%', 88 | flexDirection: 'row', 89 | justifyContent: 'space-around', 90 | alignItems: 'center' 91 | }, 92 | input: { 93 | paddingVertical: 15, 94 | paddingHorizontal: 15, 95 | backgroundColor: '#FFF', 96 | borderRadius: 60, 97 | borderColor: '#C0C0C0', 98 | borderWidth: 1, 99 | width: 250, 100 | }, 101 | addWrapper: { 102 | width: 60, 103 | height: 60, 104 | backgroundColor: '#FFF', 105 | borderRadius: 60, 106 | justifyContent: 'center', 107 | alignItems: 'center', 108 | borderColor: '#C0C0C0', 109 | borderWidth: 1, 110 | }, 111 | addText: {}, 112 | }); 113 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Simple TodoList using React Native 2 |

3 | YouTube Tutorial Series 4 |

5 | 6 | -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "expo": { 3 | "name": "todoList", 4 | "slug": "todoList", 5 | "version": "1.0.0", 6 | "orientation": "portrait", 7 | "icon": "./assets/icon.png", 8 | "splash": { 9 | "image": "./assets/splash.png", 10 | "resizeMode": "contain", 11 | "backgroundColor": "#ffffff" 12 | }, 13 | "updates": { 14 | "fallbackToCacheTimeout": 0 15 | }, 16 | "assetBundlePatterns": [ 17 | "**/*" 18 | ], 19 | "ios": { 20 | "supportsTablet": true 21 | }, 22 | "android": { 23 | "adaptiveIcon": { 24 | "foregroundImage": "./assets/adaptive-icon.png", 25 | "backgroundColor": "#FFFFFF" 26 | } 27 | }, 28 | "web": { 29 | "favicon": "./assets/favicon.png" 30 | } 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /assets/adaptive-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/santa70916112/react-native-todo-list/4e7302b1e71f7a53bd307ac591879f43752d6ecf/assets/adaptive-icon.png -------------------------------------------------------------------------------- /assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/santa70916112/react-native-todo-list/4e7302b1e71f7a53bd307ac591879f43752d6ecf/assets/favicon.png -------------------------------------------------------------------------------- /assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/santa70916112/react-native-todo-list/4e7302b1e71f7a53bd307ac591879f43752d6ecf/assets/icon.png -------------------------------------------------------------------------------- /assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/santa70916112/react-native-todo-list/4e7302b1e71f7a53bd307ac591879f43752d6ecf/assets/splash.png -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function(api) { 2 | api.cache(true); 3 | return { 4 | presets: ['babel-preset-expo'], 5 | }; 6 | }; 7 | -------------------------------------------------------------------------------- /components/Task.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { View, Text, StyleSheet, TouchableOpacity } from 'react-native'; 3 | 4 | const Task = (props) => { 5 | 6 | return ( 7 | 8 | 9 | 10 | {props.text} 11 | 12 | 13 | 14 | ) 15 | } 16 | 17 | const styles = StyleSheet.create({ 18 | item: { 19 | backgroundColor: '#FFF', 20 | padding: 15, 21 | borderRadius: 10, 22 | flexDirection: 'row', 23 | alignItems: 'center', 24 | justifyContent: 'space-between', 25 | marginBottom: 20, 26 | }, 27 | itemLeft: { 28 | flexDirection: 'row', 29 | alignItems: 'center', 30 | flexWrap: 'wrap' 31 | }, 32 | square: { 33 | width: 24, 34 | height: 24, 35 | backgroundColor: '#55BCF6', 36 | opacity: 0.4, 37 | borderRadius: 5, 38 | marginRight: 15, 39 | }, 40 | itemText: { 41 | maxWidth: '80%', 42 | }, 43 | circular: { 44 | width: 12, 45 | height: 12, 46 | borderColor: '#55BCF6', 47 | borderWidth: 2, 48 | borderRadius: 5, 49 | }, 50 | }); 51 | 52 | export default Task; -------------------------------------------------------------------------------- /mockup.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/santa70916112/react-native-todo-list/4e7302b1e71f7a53bd307ac591879f43752d6ecf/mockup.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "node_modules/expo/AppEntry.js", 3 | "scripts": { 4 | "start": "expo start", 5 | "android": "expo start --android", 6 | "ios": "expo start --ios", 7 | "web": "expo start --web", 8 | "eject": "expo eject" 9 | }, 10 | "dependencies": { 11 | "expo": "~40.0.0", 12 | "expo-status-bar": "~1.0.3", 13 | "react": "16.13.1", 14 | "react-dom": "16.13.1", 15 | "react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz", 16 | "react-native-web": "~0.13.12" 17 | }, 18 | "devDependencies": { 19 | "@babel/core": "~7.9.0" 20 | }, 21 | "private": true 22 | } 23 | --------------------------------------------------------------------------------