Game of Life with React Native Easy Grid

kacha mukabe
Aug 31, 2018 · 2 min read
credit: Toptal

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.

Let’s start

First make sure you have all the react-native tools installed on your machine.

create-react-native-app GameOfLife && cd GameOfLife
npm install react-native-easy-grid

Essential functions

After run the above , open App.js and create the following class and import Easy-Grid:

The above code sets up the board, then I created two functions:

  1. To check for the number of neighbours each cell has

2. A function to get the next generation of cells

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.

Let’s Render the Grids

Finally I render the grid to the screen.

Voila or Tada

Game of Life gif

Conclusion

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).

Thanks for reading

Developer Circle Lusaka

This is the official medium Publication for Developer Circles Lusaka

kacha mukabe

Written by

Developer Circle Lusaka

This is the official medium Publication for Developer Circles Lusaka

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade