-
Notifications
You must be signed in to change notification settings - Fork 0
/
App.tsx
99 lines (89 loc) · 2.42 KB
/
App.tsx
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
import React, {useState} from 'react';
import {Text, View, StyleSheet, Image, TouchableOpacity} from 'react-native';
export default function App() {
const [img, setImg] = useState(require('./src/assets/biscoito.png'));
const [phrasetext, setPhraseText] = useState('');
let phrases = [
'Siga os bons e aprenda com eles.',
'O bom-senso vale mais do que muito conhecimento.',
'O riso é a menor distância entre duas pessoas.',
'Deixe de lado as preocupações e seja feliz.',
'Realize o óbvio, pense no improvável e conquiste o impossível.',
'Acredite em milagres, mas não dependa deles.',
'A maior barreira para o sucesso é o medo do fracasso.',
];
function breakBiscuit() {
let randomNumber = Math.floor(Math.random() * phrases.length);
setPhraseText(' " ' + phrases[randomNumber] + ' " ');
setImg(require('./src/assets/biscoitoAberto.png'));
}
function reloadCoockie() {
setPhraseText('');
setImg(require('./src/assets/biscoito.png'));
}
return (
<View style={styles.container}>
<Image source={img} style={styles.img} />
<Text style={styles.phrase}>{phrasetext}</Text>
<TouchableOpacity style={styles.button} onPress={breakBiscuit}>
<View style={styles.btnArea}>
<Text style={styles.btnText}>Quebrar o Biscoito</Text>
</View>
</TouchableOpacity>
<TouchableOpacity style={styles.reloadButton} onPress={reloadCoockie}>
<View style={styles.btnArea}>
<Text style={styles.reloadbtnText}>Reniciar o Biscoito</Text>
</View>
</TouchableOpacity>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#f5fffb',
},
img: {
width: 230,
height: 230,
},
phrase: {
fontSize: 20,
color: '#dd7b22',
margin: 20,
fontStyle: 'italic',
textAlign: 'center',
},
button: {
height: 50,
width: 230,
borderColor: '#dd7b22',
borderWidth: 2,
borderRadius: 25,
},
btnArea: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
btnText: {
fontSize: 17,
fontWeight: 'bold',
color: '#dd7b22',
},
reloadButton: {
height: 50,
width: 230,
borderWidth: 2,
borderRadius: 25,
marginTop: 15,
borderColor: '#121212',
},
reloadbtnText: {
fontSize: 17,
fontWeight: 'bold',
color: '#121212',
},
});