├── mockup.png
├── assets
    ├── icon.png
    ├── favicon.png
    ├── splash.png
    └── adaptive-icon.png
├── babel.config.js
├── .expo-shared
    └── assets.json
├── .gitignore
├── README.md
├── package.json
├── app.json
├── components
    └── Task.js
└── App.js


/mockup.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/santa70916112/react-native-todo-list/HEAD/mockup.png


--------------------------------------------------------------------------------
/assets/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/santa70916112/react-native-todo-list/HEAD/assets/icon.png


--------------------------------------------------------------------------------
/assets/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/santa70916112/react-native-todo-list/HEAD/assets/favicon.png


--------------------------------------------------------------------------------
/assets/splash.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/santa70916112/react-native-todo-list/HEAD/assets/splash.png


--------------------------------------------------------------------------------
/assets/adaptive-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/santa70916112/react-native-todo-list/HEAD/assets/adaptive-icon.png


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = function(api) {
2 |   api.cache(true);
3 |   return {
4 |     presets: ['babel-preset-expo'],
5 |   };
6 | };
7 | 


--------------------------------------------------------------------------------
/.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 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Simple TodoList using React Native
2 | <p>
3 |   <a href="https://www.youtube.com/playlist?list=PLYBvEAka-q1hJuwRPYQPlEBBRm7_qGw_2">YouTube Tutorial Series</a>
4 | </p>
5 | <img src="./mockup.png" />
6 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 |     <View style={styles.item}>
 8 |       <View style={styles.itemLeft}>
 9 |         <View style={styles.square}></View>
10 |         <Text style={styles.itemText}>{props.text}</Text>
11 |       </View>
12 |       <View style={styles.circular}></View>
13 |     </View>
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;


--------------------------------------------------------------------------------
/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 |     <View style={styles.container}>
 23 |       {/* Added this scroll view to enable scrolling when list gets longer than the page */}
 24 |       <ScrollView
 25 |         contentContainerStyle={{
 26 |           flexGrow: 1
 27 |         }}
 28 |         keyboardShouldPersistTaps='handled'
 29 |       >
 30 | 
 31 |       {/* Today's Tasks */}
 32 |       <View style={styles.tasksWrapper}>
 33 |         <Text style={styles.sectionTitle}>Today's tasks</Text>
 34 |         <View style={styles.items}>
 35 |           {/* This is where the tasks will go! */}
 36 |           {
 37 |             taskItems.map((item, index) => {
 38 |               return (
 39 |                 <TouchableOpacity key={index}  onPress={() => completeTask(index)}>
 40 |                   <Task text={item} /> 
 41 |                 </TouchableOpacity>
 42 |               )
 43 |             })
 44 |           }
 45 |         </View>
 46 |       </View>
 47 |         
 48 |       </ScrollView>
 49 | 
 50 |       {/* Write a task */}
 51 |       {/* Uses a keyboard avoiding view which ensures the keyboard does not cover the items on screen */}
 52 |       <KeyboardAvoidingView 
 53 |         behavior={Platform.OS === "ios" ? "padding" : "height"}
 54 |         style={styles.writeTaskWrapper}
 55 |       >
 56 |         <TextInput style={styles.input} placeholder={'Write a task'} value={task} onChangeText={text => setTask(text)} />
 57 |         <TouchableOpacity onPress={() => handleAddTask()}>
 58 |           <View style={styles.addWrapper}>
 59 |             <Text style={styles.addText}>+</Text>
 60 |           </View>
 61 |         </TouchableOpacity>
 62 |       </KeyboardAvoidingView>
 63 |       
 64 |     </View>
 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 | 


--------------------------------------------------------------------------------