

Once the project is created, open your package.json file and add the following to your dependencies: "dependencies" : Įxecute yarn install to install the dependencies. I wanted to gain experience in React Native and it seemed like a fun way to. Start by initializing a new React Native project: react -native init RNPong I started building JellyBean Jam as a volunteer project for Puppetry Arts LLC. You can find the code on this GitHub repo. For the rest of the tutorial, I’ll be referring to the object which the users will move as “plank”.

Once in the game, all the users have to do is land the ball on their opponent’s base and also prevent them from landing the ball on their base. The server is responsible for signaling for when an opponent is found and when the game starts. Users have to log in using a unique username before they can start playing the game. We’ll re-create the Pong game with React Native and Pusher Channels. Lastly, you’ll need an ngrok account, so you can use it for exposing the server to the internet. You can enable it from your app settings page. The only requirement is for the app to allow client events.
REACT NATIVE GAME HOW TO
So you should know how to create and set up a new app instance on their website. We’ll be using Pusher Channels in this tutorial. You can use excellent debugging and bug reporting. It helps to achieve the highest results for both React and Native platforms. React JS supports game functionality designed with native code to customize. React Native is known for creating an enticing platform specific UI.
REACT NATIVE GAME UPDATE
We’ll be using the following package versions:įor compatibility reasons, I recommend you to install the same package versions used in this tutorial before trying to update to the latest ones. React JS facilitates cross-platform development for web and mobile games. We’ll also be using Node, but knowledge is optional since we’ll only use it minimally. The idea of the game is to simply kill all of the randomly appearing animals on the screen by tapping on them. Prerequisitesīasic knowledge of React Native and React Navigation is required. React native is of course not made for developing games, however, I thought of a simple idea that requires no physics, 3D graphics or any fancy stuff, just simple user interactions. So Pong is basically the video game equivalent of the sport. It’s another term for table tennis in which two players hit a lightweight ball back and forth across a table using small rackets. For those unfamiliar, Pong is short for Ping-pong. It provides a core set of platform agnostic native components like View, Text, and Image that map directly to the platform’s native UI building blocks. In this tutorial, we’ll re-create the classic video game “Pong”. React Native lets you create truly native apps and doesnt compromise your users experiences. You will need Node 11+, Yarn and React Native 0.57.8+ installed on your machine.
