Game of Life with React Native easy grid
Tags: reactnative, javascript, gameoflife
Published: 2018-08-31 01:25:27

---
title: Game of Life with React Native easy grid
published: true
description: Implementing Conways Game of Life with create-react-native-app and react-native easy grid.
tags: react-native, javascript, game of life
---
I have been learning react native over the past month or two and I decided as a way to learn and familiarise myself with it by making some fun little projects.
For my first project I created Conway's Game of Life using react native easy grid and create-react-native-app. First create a CRNA app and install the grid library.
create-react-native-app GameOfLife && cd GameOfLife
npm install react-native-easy-grid
Then in App.js import easy grid and create the following class:
```
import React from 'react';
import { StyleSheet, View} from 'react-native';
import {Col, Row, Grid} from 'react-native-easy-grid';
export default class App extends React.Component {
  gridNum = 40; // The number of rows and columns in our grid
  constructor(props){
    super(props);
    let newBoard = this.setupBoard() 
    this.state = {
      board: newBoard
    }
  }
  setupBoard = () => {
    // Create a two dimensional array to represent the grid
    let board = new Array(this.gridNum)
    for (i = 0; i < this.gridNum; i++){
      board[i] = new Array(this.gridNum)
    }
    for(x=0; x< this.gridNum; x++){
      for(y=0; y < this.gridNum; y++){
        // Creates a grid square object that holds a random number 
        // between 0 for a dead cell and 1 for alive 
        // n represents the number of neighbours a cell has
        board[x][y] = {
          cell:Math.floor(Math.random()*2),
          n:0
        }
      }
    }
    return board
  }


  render(){
    return(
      <Grid>
        // Code To be Done
      </Grid>
    );
  }
}
```
The above code sets up the board, then I created two functions:
To check for the number of neighbours each cell has and,
A function to get the next generation of cells.
```
checkNeighbours = () => {
  let oldBoard = this.state.board
  // Ignores the columns and rows on the outermost edges
  for(x=1; x< this.gridNum-1; x++){
    for(y=1; y < this.gridNum-1; y++){
      \\ For every grid cell check how many neighbours it has
      for(i=-1; i< 2; i++){
        for(j=-1; j < 2; j++){
          oldBoard[x][y].n += oldBoard[(x+i)][(y+j)].cell
        }
      }
      \\ Delete the value of the current cell as it was counted in  
      \\ the above calculation
      oldBoard[x][y].n -= oldBoard[x][y].cell
    }
  }
  this.setState({board: oldBoard})
}
newBoard = () => {
  let oldBoard = this.state.board
  let board = this.setupBoard()
  // Set all new board values to zero
  for(let a = 0; a < this.gridNum; a++){
    for(let b=0; b<this.gridNum;b++){
      board[a][b] = {cell:0, n:0}
    }
  }
  for(x=1; x< this.gridNum-1; x++){
    for(y=1; y < this.gridNum-1; y++){
      if((oldBoard[x][y].cell == 1) && oldBoard[x][y].n < 2){
        board[x][y].cell = 0
      } else if((oldBoard[x][y].cell == 1) && oldBoard[x][y].n > 3){
        board[x][y].cell = 0
      } else if((oldBoard[x][y].cell == 0) && oldBoard[x][y].n == 3)
      {
        board[x][y].cell = 1
      } else if((oldBoard[x][y].cell == 1)&& (oldBoard[x][y].n == 3 
                 || oldBoard[x][y].n == 2)){
        board[x][y].cell = 1
      } else{
        board[x][y].cell = oldBoard[x][y].cell
      }
    }
  }
  this.setState({board: board})
}
For the game of life to update these two functions above must be called continuously. For this I created a helper function called "run" and used setInterval() to have it called every second.
constructor(props){
  ... // Above code skipped for brevity
  setInterval(this.run, 1000);
}
run = () => {
  this.checkNeighbours()
  this.newBoard()
}
```
Finally I render the grid to the screen.
```
render(){
  return(
    <Grid>
      {this.state.board.map((row, key)=>{
        return <Col key={key}>{row.map((cell, key)=>{
          return <Row style= 
            // If cell is 1(alive) render a color there
            {{backgroundColor:cell.cell==1?'#00FFFF':'#FFF', 
            margin:1}} key={key}></Row>
        })}</Col>
      })}
    </Grid>
  );
}
```
I know this could probably be done more elegantly in something like three.js but it was a fun experiment. Here is a link to the [Github repository](https://github.com/kachaMukabe/30DaysOfReactNative/tree/master/GameOfLife). And the final product (which has been sped up slightly).

![Game of Life react native app gif](https://thepracticaldev.s3.amazonaws.com/i/v2i95vkxjq5m83j0bhol.gif)