RNPokeBattle

A two-player Pokemon battle game implemented with React Native and Pusher

Full tutorial is available here:

• Create a Pokemon battle game with React Native - Part 1: Practice mode
• Create a Pokemon battle game with React Native - Part 2: Two-player mode
• Create a Pokemon battle game with React Native - Part 3: Animations and sounds

Prerequisites

• React Native development environment or Expo
• Node.js
• Yarn
• Expo account
• Expo Android or iOS client app
• Pusher app instance
• Ngrok account

Getting Started

1. Clone the repo:

git clone https://github.com/anchetaWern/RNPokeBattle.git

2. Install the app dependencies:

cd RNPokeBattle
yarn install

3. Update Pusher config on src/screens/TeamSelectionScreen.js file:

componentDidMount() {
    this.pusher = new Pusher("YOUR PUSHER APP KEY", {
      authEndpoint: "YOUR_NGROK_URL/pusher/auth",
      cluster: "YOUR PUSHER APP CLUSTER",
      encrypted: true
    });
}

4. Install the server dependencies:

cd server
npm install

5. Update the .env file:

APP_ID=YOUR_PUSHER_APP_ID
APP_KEY=YOUR_PUSHER_APP_KEY
APP_SECRET=YOUR_PUSHER_APP_SECRET
APP_CLUSTER=YOUR_PUSHER_APP_CLUSTER
PORT=3000

6. Run the server:

node server.js

7. Download ngrok executable file.

8. Expose server using ngrok:

./ngrok authtoken YOUR_NGROK_AUTH_TOKEN
./ngrok http 3000

9. Copy the ngrok https URL and update the authEndpoint in the src/screens/TeamSelectionScreen.js file.

10. Run the app and open it in your Expo client app:

expo start

Built With

• React Native
• Pusher Channels

Credits

• Pokemonshowdown.com - for the inspiration, and Pokemon cry sounds.
• Pokemondb.net - for the Pokemon small sprites.
• khinsider.com - for the background sounds.
• pokestadium.com - for the animated Pokemon sprites (front and back view).
• flaticon.com - Pokeball icon from Nikita Golubev and boxing gloves icon from roundicons freebies

Donation

If this project helped you reduce time to develop, please consider buying me a cup of coffee :)