First commit and minesweeper has been created

App.js

@@ -1,10 +1,20 @@
 import { StatusBar } from 'expo-status-bar';
 import { StyleSheet, Text, View } from 'react-native';
+import { configureStore } from '@reduxjs/toolkit';
+import { Provider } from 'react-redux';
+
+import squares from './Minesweeper/squares';
+
+import Minesweeper from './Minesweeper';
 
 export default function App() {
+  const store = configureStore({ reducer: { squares } });
+
   return (
     <View style={styles.container}>
-      <Text>Open up App.js to start working on your app!</Text>
+      <Provider store={store}>
+        <Minesweeper />
+      </Provider>
       <StatusBar style="auto" />
     </View>
   );

Minesweeper/Square.jsx

@@ -0,0 +1,12 @@
+import { Pressable, Text } from 'react-native';
+
+const Square = ({ square: { hasMine, minesAround, cleared }, clearSquare }) => {
+  const title = hasMine ? 'x' : minesAround;
+  return (
+    <Pressable onPress={clearSquare} style={{flexDirection: 'row', backgroundColor: 'gray', border: 'solid 2px black'}}>
+      <Text style={{fontFamily: 'monospace'}}>{cleared ? title : ' '}</Text>
+    </Pressable>
+  );
+}
+
+export default Square;

Minesweeper/index.jsx

@@ -0,0 +1,38 @@
+import { Button, View, Text } from 'react-native';
+import { useEffect, useState } from 'react';
+import { connect } from 'react-redux';
+
+import { resetSquares, clearSquare } from './squares';
+
+import Square from './Square';
+
+const Minesweeper = ({ squares, resetSquares, clearSquare }) => {
+  useEffect(() => void resetSquares(), []);
+  const [gameover, setGameover] = useState(false);
+
+  const pressSquare = ([x, y]) => {
+    clearSquare([x, y])
+    if (squares[x][y].hasMine) setGameover(true);
+  };
+
+  const newGame = () => {
+    resetSquares();
+    setGameover(false);
+  };
+
+  return (
+    <View>
+      {gameover && <Text>Game Over</Text>}
+      <Button title='Reset' onPress={() => newGame()} />
+      {squares.map((row, r) => (
+        <View key={r} style={{flexDirection: 'row'}}>
+          {row.map((square, c) => (
+            <Square square={square} clearSquare={() => !gameover && pressSquare([r, c])} key={c} />
+          ))}
+        </View>
+      ))}
+    </View>
+  );
+};
+
+export default connect(({ squares }) => ({ squares }), { resetSquares, clearSquare })(Minesweeper);

Minesweeper/squares.js

@@ -0,0 +1,61 @@
+import {createSlice} from '@reduxjs/toolkit';
+
+const ten = [1,2,3,4,5,6,7,8,9,10];
+const createArrayTo = (length, value={}) => {
+  const arr = [];
+  for(let i=0; i!=length; ++i)  arr.push(value);
+  return arr;
+};
+
+const squares = createSlice({
+  name: 'squares',
+  initialState: createArrayTo(10, createArrayTo(10)),
+  reducers: {
+    resetSquares: state => {
+      // clear
+      state.forEach(squares => squares.forEach(square => {
+        square.hasMine = false;
+        square.minesAround = 0;
+        square.cleared = false;
+      }))
+
+      // add new mines
+      let minesLeft = 10;
+      while(minesLeft > 0) {
+        const x = Math.floor(Math.random() * 10)
+        const y = Math.floor(Math.random() * 10);
+
+        if(!state[x][y].hasMine) {
+          state[x][y].hasMine = true;
+
+          // Add to minesAround
+          for(let i = x - 1; i <= x + 1; ++i)
+            for(let k = y - 1; k <= y + 1; ++k) // TODO: no optional chaining in react native??!?!? 
+              state[i] && state[i][k] && ++state[i][k].minesAround;
+
+          --minesLeft;
+        }
+      }
+    },
+
+    clearSquare: (state, { payload: [x, y] }) => {
+      const clearSquaresAroundIfZero = (state, x, y) => {
+        if (state[x][y].cleared) return;
+
+        state[x][y].cleared = true;
+
+        // if zero, then reveal all connecting zeros
+        if (state[x][y].minesAround === 0) {
+          for(let i = x - 1; i <= x + 1; ++i)
+            for(let k = y - 1; k <= y + 1; ++k)
+              state[i] && state[i][k] && clearSquaresAroundIfZero(state, i, k)
+        }
+      };
+
+      clearSquaresAroundIfZero(state, x, y);
+    },
+  },
+});
+
+export const { resetSquares, clearSquare } = squares.actions;
+export default squares.reducer;