├── .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 |
--------------------------------------------------------------------------------