React Native - multiple pages


I’m working with BabylonJS React Native on multiple pages and am running into some difficulty that I could use some advice on.
I want to have scenes on multiple pages, and for those pages to have different scenes. But when I switch from a page with a scene to a new one, unless I specifically remove it, all the stuff from the first scene is still there.
I am looking for a way to have a scene start on each page when I open that page, and to close it when I navigate away from that page. So that it gets reinitialized every time. I’ve tried:

        engine.onCanvasBlurObservable.add(() => {
            console.log("CANVAS BLURRED");
        engine.onCanvasFocusObservable.add(() => {
            console.log("CANVAS FOCUS");
        engine.onDisposeObservable.add(() => {
            console.log("CANVAS DISPOSED");

But they don’t seem to ever get called. Is there some way to set this up?
I also have trouble with switching pages when I’ve enabled XR, the next page I open has no background and the 3D objects seem to get smeared over where the background should be. But maybe that’s been fixed already, I’m on the current versions:

        "@babylonjs/core": "5.0.0-alpha.22",
        "@babylonjs/react-native": "0.4.0-alpha.17",


Adding @ryantrem and @bghgary our react native Gurus.

Hey @Peter - can you share more details about what a “page” means in your app? Is it just a React Native component? And if so, does that component contain the EngineView?

If you are trying to swap out scenes, I think it would be easiest to have a single EngineView instance, and some mechanism for swapping adjacent React Native UI as well as the Babylon scene. With the current Babylon Native architecture, a lot of the Babylon Native engine lifetime is tied to a single instance of EngineView.

1 Like

A page is just a new component that contains a ‘new’ or different engineview, or at least that was the thought. With your explanation of having just the one single engine view instance I reworked stuff to remove the current scene, and add a new one every time I switch to a new page.
And this does work, however if I switch pages a bunch of times (for testing sake) the FPS goes to almost 200 (which isn’t really possible on this phone) and the scene seems to start lagging. Besides doing a scene.dispose() is there any other cleaning up I’d need to do in the engine when stopping and starting scenes?

@ryantrem Can I not have multiple pages with EngineViews? Should I keep that in a global? I’ve tried looking for other app that have babylon react native with multiple pages but I couldn’t really find any.