React Native with playcanvas

Help & Support
1

Hello all,
Good to see you all!! I am very new to Playcanvas and I am evaluating its possibilities. Can we use Playcanvas with React-Native? To be specific, if I make Playcanvas games, can I play them in a React-Native app (both in iOS and Android)?
If yes, are there any performance issues? Are there any major pit-falls?
Appreciate your help!!
Thank you,
Nithin

2

Hi @nithinsb and welcome,

Yes you can use Playcanvas with react native, using the expo-gl view that adds support for WebGL 2.0:

I don’t have direct experience with that but currently seems to be faster than using a React WebView to render Playcanvas.

1 Like
3

Thanks @Leonidas. Would you still recommend using the expo-gl view to embed PlayCanvas inside RN or has anything changed in the last year?

The expo-gl view has many unsupported WebGL2 methods. Is that not an issue for using it with PlayCanvas?

4

Hi @bfelbo and welcome,

So I don’t have direct experience with react expo-gl, you may have to ask in their repo to provide for more clues on how it performs.

PlayCanvas has first class WebGL 1 support if you require to fallback.

2 Likes
5

How does one get this to work? PlayCanvas.Application requires an element, specifically a canvas, to even construct. How would one make this work with RN?

Using the ExpoWebGLRenderingContext doesn’t work, and neither does a reference to it… so. Is it even possible to setup?

import React, { RefObject } from 'react';
import { View } from 'react-native';
import { ExpoWebGLRenderingContext, GLView } from 'expo-gl';
import PlayCanvas from 'playcanvas'

export default class App extends React.Component {

    private ref: RefObject<GLView> = React.createRef();

    onContextCreate(gl: ExpoWebGLRenderingContext) {
        const app = new PlayCanvas.Application(gl, {
            //elementInput: new PlayCanvas.ElementInput(gl),
            mouse: new PlayCanvas.Mouse(gl),
            touch: !!('ontouchstart' in window) ? new PlayCanvas.TouchDevice(gl) : null,
            keyboard: new PlayCanvas.Keyboard(window),
            //gamepads: new PlayCanvas.GamePads(),
        });
    }

    render(){
        return (
            <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
              <GLView style={{ width: 300, height: 300 }} onContextCreate={this.onContextCreate.bind(this)} ref={this.ref} />
            </View>
          );
    }
}
1 Like