├── assets
    ├── icon.png
    └── splash.png
├── babel.config.js
├── .expo-shared
    └── assets.json
├── .gitignore
├── .prettierrc
├── components
    ├── GoalItem.js
    └── GoalInput.js
├── app.json
├── README.md
├── package.json
└── App.js


/assets/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AlanBinu007/react-native-todo-app/HEAD/assets/icon.png


--------------------------------------------------------------------------------
/assets/splash.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AlanBinu007/react-native-todo-app/HEAD/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 | 


--------------------------------------------------------------------------------
/.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 | web-report/
12 | 
13 | # macOS
14 | .DS_Store
15 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
 1 | {
 2 |    "printWidth": 145,
 3 |    "tabWidth": 3,
 4 |    "useTabs": false,
 5 |    "semi": false,
 6 |    "singleQuote": true,
 7 |    "trailingComma": "none",
 8 |    "bracketSpacing": true
 9 | }
10 | 


--------------------------------------------------------------------------------
/components/GoalItem.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { ListItem } from 'react-native-elements'
 3 | import { TouchableOpacity, View } from 'react-native'
 4 | 
 5 | const GoalItem = (props) => {
 6 |    return (
 7 |       <TouchableOpacity activeOpacity={0.8} onPress={() => props.onDelete(props.id)}>
 8 |          <View>
 9 |             <ListItem title={props.title} leftIcon={{ name: 'assignment' }} bottomDivider />
10 |          </View>
11 |       </TouchableOpacity>
12 |    )
13 | }
14 | 
15 | export default GoalItem
16 | 


