-
Notifications
You must be signed in to change notification settings - Fork 0
/
App.js
104 lines (91 loc) · 2.28 KB
/
App.js
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
//App.js
import React, {Component} from 'react'
import {
View,
Text,
StyleSheet,
TouchableOpacity,
Image
} from 'react-native'
import Header from './components/header'
import Body from './components/body'
import AddNote from './components/addNote'
export default class App extends Component {
state = {
notes: [
'Jogging',
'Play Golf',
'Hairdressing',
'Go to party'
],
showAddNote: false,
newNote: ''
}
save(){
let listOfNotes = this.state.notes
let noteToAdd = this.state.newNote
//add the new note to the start of the array so that it appears first
listOfNotes.unshift(noteToAdd)
//update the state with the new state and set showAddNote to false to
//return to the our list of notes
this.setState({notes: listOfNotes, showAddNote: false})
}
render(){
//when we press add button we should be able to see the addNote Component
if(this.state.showAddNote){
return(
<View style={styles.main}>
<View style={{flex: 1, backgroundColor:'#5F85F0'}}>
<TouchableOpacity style={styles.backBtn}
onPress={()=>this.setState({showAddNote: false})}//we change the state to go back
>
<Text style={styles.backArrow}> {'<'} </Text>
</TouchableOpacity>
</View>
<AddNote
onInputChange={(input)=>this.setState({newNote: input})}
onSave={()=>this.save()}
/>
</View>
)
}
return(
<View style={styles.main}>
<Header />
<Body notesList={this.state.notes} />
<TouchableOpacity style={styles.btn}
onPress={()=>this.setState({showAddNote: true})}
>
<Text style={styles.btnTxt}>+</Text>
</TouchableOpacity>
</View>
)
}
}
const styles = StyleSheet.create({
main: {
flex: 1
},
btn: {
position : 'absolute',
bottom: 35,
right: 30,
backgroundColor: '#5F85F0',
width: 60,
height: 60,
borderRadius: 30,
},
btnTxt: {
fontSize: 45,
alignSelf: 'center',
color: '#FFF'
},
backArrow: {
fontSize: 28,
color: '#FFF'
},
backBtn: {
paddingTop: 35,
paddingLeft: 10,
}
})