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

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 tag in HTML5 document, if I’m development target to the web, but different in react-native and you can’t use 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 me, which framework or tools for using phaser in mobile game development.

I`m looking for a solution too.

I don’t know if there is a way to directly use Phaser in React-Native. As you mentioned, one of the big selling points to React-Native is that it doesn’t have a DOM. Instead it is converting DOM-manipulation into native mobile OS GUI commands. That is the big benefit to using React-Native and others like it, that it isn’t relying on an embedded web view and can squeeze out extra performance particularly on things like infinite scroll components and other similar components that traditionally lagged on mobile.

If you aren’t using this feature, I don’t think React-Native would offer any benefit over just using normal web React and packaging with something like Cordova. At least not without a ton of work to try to get Phaser working with GLView, the OpenGL ES view that would be available to React-Native.

Just maybe something like React-Native-WebGL could be used to try to buffer between the GLView and the WebGL that Phaser needs to be there. Canvas will definitely be a no-go, since to my knowledge there is nothing even close to the canvas spec on mobile outside of a WebView. But these abstraction layers, even if you can get it working, are going to rob your game of performance. It may not be much better than just React + Phaser on Cordova.

Best of luck with it!

1 Like