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. And the final product (which has been sped up slightly).
Top comments (1)
react-native-easy-grid doesn't do anything of what the docs says it does. It's useless