React_Native_Zikir_Matik/App.js at main · codedByCan/React_Native_Zikir_Matik · 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
import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View, Button, Alert, Pressable } from "react-native";
import React, { useState } from "react";

export default function App() {
  var [zikir, setZikir] = useState(0);
  return (
    <View style={styles.container}>
      <Text
        style={{
          fontSize: 20,
          fontWeight: "bold",
          textAlign: "center",
          margin: 20,
        }}
      >
        Zikir Sayısı: {zikir}
      </Text>

      <Pressable
        style={{ ...styles.button, backgroundColor: "red" }}
        onPress={() => {
          if (zikir < 0)
            return Alert.alert("Günah", "Zikir sayısı 0 dan küçük olamaz", [
              { text: "Tövbe et", onPress: () => setZikir(0) },
            ]);
          setZikir(zikir--);
        }}
      >
        <Text style={styles.text}>-</Text>
      </Pressable>

      <Pressable
        style={{ ...styles.button, backgroundColor: "green" }}
        onPress={() => {
          setZikir(zikir++);
        }}
      >
        <Text style={styles.text}>+</Text>
      </Pressable>

      <Pressable
        style={{ ...styles.button, backgroundColor: "blue" }}
        onPress={() => {
          setZikir(0);
        }}
      >
        <Text style={styles.text}>Sıfırla</Text>
      </Pressable>

      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  button: {
    alignItems: "center",
    justifyContent: "center",
    paddingVertical: 12,
    paddingHorizontal: 32,
    borderRadius: 4,
    elevation: 3,
    margin: 20,
  },

  text: {
    fontSize: 20,
    lineHeight: 21,
    fontWeight: "bold",
    letterSpacing: 0.25,
    color: "white",
  },

  container: {
    flex: 1,
    backgroundColor: "#fff",
    justifyContent: "center",
  },
});