IGTechTeam

React Native is a popular open-source library for mobile phones for building user interfaces with JavaScript, and it runs on React. You may have come across several tutorials on React Native. But this time, let's do different. Let's learn through a project. I have made a Ludo Board with React Native for mobile phones. Let's deep dive into that.

Steps

1. The first step is to install React Native and create an app

npx create-expo-app ludoBoard

When you run this command, the default folder structure will be created.

2. Second, download Android Studio, create a new device and start an emulator. Take a look at the video above for more information.

Initial setup in your device

Run the program with the below command:

npm start

You can download Expo Go in your Android application from a Play Store and visualize the output there or download a specified emulator based on your device. You can download an emulator on your OS or your mobile phone (Android or IOS).

Start with the default basic application

Let's try this basic code.

//app.js
import {
  Text,
  Platform,
  StatusBar,
  StyleSheet,
  SafeAreaView,
} from "react-native";

export default function App() {
  return (
    <SafeAreaView style={styles.container}>
      <Text>Hello world. IG Tech Team</Text>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    marginTop: Platform.OS === "android" ? StatusBar.currentHeight + 10 : 0,
  },
});

I have used SafeAreaView to display output in the safe area (preventing display output in the top status bar). This SafeAreaView might not be working as expected on all the devices. So, you can calculate the height of the Status bar and implement marginTop to display the output where you want.

Without wasting more time, let's deep dive into the implementation of the Ludo Board. I hope you have set up your emulator and initial code as I have mentioned above.

Implementation of Ludo Board

Are you familiar with HTML and CSS? If yes, then it will be straightforward to get this code. I first made a Ludo board with HTML and CSS and then converted that into React Native. Only some of the basics will be different; otherwise, everything will be almost similar.

You use the <div> tag to create a division in the HTML. Here in react native, you will be using the <View> tag. As you give a class name or ID to each of your divisions in HTML, here in react native, you can also similarly give the style. For example:

// Let's create a view 
<View style={styles.subVerticalPath}></View>

// CSS for that View section
export const styles = StyleSheet.create({
  subVerticalPath: {
    width: "33.33%",
    height: "16.667%",
    borderWidth: 1,
    borderColor: "#000",
  },
});

Adjust board size based on device

The size of the mobile phone will be different. So it is very important to adjust the size of the Ludo board accordingly. Here is how I managed to calculate the app dimension. Take a look.

//dimension.js
import { Dimensions } from "react-native";

const { width, height } = Dimensions.get("window");
const minScreenDimension = Math.min(width, height);

const containerWidth = minScreenDimension - 0.04 * minScreenDimension;
const bwidth = 0.1 * containerWidth - 3;

const fullCellWidth = (0.2 * containerWidth) / 3;
const cellWidth = fullCellWidth - 0.1 * fullCellWidth;

const appDimensions = {
  containerWidth,
  bwidth,
  cellWidth,
  minScreenDimension,
};

export default appDimensions;

This is just a sample of how you can adjust the dimensions. If you have any other method, you are free to implement that.

You can create a LudoGame function in your program and call that function in your main app.js file.

