app.js

import React, { useState } from "react";
import {
  StyleSheet,
  Text,
  View,
  Button,
  ToastAndroid,
  TouchableWithoutFeedback
} from "react-native";
var moment = require("moment");
import * as Animatable from "react-native-animatable";

let matrix = [["", "", ""], ["", "", ""], ["", "", ""]];

export default function App() {
  const [date, setDate] = useState(null);
  const [playerMatrix, setPlayerMatrix] = useState(matrix);

  const renderIcon = (row, column) => {
    // if the cell has x we will render x and if it has o we will render o
    if (playerMatrix[row][column] === "x") {
      return <Text style={styles.icon}>❌</Text>;
    } else if (playerMatrix[row][column] === "o") {
      return <Text style={styles.icon}>⭕️</Text>;
    } else {
      return <Text>ox</Text>
    }
  };
  const handleClick = (row, column) => {
    let newMatrix = playerMatrix;
    newMatrix[row][column] = "x";
    setPlayerMatrix(newMatrix);
    console.log(newMatrix);
  };
  React.useEffect(() => {
    handleClick(1, 1);
    setDate(moment().format("hh:mm:ss a"));

    setInterval(() => {
      setDate(moment().format("hh:mm:ss a"));
    }, 1000);
  }, []);

  return (
    <View style={styles.container}>
      <View style={{ flexDirection: "row" }}>
        <TouchableWithoutFeedback>
          <View style={styles.box} onTap>
            {renderIcon(0, 0)}
          </View>
        </TouchableWithoutFeedback>
        <TouchableWithoutFeedback>
          <View style={{ ...styles.box, ...styles.middleBox }}>
            {renderIcon(0, 1)}
          </View>
        </TouchableWithoutFeedback>
        <TouchableWithoutFeedback>
          <View style={styles.box}>{renderIcon(0, 2)}</View>
        </TouchableWithoutFeedback>
      </View>
      <View
        style={{
          flexDirection: "row",
          borderTopWidth: 2,
          borderBottomWidth: 2
        }}
      >
        <TouchableWithoutFeedback>
          <View style={styles.box}>{renderIcon(1, 0)}</View>
        </TouchableWithoutFeedback>
        <TouchableWithoutFeedback>
          <View style={{ ...styles.box, ...styles.middleBox }}>
            {renderIcon(1, 1)}
          </View>
        </TouchableWithoutFeedback>
        <TouchableWithoutFeedback>
          <View style={styles.box}>{renderIcon(1, 2)}></View>
        </TouchableWithoutFeedback>
      </View>
      <View style={{ flexDirection: "row" }}>
        <TouchableWithoutFeedback>
          <View style={styles.box}>{renderIcon(2, 0)}</View>
        </TouchableWithoutFeedback>
        <TouchableWithoutFeedback>
          <View style={{ ...styles.box, ...styles.middleBox }}>
            {renderIcon(2, 1)}
          </View>
        </TouchableWithoutFeedback>
        <TouchableWithoutFeedback>
          <View style={styles.box}>{renderIcon(2, 2)}</View>
        </TouchableWithoutFeedback>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center"
  },
  text: {
    color: "#4A90E2",
    fontSize: 34,
    textTransform: "uppercase",
    padding: 10
  },
  box: {
    width: 100,
    height: 100,
    flex: 0,
    alignItems: "center",
    justifyContent: "center"
  },
  middleBox: {
    borderRightWidth: 2,
    borderLeftWidth: 2
  },
  icon: {
    fontSize: 60
  }
});