Create a Tic-Tac-Toe using React-Native

In this article, we will learn how to build a Tic-Tac-Toe game using React-Native. React Native enables the application to run a single code base on multiple platforms like Android, IOS, etc. Developing the TicTacToe game application allows us to learn basic styling, app logic, user interaction, and more which will help improve our basic foundation in React-Native.

Preview of final output: Let us have a look at how the final application will look like.

Tic Tac Toe using React Native

Prerequisites:

• NodeJs
• React Native
• React Native Components
• React Event Handling
• Expo CLI

Approach:

The react component named “TicTacToe” is created to implement game logic, board, styling and event handling. The game logic includes handling user interactions like clicking squares on the board and restart game button. The game logic also includes the logic to check winner at every move and restart the game. By clicking the restart button, the game will be reset. When there is no more moves to do from both the players then the game will be draw.

Rules of Tic-Tac-Toe:

• It is a game played on 3 X 3 grid.
• One player should pick symbol ‘X’ another player should pick ‘O’.
• The players can mark their symbols on the grid alternatively.
• The player who marked 3 in a row horizontally, vertically or diagonally at first will be considered as winner.
• If there is no more moves to do from both the players then the game is draw.

Steps to create the project:

Step 1: Create React-Native Application using the following command

npx create-expo-app tictactoe

Step 2: Open the React Native project folder using “cd” command.

cd tictactoe

Step 3: Install “npm install react-native-paper” package using the following npm install command.

npm install react-native-paper

Project Structure:

Project Structure

Example: Write the below code in the App.js file.

Javascript

import React, { Component } from 'react';import {    View, Text, TouchableOpacity,    Button, StyleSheet} from 'react-native';import {    Provider as PaperProvider, Appbar} from 'react-native-paper';class TicTacToe extends Component {    constructor(props) {        super(props);        this.state = {            squares: Array(9).fill(null),            xIsNext: true,        };    }    // Function to handle clicks on the squares    handleClick(i) {        const squares = this.state.squares.slice();        if (calculateWinner(squares) || squares[i]) {            return;        }        squares[i] =            this.state.xIsNext ? 'X' : 'O';        this.setState({            squares: squares,            xIsNext: !this.state.xIsNext,        });    }    // Function to restart the game    restartGame() {        this.setState({            // Set default values to reset the game            squares: Array(9).fill(null),            xIsNext: true,        });    }    // Function to render the squares while playing    renderSquare(i) {        return (            // render individual squares            <TouchableOpacity                style={styles.square}                onPress={() => this.handleClick(i)}            >                <Text style={styles.squareText}>                    {this.state.squares[i]}                </Text>            </TouchableOpacity>        );    }    // Function to render everything inside the component    render() {        const winner =            calculateWinner(this.state.squares);        let status;        // if someone won the game, change the status to winner        // if all the squares are filled and no is won, Display as draw!        if (winner) {            status = `Winner: ${winner}`;        } else if (this.state.squares.every((square) =>            square !== null)) {            status = 'Draw!';        } else {            status = `Next player:                 ${this.state.xIsNext ? 'X' : 'O'}`;        }        // return entire game screen        return (            <View style={styles.container}>                <Text style={styles.title}>                    Tic Tac Toe                </Text>                <View style={                    {                        flexDirection: 'row',                        flexWrap: 'wrap'                    }                }>                    {this.renderSquare(0)}                    {this.renderSquare(1)}                    {this.renderSquare(2)}                </View>                <View                    style={                        {                            flexDirection: 'row',                            flexWrap: 'wrap'                        }                    }>                    {this.renderSquare(3)}                    {this.renderSquare(4)}                    {this.renderSquare(5)}                </View>                <View                    style={                        {                            flexDirection: 'row',                            flexWrap: 'wrap'                        }                    }>                    {this.renderSquare(6)}                    {this.renderSquare(7)}                    {this.renderSquare(8)}                </View>                <Text style={styles.status}>                    {status}                </Text>                <Button                    title="Restart Game"                    onPress={() => this.restartGame()}                    style={styles.restartButton}                />            </View>        );    }}// Stylingsconst styles = StyleSheet.create({    container: {        flex: 1,        justifyContent: 'center',        alignItems: 'center',        backgroundColor: '#FFFFE0',    },    title: {        fontSize: 24,        marginBottom: 20,    },    square: {        width: 100,        height: 100,        borderWidth: 1,        borderColor: 'black',        justifyContent: 'center',        alignItems: 'center',    },    squareText: {        fontSize: 40,    },    status: {        marginVertical: 20,        fontSize: 20,    },    restartButton: {        marginTop: 10,    },});// Function to determine the winner function calculateWinner(squares) {    const lines = [        [0, 1, 2],        [3, 4, 5],        [6, 7, 8],        [0, 3, 6],        [1, 4, 7],        [2, 5, 8],        [0, 4, 8],        [2, 4, 6],    ];    for (let i = 0; i < lines.length; i++) {        const [a, b, c] = lines[i];        if (squares[a] &&            squares[a] === squares[b] &&            squares[a] === squares) {            return squares[a];        }    }    return null;}// Return the entire componenentexport default function App() {    return (        <PaperProvider>            <Appbar.Header>                <Appbar.Content                    title="Tic Tac Toe" />            </Appbar.Header>            <TicTacToe />        </PaperProvider>    );}

Steps to run the application:

Step 1: Navigate to terminal/command prompt and run the following command to run the Tic Tac Toe application.

npx expo start

Step 2: Based on your operating system type the following command:

• To run the application in android device.

npx react-native run-android

• To run the application in iOS device

npx react-native run-ios

Output:

TicTacToe using React-Native demo