-
Notifications
You must be signed in to change notification settings - Fork 0
/
App.jsx
95 lines (91 loc) · 2.26 KB
/
App.jsx
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
import React, { useState } from "react";
import { ImageBackground, View } from "react-native";
import background from "./assets/kitten.jpg";
import * as eva from "@eva-design/eva";
import {
ApplicationProvider,
Button,
Card,
Input,
Text,
} from "@ui-kitten/components";
export default () => {
const [fav, setFav] = useState("");
const [num, setNum] = useState("");
const [luv, setLuv] = useState("");
return (
<ApplicationProvider {...eva} theme={eva.dark}>
<ImageBackground
source={background}
style={{
height: "100%",
display: "flex",
justifyContent: "center",
alignItems: "center",
}}
>
<Card
header={Header}
style={{
width: 500,
maxWidth: "100%",
}}
disabled
>
<Input
label="Describe your favorite cat"
placeholder="Type here..."
value={fav}
onChangeText={(text) => {
setFav(text);
}}
/>
<Separator />
<Input
label="How many cats do you want?"
placeholder="Give a number..."
value={num}
onChangeText={(text) => {
setNum(text.replace(/[^0-9]/g, ""));
}}
keyboardType="number-pad"
/>
<Separator />
<Button
onPress={() => {
if (fav !== "" && num !== "") {
setLuv(fav.length * Number(num));
} else {
setLuv("Fill in the important form above first.");
}
}}
>
Calculate your love for Cats
</Button>
{!!luv && (
<>
<Separator />
<Text
category="s1"
style={{
textAlign: "center",
}}
>
{luv}
</Text>
</>
)}
</Card>
</ImageBackground>
</ApplicationProvider>
);
};
const Separator = () => {
return <View style={{ margin: 8 }} />;
};
const Header = (props) => (
<View {...props}>
<Text category="h6">Catculator</Text>
<Text category="s1">Purr purr</Text>
</View>
);