React Native - multiple pages

Questions
1

Hi!

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",

Thanks!

2

Adding @ryantrem and @bghgary our react native Gurus.

3

Hey @HedwigAR - 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
4

Hi!
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?

5

@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.

6

If the FPS is increasing but the performance looks worse, it sounds like it could be rendering the same scene multiple times. Are you manually rendering the scene, or letting BRN handle that? I expect multiple EngineViews should be fine as long as one is unloaded before the next is loaded. If this is happening back-to-back, it’s possible there could be a timing issue such that the first one is not fully cleaned up before the second one is created. You could easily test that by going from a “page” with an EngineView to a page without one to a page with one (or something like that).