TIC-TAC-TOE React Native App
Written by Fabian Frey
How to start
To start the app, expo-cli must be installed. After that just use following commands in the project folder
yarn install npx expo start
The app demonstrates the separation of React View Components and business logic.
The logic of the game tic-tac-toe is written in the
It contains the current game state, the current game field, and all actions of both players.
The interface to the view is the current game state, the current game field, and the playerAction function,
which reacts to the user’s input. It reacts to a move and updates all necessary components like the game field.
List of all Game States:
WON_PLAYER1(Player1 won, Game is finished)
WON_PLAYER2(Player2 won, Game is finished)
DRAW(Draw, Game is finished)
INIT(Initalisation of the Game)
The connection between the View (
TTTGameScreen) and the
GameServie is the hook
This architecture allows us to add new functionality very fast and easy. For instance, you can start a new game,
just by initiating a new GamerService (as is shown in
In addition, testing the logic is easier, because we do not need to render a React Component to test any business logic.
The prefix TTT is short for TicTacToe.