//screens/LudoGame.js
export default function LudoGame() {
  return (
    <View style={styles.wrapper}>
      <View style={styles.container}>
        {/* Container1 */}
        <View style={styles.playContainer}>
          <View style={[styles.startArea, styles.green]}>
            <View style={[styles.subStartArea, styles.white]}>
              <View style={[styles.subStartArea_View, styles.green]} />
              <View style={[styles.subStartArea_View, styles.green]} />
              <View style={[styles.subStartArea_View, styles.green]} />
              <View style={[styles.subStartArea_View, styles.green]} />
            </View>
          </View>
          <View style={styles.verticalPath}>
            {/* 1st line */}
            <View style={styles.subVerticalPath}></View>
            <View style={styles.subVerticalPath}></View>
            <View style={styles.subVerticalPath}></View>
            {/* 2nd line */}
            <View style={styles.subVerticalPath}></View>
            <View style={[styles.subVerticalPath, styles.yellow]}></View>
            <View
              style={[styles.subVerticalPath, styles.yellow, styles.centered]}
            >
              <Icon name="circle" size={cellWidth} color="#fff" />
            </View>
            {/* 3rd line */}
            <View style={[styles.subVerticalPath, styles.centered]}>
              <Icon name="star" size={cellWidth} color="#f6c700" />
            </View>
            <View style={[styles.subVerticalPath, styles.yellow]}></View>
            <View style={styles.subVerticalPath}></View>
            {/* 4th line */}
            <View style={styles.subVerticalPath}></View>
            <View style={[styles.subVerticalPath, styles.yellow]}></View>
            <View style={styles.subVerticalPath}></View>
            {/* 5th line */}
            <View style={styles.subVerticalPath}></View>
            <View style={[styles.subVerticalPath, styles.yellow]}></View>
            <View style={styles.subVerticalPath}></View>
            {/* 6th line */}
            <View style={styles.subVerticalPath}></View>
            <View style={[styles.subVerticalPath, styles.yellow]}></View>
            <View style={styles.subVerticalPath}></View>
          </View>
          <View style={[styles.startArea, styles.yellow]}>
            <View style={[styles.subStartArea, styles.white]}>
              <View style={[styles.subStartArea_View, styles.yellow]}></View>
              <View style={[styles.subStartArea_View, styles.yellow]}></View>
              <View style={[styles.subStartArea_View, styles.yellow]}></View>
              <View style={[styles.subStartArea_View, styles.yellow]}></View>
            </View>
          </View>
        </View>
        {/* Container2 */}
        <View style={styles.homeContainer}>
          <View style={styles.horizontalPath}>
            {/* 1st line */}
            <View style={styles.subHorizontalPath}></View>
            <View
              style={[styles.subHorizontalPath, styles.green, styles.centered]}
            >
              <Icon name="circle" size={cellWidth} color="#fff" />
            </View>
            <View style={styles.subHorizontalPath}></View>
            <View style={styles.subHorizontalPath}></View>
            <View style={styles.subHorizontalPath}></View>
            <View style={styles.subHorizontalPath}></View>
            {/* 2nd line */}
            <View style={styles.subHorizontalPath}></View>
            <View style={[styles.subHorizontalPath, styles.green]}></View>
            <View style={[styles.subHorizontalPath, styles.green]}></View>
            <View style={[styles.subHorizontalPath, styles.green]}></View>
            <View style={[styles.subHorizontalPath, styles.green]}></View>
            <View style={[styles.subHorizontalPath, styles.green]}></View>
            {/* 3rd line */}
            <View style={styles.subHorizontalPath}></View>
            <View style={styles.subHorizontalPath}></View>
            <View style={[styles.subHorizontalPath, styles.centered]}>
              <Icon name="star" size={cellWidth} color="#84c21f" />
            </View>
            <View style={styles.subHorizontalPath}></View>
            <View style={styles.subHorizontalPath}></View>
            <View style={styles.subHorizontalPath}></View>
          </View>
          <View style={styles.homePath}>
            <View style={styles.triangleContainer}>
              <View style={styles.triangleRight}></View>
              <View style={styles.triangleUp}></View>
              <View style={styles.triangleLeft}></View>
              <View style={styles.triangleDown}></View>
              <View style={styles.circle}>
                <View style={styles.text}>
                  <Text style={styles.textStyle}>Home</Text>
                </View>
              </View>
            </View>
          </View>
          <View style={styles.horizontalPath}>
            {/* 1st line */}
            <View style={styles.subHorizontalPath}></View>
            <View style={styles.subHorizontalPath}></View>
            <View style={styles.subHorizontalPath}></View>
            <View style={[styles.subHorizontalPath, styles.centered]}>
              <Icon name="star" size={cellWidth} color="#0092dc" />
            </View>
            <View style={styles.subHorizontalPath}></View>
            <View style={styles.subHorizontalPath}></View>
            {/* 2nd line */}
            <View style={[styles.subHorizontalPath, styles.blue]}></View>
            <View style={[styles.subHorizontalPath, styles.blue]}></View>
            <View style={[styles.subHorizontalPath, styles.blue]}></View>
            <View style={[styles.subHorizontalPath, styles.blue]}></View>
            <View style={[styles.subHorizontalPath, styles.blue]}></View>
            <View style={styles.subHorizontalPath}></View>
            {/* 3rd line */}
            <View style={styles.subHorizontalPath}></View>
            <View style={styles.subHorizontalPath}></View>
            <View style={styles.subHorizontalPath}></View>
            <View style={styles.subHorizontalPath}></View>
            <View
              style={[styles.subHorizontalPath, styles.blue, styles.centered]}
            >
              <Icon name="circle" size={cellWidth} color="#fff" />
            </View>
            <View style={styles.subHorizontalPath}></View>
          </View>
        </View>
        {/* Container3 */}
        <View style={styles.playContainer}>
          <View style={[styles.startArea, styles.red]}>
            <View style={[styles.subStartArea, styles.white]}>
              <View style={[styles.subStartArea_View, styles.red]}></View>
              <View style={[styles.subStartArea_View, styles.red]}></View>
              <View style={[styles.subStartArea_View, styles.red]}></View>
              <View style={[styles.subStartArea_View, styles.red]}></View>
            </View>
          </View>
          <View style={styles.verticalPath}>
            {/* 1st line */}
            <View style={styles.subVerticalPath}></View>
            <View style={[styles.subVerticalPath, styles.red]}></View>
            <View style={styles.subVerticalPath}></View>
            {/* 2nd line */}
            <View style={styles.subVerticalPath}></View>
            <View style={[styles.subVerticalPath, styles.red]}></View>
            <View style={styles.subVerticalPath}></View>
            {/* 3rd line */}
            <View style={styles.subVerticalPath}></View>
            <View style={[styles.subVerticalPath, styles.red]}></View>
            <View style={styles.subVerticalPath}></View>
            {/* 4th line */}
            <View style={styles.subVerticalPath}></View>
            <View style={[styles.subVerticalPath, styles.red]}></View>
            <View style={[styles.subVerticalPath, styles.centered]}>
              <Icon name="star" size={cellWidth} color="#dc2418" />
            </View>
            {/* 5th line */}
            <View style={[styles.subVerticalPath, styles.red, styles.centered]}>
              <Icon name="circle" size={cellWidth} color="#fff" />
            </View>
            <View style={[styles.subVerticalPath, styles.red]}></View>
            <View style={styles.subVerticalPath}></View>
            {/* 6th line */}
            <View style={styles.subVerticalPath}></View>
            <View style={styles.subVerticalPath}></View>
            <View style={styles.subVerticalPath}></View>
          </View>
          <View style={[styles.startArea, styles.blue]}>
            <View style={[styles.subStartArea, styles.white]}>
              <View style={[styles.subStartArea_View, styles.blue]}></View>
              <View style={[styles.subStartArea_View, styles.blue]}></View>
              <View style={[styles.subStartArea_View, styles.blue]}></View>
              <View style={[styles.subStartArea_View, styles.blue]}></View>
            </View>
          </View>
        </View>
      </View>
    </View>
  );
}

