文字のサイズカラー、背景色などカスタマイズしましょう！

import React, { useState, useEffect, useRef } from 'react';
import {
  View,
  Text,
  Pressable,
  StyleSheet,
  Animated,
} from 'react-native';

const SIZE = 8;
const COLORS = ['#F45B69', '#4D96FF', '#FFD93D', '#6BCB77', '#9B5DE5'];

const createBoard = () => {
  return Array.from({ length: SIZE }, () =>
    Array.from({ length: SIZE }, () =>
      Math.floor(Math.random() * COLORS.length)
    )
  );
};

export default function App() {
  const [board, setBoard] = useState(createBoard);
  const [score, setScore] = useState(0);
  const [busy, setBusy] = useState(false);

  const scaleAnimations = useRef(
    Array.from({ length: SIZE }, () =>
      Array.from({ length: SIZE }, () => new Animated.Value(1))
    )
  ).current;

  const findGroup = (row, col) => {
    const color = board[row][col];

    if (color === null) {
      return [];
    }

    const group = [];
    const queue = [[row, col]];
    const visited = new Set();

    while (queue.length > 0) {
      const [r, c] = queue.shift();
      const key = `${r}-${c}`;

      if (visited.has(key)) {
        continue;
      }

      visited.add(key);

      if (
        r < 0 ||
        r >= SIZE ||
        c < 0 ||
        c >= SIZE ||
        board[r][c] !== color
      ) {
        continue;
      }

      group.push([r, c]);

      queue.push([r - 1, c]);
      queue.push([r + 1, c]);
      queue.push([r, c - 1]);
      queue.push([r, c + 1]);
    }

    return group;
  };

  const removeAndFall = (group) => {
    const nextBoard = board.map(row => [...row]);

    // 消す
    group.forEach(([row, col]) => {
      nextBoard[row][col] = null;
    });

    // 上から落とす
    for (let col = 0; col < SIZE; col++) {
      const colors = [];

      for (let row = SIZE - 1; row >= 0; row--) {
        if (nextBoard[row][col] !== null) {
          colors.push(nextBoard[row][col]);
        }
      }

      // 空いた部分を新しい色で補充
      while (colors.length < SIZE) {
        colors.push(Math.floor(Math.random() * COLORS.length));
      }

      for (let row = SIZE - 1; row >= 0; row--) {
        nextBoard[row][col] = colors[SIZE - 1 - row];
      }
    }

    setBoard(nextBoard);
  };

  const handlePress = (row, col) => {
    if (busy || board[row][col] === null) {
      return;
    }

    const group = findGroup(row, col);

    // 3個未満なら何もしない
    if (group.length < 3) {
      return;
    }

    setBusy(true);

    // 簡単な消えるアニメーション
    const animations = group.map(([r, c]) => {
      return Animated.timing(scaleAnimations[r][c], {
        toValue: 0,
        duration: 150,
        useNativeDriver: true,
      });
    });

    Animated.parallel(animations).start(() => {
      setScore(score + group.length * 10);

      removeAndFall(group);

      // アニメーション値を元に戻す
      group.forEach(([r, c]) => {
        scaleAnimations[r][c].setValue(1);
      });

      setBusy(false);
    });
  };

  const resetGame = () => {
    setBoard(createBoard());
    setScore(0);

    for (let row = 0; row < SIZE; row++) {
      for (let col = 0; col < SIZE; col++) {
        scaleAnimations[row][col].setValue(1);
      }
    }
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Simple Puzzle</Text>

      <Text style={styles.score}>Score : {score}</Text>

      {/* パズル外枠 */}
      <View style={styles.boardFrame}>
        {/* 外枠とパズルの間に余白を確保 */}
        <View style={styles.board}>
          {board.map((row, rowIndex) =>
            row.map((color, colIndex) => (
              <Pressable
                key={`${rowIndex}-${colIndex}`}
                onPress={() => handlePress(rowIndex, colIndex)}
                style={styles.cell}
              >
                <Animated.View
                  style={[
                    styles.block,
                    {
                      backgroundColor:
                        color === null ? 'transparent' : COLORS[color],
                      transform: [
                        {
                          scale:
                            scaleAnimations[rowIndex][colIndex],
                        },
                      ],
                    },
                  ]}
                />
              </Pressable>
            ))
          )}
        </View>
      </View>

      <Pressable style={styles.resetButton} onPress={resetGame}>
        <Text style={styles.resetText}>RESET</Text>
      </Pressable>

      <Text style={styles.help}>
        同じ色が3個以上つながっている場所をタップ
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#FFFFFF',
  },

  title: {
    fontSize: 28,
    fontWeight: 'bold',
    marginBottom: 8,
  },

  score: {
    fontSize: 18,
    marginBottom: 20,
  },

  // パズル全体の外枠
  boardFrame: {
    padding: 12,
    borderWidth: 2,
    borderColor: '#333333',
    borderRadius: 10,
    backgroundColor: '#EEEEEE',
  },

  // 実際のパズル部分
  board: {
    width: 320,
    height: 320,
    flexDirection: 'row',
    flexWrap: 'wrap',
    backgroundColor: '#CCCCCC',
    padding: 4,
  },

  // 1マス
  cell: {
    width: '12.5%',
    height: '12.5%',
    padding: 2,
  },

  // 色のブロック
  block: {
    flex: 1,
    borderRadius: 6,
  },

  resetButton: {
    marginTop: 24,
    paddingVertical: 10,
    paddingHorizontal: 28,
    borderRadius: 6,
    backgroundColor: '#333333',
  },

  resetText: {
    color: '#FFFFFF',
    fontSize: 16,
    fontWeight: 'bold',
  },

  help: {
    marginTop: 16,
    fontSize: 13,
    color: '#666666',
  },
});