app/components - this is where the UI components of the app are stored.We’re using Expo’s vector icons so the file contains the name of the icon, the src (for example, FontAwesome), and the color we want to apply to it. In this case, we only have the cards.js file which contains the definition for the unique cards that the app uses. app/data - this is where hard-coded data is stored.This is very useful for changing the location of the cards that need to be guessed in the screen. It’s used to arrange the items in the array in random order. In this case, we only have the shuffleArray.js file. app/helpers - this is where the app’s helper functions are stored.Only a starter template with minimum output is available in the starter branch. We only have two screens: Login and Game. app/screens - this is where the app’s screens are stored.
#React native game github install
Next, install all the packages the app and the server depend on: yarn installīefore we proceed to actually code the app, let’s first take a quick look at the files and folders that are already available in the starter project: The app screens and the server component are where we will do most of the work. The starter branch contains all the screens of the app (Login and Game screen), helper functions, and the UI components that we will be using.
![react native game github react native game github](https://reactjsexample.com/content/images/2016/08/20160821143643.jpg)
So that we can focus on the main parts of the app, clone the app’s GitHub repo and switch to the starter branch: git clone https : / /github. This allows us to emit events directly from the app: On your Pusher account dashboard, create a new Pusher app and check the Enable client events in the app settings. You need to create a Pusher app instance so you can use Pusher’s services. You can view the app’s source code in this GitHub repo. When one of the players accumulates the maximum score (in this case it’s 12), both players are notified that one of them already won and the UI is reset: Here’s what the screen looks like while the two players are playing the game: Once a user has selected a pair, they will stay open for the rest of the game. Users can reveal the content of up to two cards before both of them closes. To play the game, users have to click on each one to reveal its content. By default, there will be a lot of question mark icons, these represent the cards that haven’t been opened yet: Once an opponent is found, both users are automatically navigated to the Game screen. When a user logs in, the app’s server component will pick two random users and they’re the ones who will play. When they open the app, users will be greeted by a login screen where they have to enter their username: We’re going to build a two-player memory game app. We’ll use it to create a Pusher app instance and expose the local Pusher server to the internet.
![react native game github react native game github](https://reactnativeexample.com/content/images/2018/05/react-native-game-engine.jpg)
![react native game github react native game github](https://miro.medium.com/max/532/1*m_ZipjWLlmqmLTjLuQ2PVA.gif)
Lastly, you also need a Pusher and ngrok account. These are the package versions used in creating the app: Log in to your Expo account on both the CLI and client apps.
#React native game github android
Be sure to install their Android or iOS client apps. To easily test the app on multiple devices, we’ll be using Expo to create it. Prerequisitesīasic knowledge of React Native is required. In this tutorial, we’ll build a realtime memory game app with React Native and Pusher Channels. Some knowledge of React Native development is required. You will need Node, Yarn, ngrok and Expo installed on your machine.