And your app.js file will be:

//app.js
import LudoGame from "./screens/LudoGame";

export default function App() {
  return <LudoGame />;
}

Here is the complete CSS code for this board:

//screens/MyStyles.js
export const styles = StyleSheet.create({
  wrapper: {
    alignItems: "center",
    justifyContent: "center",
    flex: 1,
    margin: 0,
    padding: 0,
    marginTop: Platform.OS === "android" ? StatusBar.currentHeight + 10 : 0,
  },
  container: {
    width: containerWidth,
    height: containerWidth,
    margin: 10,
  },
  playContainer: {
    width: "100%",
    height: "40%",
    flexDirection: "row",
  },
  homeContainer: {
    width: "100%",
    height: "20%",
    flexDirection: "row",
  },
  startArea: {
    width: "40%",
    height: "100%",
    alignItems: "center",
    justifyContent: "center",
    flex: 1,
  },
  verticalPath: {
    width: "20%",
    height: "100%",
    flexDirection: "row",
    flexWrap: "wrap",
  },
  horizontalPath: {
    width: "40%",
    height: "100%",
    flexDirection: "row",
    flexWrap: "wrap",
  },
  homePath: {
    width: "20%",
    height: "100%",
  },
  green: {
    backgroundColor: "#84c21f",
  },
  red: {
    backgroundColor: "#dc2418",
  },
  blue: {
    backgroundColor: "#0092dc",
  },
  yellow: {
    backgroundColor: "#f6c700",
  },
  white: {
    backgroundColor: "#fff",
  },
  subStartArea: {
    width: "70%",
    height: "70%",
    flexDirection: "row",
    flexWrap: "wrap",
  },
  subStartArea_View: {
    width: "35%",
    height: "35%",
    margin: "7.5%",
    shadowColor: "rgba(0, 0, 0, 0.16)",
    shadowOffset: {
      width: 0,
      height: 3,
    },
    shadowRadius: 6,
    shadowOpacity: 1,
    elevation: 3,
    backgroundColor: "white",
    transition: "all 0.3s",
    transform: [{ scaleX: 1.05 }],
  },
  subVerticalPath: {
    width: "33.33%",
    height: "16.667%",
    borderWidth: 1,
    borderColor: "#000",
  },
  subHorizontalPath: {
    height: "33.33%",
    width: "16.66%",
    borderWidth: 1,
    borderColor: "#000",
  },
  centered: {
    justifyContent: "center",
    alignItems: "center",
  },
  triangleContainer: {
    width: "100%",
    height: "100%",
    position: "relative",
    justifyContent: "center",
    alignItems: "center",
  },
  triangleRight: {
    width: 0,
    height: 0,
    backgroundColor: "transparent",
    borderStyle: "solid",
    borderLeftWidth: bwidth,
    borderTopWidth: bwidth,
    borderBottomWidth: bwidth,
    borderLeftColor: "#84c21f",
    borderTopColor: "transparent",
    borderBottomColor: "transparent",
    position: "absolute",
    left: 0,
  },
  triangleUp: {
    width: 0,
    height: 0,
    backgroundColor: "transparent",
    borderStyle: "solid",
    borderLeftWidth: bwidth,
    borderRightWidth: bwidth,
    borderBottomWidth: bwidth,
    borderLeftColor: "transparent",
    borderRightColor: "transparent",
    borderBottomColor: "#dc2418",
    position: "absolute",
    bottom: 0,
  },
  triangleLeft: {
    width: 0,
    height: 0,
    backgroundColor: "transparent",
    borderStyle: "solid",
    borderTopWidth: bwidth,
    borderRightWidth: bwidth,
    borderBottomWidth: bwidth,
    borderTopColor: "transparent",
    borderRightColor: "#0092dc",
    borderBottomColor: "transparent",
    position: "absolute",
    right: 0,
  },
  triangleDown: {
    width: 0,
    height: 0,
    backgroundColor: "transparent",
    borderStyle: "solid",
    borderTopWidth: bwidth,
    borderRightWidth: bwidth,
    borderLeftWidth: bwidth,
    borderTopColor: "#f6c700",
    borderRightColor: "transparent",
    borderLeftColor: "transparent",
    position: "absolute",
    top: 0,
  },
  circle: {
    height: "60%",
    width: "60%",
    position: "absolute",
    backgroundColor: "#fff",
    borderRadius: 50,
    justifyContent: "center",
    alignItems: "center",
  },
  text: {
    color: "#000",
  },
  textStyle: {
    fontSize: minScreenDimension * 0.03,
    fontWeight: "bold",
  },
});

This is how you can implement Ludo Board with React Native. I hope this tutorial will be helpful to you. If you find it difficult to get all those structures and code, you can find complete source code on GitHub. Here is the link. You can ask me in the comment section if you have any queries. Keep Learning.

React Native - Create Ludo Board for Mobile Phone

Steps

Initial setup in your device

Start with the default basic application

Implementation of Ludo Board

Leave a Comment

Comments