Jump to content

How to intergrate Phaser 3 with react-native framework, for mobile game development ?


Recommended Posts

Hello everyone, my name is gedion101, I'm new in this forum and new using Phaser.js and quite a little long time in react-native framework, which is javascript framework for mobile development, you can see in this website (https://facebook.github.io/react-native/), or you can see the documentation if you curious (https://facebook.github.io/react-native/docs/getting-started.html).

Back to the topic, I have a wonder how to integrate the phaser.js module, for a react-native environment. So basically using npm way, and using <script> tag in HTML5 document, if I'm development target to the web, but different  in react-native and you can't use <script> tag, because of a different rule.

I found the alternative module, that call react-native-game-engine, is good, with matter.js as physics system in that game, but I have a problem, the game so lag, and to much render, for each asset to display on the phone. And another one, which is an ion-phaser, but I tried it and have a problem with that module, and the other is expo-phaser, is good, but in my workspace advice to me, don't use expo, find another way.

so I give up, maybe in this forum, it will help me, to figure out this problem or some advices, to give which framework or tools for using phaser for mobile game development.

for the code : app.js

// import react module
import React from 'react';
// import component from react-native module
import { View } from 'react-native';
// import phaser module
import Phaser from 'phaser';
// import scene for game
import Scene1 from './src/exampleScene1';

// eslint-disable-next-line react/prefer-stateless-function
class App extends React.Component {
  state = {
    config: {
      type: Phaser.AUTO,
      width: 800,
      height: 600,
      physics: {
        default: 'arcade',
        arcade: {
          gravity: { y: 200 },
      scene: [Scene1],

  callTheGame = () => {
    const { config } = this.state;
    const game = new Phaser.Game(config);
    return game;

  render() {
    return (

export default App;

exampleScene1.js :

// import phaser module
import Phaser from 'phaser';
// import asset image
import Gimo from './assets/gimo.png';

// create class for scene 1
class exampleScene1 extends Phaser.Scene {
  // build constructor
  constructor() {
    // create identifier for class scene
    super({ key: 'exampleScene1' });

  preload() {
    this.load.image('GimoAsset', Gimo);

  create() {
    this.add.image(400, 300, 'GimoAsset');

export default exampleScene1;


Link to comment
Share on other sites

  • 2 months later...
  • 2 weeks later...

About 1.5 years ago I worked in a company and we developed a mobile 2d game using React Native (Expo) as a core and for interface elements and Three.js for WebGL and game logic. It was not a good case since Three.js is overkill for small 2d game and doesn't provide any game-specific methods like game engines does, so I tried to replace Three.js with Phaser CE, and for that time I haven't found a simple way to make Phaser works with RN, also.  So I make a conclusion that React Native is not suitable for game development, and it's much easier to use something like Cordova with Phaser, or some other game engine that has an export feature to mobile platforms.


Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...