react-native-basic-ToDoApp/App.js at master · Azzzhar7/react-native-basic-ToDoApp · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
import React from 'react';
import {
  StyleSheet,
  Text,
  View,
  TextInput,
  ScrollView,
  TouchableOpacity
} from 'react-native';

import Note from './App/Components/Note';

export default class ToDoApp extends React.Component {

  state = {
    noteArray: [{'date': '07/04/2020', 'note': 'Hello world!'}],
    noteText: '',
  }

  render() {

    let notes = this.state.noteArray.map((val, key) => {
      return <Note key={key} keyval={key} val={val} deleteMethod={()=>this.deleteNote(key)} />
    });

    return (
      <View style={styles.container}>
        <View style={styles.header}>
          <Text style={styles.headerText}>NOTES</Text>
        </View>
        <ScrollView style={styles.scrollContainer}>{notes}</ScrollView>
        <View style={styles.footer}>
          <TouchableOpacity style={styles.addButton}
            onPress={this.addNote.bind(this)}
          >
            <Text style={styles.addButtonText}>+</Text>
          </TouchableOpacity>
          <TextInput style={styles.textInput}
            placeholder='Write here...'
            placeholderTextColor='gray'
            onChangeText={(noteText) => this.setState({noteText})}
          >
          </TextInput>
        </View>
      </View>
    );
  }

  addNote() {

    if (this.state.noteText) {

      var d = new Date();
      this.state.noteArray.push( {'date': d.getDate()+'/'+(d.getMonth()+1)+'/'+d.getFullYear(), 'note': this.state.noteText} );
      this.setState({noteArray: this.state.noteArray});
      this.setState({noteText: ''});

    }

  }

  deleteNote(key) {

    this.state.noteArray.splice(key, 1);
    this.setState({noteArray: this.state.noteArray});

  }

}


const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  header : {
    backgroundColor: '#FFD52E',
    alignItems: 'center',
    justifyContent: 'center',
    borderBottomWidth: 10,
    borderBottomColor: '#ddd',
  },
  headerText: {
    color: '#fff',
    fontSize: 18,
    padding: 20,
  },
  scrollContainer: {
    flex: 1,
    marginBottom: 100,
  },
  footer: {
    position: 'absolute',
    alignItems: 'center',
    bottom: 0,
    left: 0,
    right: 0,
  },
  addButton: {
    backgroundColor: '#FFD52E',
    width: 90,
    height: 90,
    borderRadius: 50,
    borderColor: '#ccc',
    alignItems: 'center',
    justifyContent: 'center',
    elevation: 8,
    marginBottom: -45,
    zIndex: 10,
  },
  addButtonText: {
    color: '#fff',
    fontSize: 24,
  },
  textInput: {
    alignSelf: 'stretch',
    padding: 20,
    paddingTop: 46,
    backgroundColor: '#E5E5E5',
    borderTopWidth: 2,
    borderTopColor: '#ddd',
  }
});