Build a Tic Tac Toe with React Native
Let’s build a game using React Native in 3 hours.
Why React Native? How to start using it?
Here is the blog I wrote yesterday for answering these two questions.
In addition to the blog, here is a book I recommend you to have a look: Learning React Native: Building Native Mobile Apps with JavaScript by Bonnie Eisenman, this book helped me a lot.
Let’s plan
The tricky part of building this application to me is the “Components”(Since I still not familiar with React Native).
Once components are built, no React Native specific API is needed in “State management” part(game logic); we even can separate the game logic for using it when building a web application.
So, let’s start.
Game board
There are two solutions for drawing a board:
1. Using an image.
2. Drawing it from components.
I chose the second one(just for practicing styles in React Native, when it comes to production project, I recommend you use images).
CSS is well-supported in React Native, which means we can use border, position, even transform; they are three key properties for implement the board.
Setting up border:
Drawing lines inner the board:
After we finish the first inner-line, we can reuse the style.
Circle
After we finish the game board, we can place circles and crosses inside the board. Let’s focus on circle only, cross is nearly the same, you can check out the code in Github repo.
My solution is create two circles, larger one use a color different than board’s background color.
Touch event
How can we find positions user touches? If you are checking components specification in React Native’s document maybe you will get puzzled by there is no such a component which name is “Button”.
In React Native, instead of using button, we are can use Touchable`X`(X indicate the effects when user touching components).
For the game board, it’s weird to me if there are some effects when I touching it, so I selected the TouchableWithoutFeedback.
What’s next? The game logic! As I said, that’s not related to React Native(although it’s even more interesting), you can check out the code or try it yourself 😃.
I recorded a video about making this application(Sorry for it’s 2 hours totally). Please tell me your suggestions, thank you in advance!
Thanks for your time!