--------------------------------------------------------------------------------
/app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "expo": {
 3 |     "name": "Todo App",
 4 |     "slug": "Todo-App",
 5 |     "platforms": [
 6 |       "ios",
 7 |       "android",
 8 |       "web"
 9 |     ],
10 |     "version": "1.0.0",
11 |     "orientation": "portrait",
12 |     "icon": "./assets/icon.png",
13 |     "splash": {
14 |       "image": "./assets/splash.png",
15 |       "resizeMode": "contain",
16 |       "backgroundColor": "#ffffff"
17 |     },
18 |     "updates": {
19 |       "fallbackToCacheTimeout": 0
20 |     },
21 |     "assetBundlePatterns": [
22 |       "**/*"
23 |     ],
24 |     "ios": {
25 |       "supportsTablet": true
26 |     }
27 |   }
28 | }
29 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | ### Description 
 4 | 
 5 | Expo : [Link](https://docs.expo.io/guides/)
 6 | 
 7 | React Native: [Link](https://reactnative.dev/docs/getting-started)
 8 | 
 9 | React Hooks: [Link](https://reactjs.org/docs/hooks-reference.html)
10 | 
11 | ### HOW TO RUN
12 | 
13 | Keep in mind you need to have Expo-Cli globally on your computer : 
14 | 
15 | >npm i -g expo-cli
16 | 
17 | Just download the repository and : 
18 | 
19 | >npm start
20 | 
21 | In order to run it on an Android Device or IOS you can download Expo-Client from [PlayStore](https://play.google.com/store/apps/details?id=host.exp.exponent&hl=en) or [APP Store](https://apps.apple.com/us/app/expo-client/id982107779):
22 | 


--------------------------------------------------------------------------------
/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": "~37.0.12",
12 |     "react": "~16.13.1",
13 |     "react-dom": "~16.13.1",
14 |     "react-native": "https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz",
15 |     "react-native-elements": "^2.0.0",
16 |     "react-native-web": "~0.11.7",
17 |     "uuid": "^8.1.0"
18 |   },
19 |   "devDependencies": {
20 |     "babel-preset-expo": "~8.2.1",
21 |     "@babel/core": "^7.9.6"
22 |   },
23 |   "private": true
24 | }
25 | 


--------------------------------------------------------------------------------
/components/GoalInput.js:
--------------------------------------------------------------------------------
 1 | import React, { useState } from 'react'
 2 | import { Modal, StyleSheet, TextInput, View } from 'react-native'
 3 | import { Button } from 'react-native-elements'
 4 | 
 5 | const GoalInput = (props) => {
 6 |    const [currentGoal, setCurrentGoal] = useState('')
 7 |    let textInput
 8 | 
 9 |    const onChangeText = (goal) => {
10 |       setCurrentGoal(goal)
11 |    }
12 | 
13 |    const addGoalHandler = () => {
14 |       props.addGoalHandler(currentGoal)
15 |       setCurrentGoal('')
16 |    }
17 | 
18 |    return (
19 |       <Modal
20 |          visible={props.isVisible}
21 |          animationType="slide"
22 |          onShow={() => {
23 |             textInput.focus()
24 |          }}
25 |       >
26 |          <View style={styles.inputContainer}>
27 |             <TextInput placeholder="Course Goal" style={styles.input} onChangeText={onChangeText} ref={(input) => (textInput = input)} />
28 |             <View style={styles.buttonContainer}>
29 |                <Button title="Add" buttonStyle={{ width: 100 }} onPress={addGoalHandler} />
30 |                <Button title="Cancel" buttonStyle={{ backgroundColor: 'firebrick', width: 100 }} onPress={props.onCancel} />
31 |             </View>
32 |          </View>
33 |       </Modal>
34 |    )
35 | }
36 | 
37 | const styles = StyleSheet.create({
38 |    inputContainer: {
39 |       justifyContent: 'center',
40 |       alignItems: 'center',
41 |       flex: 1
42 |    },
43 |    input: {
44 |       width: '70%',
45 |       borderColor: 'black',
46 |       borderWidth: 1,
47 |       marginBottom: 15,
48 |       padding: 10
49 |    },
50 |    buttonContainer: {
51 |       flexDirection: 'row',
52 |       justifyContent: 'space-around',
53 |       width: '60%'
54 |    }
55 | })
56 | 
57 | export default GoalInput
58 | 


--------------------------------------------------------------------------------
/App.js:
--------------------------------------------------------------------------------
 1 | import React, { useState } from 'react'
 2 | import { FlatList, StyleSheet, View } from 'react-native'
 3 | import { Button } from 'react-native-elements'
 4 | import GoalInput from './components/GoalInput'
 5 | import GoalItem from './components/GoalItem'
 6 | 
 7 | export default function App() {
 8 |    const [isAddModalVisible, setAddModalVisible] = useState(false)
 9 |    const [courseGoals, setGoals] = useState([
10 |       { id: Math.random().toString(), value: 'A' },
11 |       { id: Math.random().toString(), value: 'B' },
12 |       { id: Math.random().toString(), value: 'C' },
13 |       { id: Math.random().toString(), value: 'D' },
14 |       { id: Math.random().toString(), value: 'E' }
15 |    ])
16 | 
17 |    const addGoalHandler = (currentGoal) => {
18 |       setGoals((currentGoals) => [...currentGoals, { id: Math.random().toString(), value: currentGoal }])
19 |       setAddModalVisible(false)
20 |    }
21 | 
22 |    const onDeleteGoal = (goalId) => {
23 |       setGoals((currentGoals) => currentGoals.filter((goal) => goal.id != goalId))
24 |    }
25 | 
26 |    /* Render */
27 |    return (
28 |       <View style={styles.screen}>
29 |          <View style={styles.showModalRow}>
30 |             <Button
31 |                title="Add Goal"
32 |                buttonStyle={{ marginRight: 10 }}
33 |                textStyle={{ marginLeft: 15 }}
34 |                onPress={() => setAddModalVisible(!isAddModalVisible)}
35 |             />
36 |             <Button title="Clear All" buttonStyle={styles.clearAll} textStyle={{ marginLeft: 15 }} onPress={() => setGoals([])} />
37 |          </View>
38 |          <GoalInput
39 |             isVisible={isAddModalVisible}
40 |             setGoals={setGoals}
41 |             addGoalHandler={addGoalHandler}
42 |             onCancel={() => setAddModalVisible(false)}
43 |          ></GoalInput>
44 |          <FlatList
45 |             keyExtractor={(item) => item.id} //how to generate custom key , if not key is used on the objects ( for example we use id )
46 |             data={courseGoals}
47 |             renderItem={(itemData) => <GoalItem id={itemData.item.id} title={itemData.item.value} onDelete={onDeleteGoal}></GoalItem>}
48 |          ></FlatList>
49 |       </View>
50 |    )
51 | }
52 | 
53 | const styles = StyleSheet.create({
54 |    screen: { paddingTop: 80 },
55 |    clearAll: { backgroundColor: 'firebrick' },
56 |    showModalRow: {
57 |       flexDirection: 'row',
58 |       justifyContent: 'center',
59 |       alignContent: 'center'
60 |    }
61 | })
62 | 


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