Initial commit

App.js

-import { StatusBar } from 'expo-status-bar';
-import { StyleSheet, Text, View } from 'react-native';
+import { Text, TouchableOpacity, Button } from "react-native";
+import { VStack, HStack, Flex } from "react-native-flex-layout";
+import { useState } from "react";
+import kazananKim from "./kazanankim";
 
-export default function App() {
+function Kutu({ value, onPress, disabled, highligted }) {
   return (
-    <View style={styles.container}>
-      <Text>Open up App.js to start working on your app!</Text>
-      <StatusBar style="auto" />
-    </View>
+    <TouchableOpacity disabled={disabled} onPress={onPress}>
+      <Flex
+        w={90}
+        h={90}
+        center
+        style={{ backgroundColor: highligted ? "lightgreen" : "gray" }}
+      >
+        <Text style={{ fontSize: 50 }}>{value}</Text>
+      </Flex>
+    </TouchableOpacity>
   );
 }
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#fff',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});
+function App() {
+  const [baslayanOyuncu, setBaslayanOyuncu] = useState("X");
+
+  const [alan, setAlan] = useState(Array(9).fill(null));
+
+  const [highligted, setHighlighted] = useState([]);
+
+  const [kazanan, setKazanan] = useState(null);
+
+  const handlePress = (index) => {
+    const newAlan = [...alan];
+    newAlan[index] = baslayanOyuncu;
+    setAlan(newAlan);
+
+    const kazananSatir = kazananKim(newAlan);
+    if (kazananSatir) {
+      setHighlighted(kazananSatir);
+      setKazanan(baslayanOyuncu);
+      alert(`${baslayanOyuncu} kazandı.`);
+    }
+
+    setBaslayanOyuncu((prev) => (prev === "X" ? "O" : "X"));
+  };
+
+  const getKutu = (index) => (
+    <Kutu
+      value={alan[index]}
+      onPress={() => handlePress(index)}
+      highligted={highligted.includes(index)}
+      disabled={kazanan || alan[index]}
+    />
+  );
+
+  const handleReset = () => {
+    setBaslayanOyuncu("X");
+    setAlan(Array(9).fill(null));
+    setHighlighted([]);
+    setKazanan(null);
+  };
+
+  return (
+    <VStack fill center spacing={2}>
+      <Text style={{ fontSize: 40 }}>"{baslayanOyuncu}" Oynuyor...</Text>
+      <HStack spacing={2} shouldWrapChildren>
+        {getKutu(0)}
+        {getKutu(1)}
+        {getKutu(2)}
+      </HStack>
+      <HStack spacing={2} shouldWrapChildren>
+        {getKutu(3)}
+        {getKutu(4)}
+        {getKutu(5)}
+      </HStack>
+      <HStack spacing={2} shouldWrapChildren>
+        {getKutu(6)}
+        {getKutu(7)}
+        {getKutu(8)}
+      </HStack>
+      <Button title="Reset" onPress={handleReset} />
+    </VStack>
+  );
+}
+
+export default App;

kazanankim.js

+function kazananKim(alan) {
+  const olasilik = [
+    [0, 1, 2],
+    [3, 4, 5],
+    [6, 7, 8],
+    [0, 3, 6],
+    [1, 4, 7],
+    [2, 5, 8],
+    [0, 4, 8],
+    [2, 4, 7],
+  ];
+
+  return olasilik.find(([x, y, z]) => {
+    if (alan[x] !== null && alan[x] === alan[y] && alan[x] === alan[z]) {
+      return true;
+    }
+    return false;
+  });
+}
+
+export default kazananKim;

package-lock.json

@@ -11,7 +11,8 @@
         "expo": "~47.0.5",
         "expo-status-bar": "~1.4.2",
         "react": "18.1.0",
-        "react-native": "0.70.5"
+        "react-native": "0.70.5",
+        "react-native-flex-layout": "^0.1.5"
       },
       "devDependencies": {
         "@babel/core": "^7.12.9"
@@ -9947,6 +9948,15 @@
         "nullthrows": "^1.1.1"
       }
     },
+    "node_modules/react-native-flex-layout": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/react-native-flex-layout/-/react-native-flex-layout-0.1.5.tgz",
+      "integrity": "sha512-DrLir5Wl0RhgJXHeDBSaa1Y1LdpNuoz0PEe5E1T1+xVWt2DAz/r+1N8bnhtVkTKJE6WrH6jIH2hoe8kogR0X+w==",
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
     "node_modules/react-native-gradle-plugin": {
       "version": "0.70.3",
       "resolved": "https://registry.npmjs.org/react-native-gradle-plugin/-/react-native-gradle-plugin-0.70.3.tgz",
@@ -19516,6 +19526,12 @@
         "nullthrows": "^1.1.1"
       }
     },
+    "react-native-flex-layout": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/react-native-flex-layout/-/react-native-flex-layout-0.1.5.tgz",
+      "integrity": "sha512-DrLir5Wl0RhgJXHeDBSaa1Y1LdpNuoz0PEe5E1T1+xVWt2DAz/r+1N8bnhtVkTKJE6WrH6jIH2hoe8kogR0X+w==",
+      "requires": {}
+    },
     "react-native-gradle-plugin": {
       "version": "0.70.3",
       "resolved": "https://registry.npmjs.org/react-native-gradle-plugin/-/react-native-gradle-plugin-0.70.3.tgz",

package.json

@@ -12,7 +12,8 @@
     "expo": "~47.0.5",
     "expo-status-bar": "~1.4.2",
     "react": "18.1.0",
-    "react-native": "0.70.5"
+    "react-native": "0.70.5",
+    "react-native-flex-layout": "^0.1.5"
   },
   "devDependencies": {
     "@babel/core": "^7.12.9"

paket yükleme.txt

+terminale 
+npm install react-native-flex-layout
+yarn kullananlar için ise
+yarn add react-native-flex-layout