React-navigation. Screen freezes after change from a screen with ViroARSceneNavigator to a normal screen

[chouji19]

Requirements:

Please go through this checklist before opening a new issue

• [x] Review the documentation
• [x] Search for existing issues in: viromedia/viro & ViroCommunity/viro
• [x] Use the latest ViroReact release

Environment

Please provide the following information about your environment:

1. Development OS: Mac OS Monterey 12.3.1
2. Device OS & Version: iOS 15.4.1
3. Version: @viro-community/react-viro: 2.23.0 and React Native version 0.65.1 @react-navigation/native 6.0.10
4. Device(s): What device(s) are you are seeing the issue on IPhone 11

Description

I have a react-navigation with two screens.

1. a screen with flatlist (No viro here)
2. a Viro Scene

When I navigate from flatlist to scene it works as expected when I goBAck to the first screen the app freeze.

Reproducible Demo

I have implemented a react-navigation I have one screen with a FlatList. It works normally when I start the app and I navigate to a new screen from the SceneCard component. it works as expected

return ( <SafeAreaView> <View style={styles.container}> <SearchBar searchText={searchText} setSearchText={setSearchText} /> {scenesList.length > 0 ? ( <FlatList showsVerticalScrollIndicator={false} data={scenesList} renderItem={({item}:any) => (<SceneCard scene={item} key={item.id} />)} keyExtractor={(item:any) => item.id ?? v4()} // onEndReached={onEndReached} onEndReachedThreshold={1 / 7} ListFooterComponent={ <View style={{marginBottom: 100}}/> } /> ) : ( <Text>No Scenes Available</Text> )} </View> <MainMenu /> </SafeAreaView> );

Code to navigate to the SceneScreen const goToScene = () => { selectScene(scene); navigation.navigate('SceneScreen'); };

The scene screen looks like this (I have tried to unmount with useFocusEffect and useIsFocus

const SceneScreen = () => { const [shouldHide, setShouldHide] = useState(false); console.log({shouldHide}); useFocusEffect(() => { setShouldHide(false) return () => { console.log({shouldHide}); setShouldHide(true) } }); return !shouldHide ? ( <View style={styles.container}> {!shouldHide && <ViroARSceneNavigator autofocus={true} initialScene={{ scene: PoralScene, }} style={{ flex: 1 }} />} {/* <View style={{ marginBottom: 100 }} /> */} <Menu /> </View> ) : <View />; };

My portalScene Component renders a ViroARScene and a ViroPortal

return (<ViroARScene onTrackingUpdated={onInitialized} > <ViroAmbientLight color="#FFFFFF" /> {urlResource ? ( <ViroPortalScene passable={true} dragType="FixedDistance" onDrag={() => { }}> <ViroPortal position={[0, 0, -0.5]} scale={[.1, .1, .1]}> <Viro3DObject source={require('../../res/portal_ship/portal_ship.vrx')} resources={[require('../../res/portal_ship/portal_ship_diffuse.png'), require('../../res/portal_ship/portal_ship_normal.png'), require('../../res/portal_ship/portal_ship_specular.png')]} type="VRX" /> </ViroPortal> <Viro360Image // source={{ uri: 'https://picsum.photos/1920/960', scale: 0.2 }} source={{ uri: urlResource }} /> </ViroPortalScene> ) : <></> } </ViroARScene> );

Now when I go back from the SceneScreen (I have tried navigation.goBack(), navigation.dispatch and navigation.reset and even adding timeout to the action) the Screen with the flatlist is freeze and I can't do anything else with my app until I restart.

`const handleGoBack = () => { setTimeout(() => { navigation.reset({ index: 0, routes: [ { name: 'ScenesListScreen', }, ], }); }, 500);

}`

Sorry for the code indentation

have you seen this problem before (As far as I have read, the reset instead of goback should be enough. but it is still not working for me)

Thanks. I really apreciate

[ViktorVojtek]

Hi @chouji19 try the following package. It solved some issues with freezing or laggy transitions between screens.

https://github.com/nandorojo/react-navigation-heavy-screen

If this wont help check your android studio or xcode runtime logs for any information...

[illi-homz]

Hi @chouji19 try the following package. It solved some issues with freezing or laggy transitions between screens.

https://github.com/nandorojo/react-navigation-heavy-screen

If this wont help check your android studio or xcode runtime logs for any information...

this log i get in Android Studio after app crashing my app is crashing, don't freeze react-navigation-heavy-screen don't help

FATAL EXCEPTION: GLThread 53825
Process: com.anyapp, PID: 23500
java.lang.NullPointerException: Attempt to invoke virtual method 'android.view.SurfaceHolder android.opengl.GLSurfaceView.getHolder()' on a null object reference
	at com.viro.core.ViroViewARCore$ViroARRenderer.onSurfaceChanged(ViroViewARCore.java:300)
	at android.opengl.GLSurfaceView$GLThread.guardedRun(GLSurfaceView.java:1575)
	at android.opengl.GLSurfaceView$GLThread.run(GLSurfaceView.java:1286)

[ViktorVojtek]

@illi-homz

To avoid this error handle the navigation from/to your AR screen via navigation dispatch actions. In my case I reset my AR stack with CommonAction.reset like this:

navigation.dispatch(
  CommonActions.reset({
    index: 0,
    routes: [
      {
        name: 'ARStack',
        params: {
          screen: 'AR',
          params: undefined,
        },
      },
    ],
  }),
);

You would also have to handle the native android back button behavior if you do not want to hide the native bottom navigation bar completely. You could do it with custom android back button behaviour. Here is the article from react-navigation

I am using the custom event listener on every screen I need to go from/to my AR screen and it works great.

This would definitely help.

[illi-homz]

@ViktorVojtek

your advice doesn't work

const goBack = useCallback(() => {
	let {index, routeNames, routes} = navigation.getState();
	routeNames = routeNames.filter(el => el !== 'AR');
	routes = routes.filter(
		({ name }) => name !== 'AR',
	);
	navigation.dispatch(
		CommonActions.reset({
			index,
			routeNames,
			routes,
		}),
	);
	return true;
}, []);

useBackHandler(goBack);

there is a transition to a step back, but the application crashes if you apply conditional rendering, the application also crashes

{isShow && (
	<ViroARSceneNavigator
		initialScene={{
			scene: RenderScene,
		}}
		worldAlignment='Gravity'
		autofocus
		style={styles.arView}
		viroAppProps={{
			onObjPress: showRotationUI,
			onRef: r => {
				console.log('r', r);
			},
		}}
	/>
)}

full Stack trace

2023-07-12 17:48:02.357 25659-25659/com.zzzz E/native: E0000 00:00:1689173282.356850   25659 scheduler.cc:283] INTERNAL: RET_CHECK failure (third_party/mediapipe/framework/scheduler.cc:283) state_ != STATE_NOT_STARTED (0 vs. 0) 
    Stack trace:
2023-07-12 17:48:02.357 25659-25659/com.zzzz E/native: E0000 00:00:1689173282.357294   25659 normal_detector_cpu.cc:233] Error graph_->WaitUntilIdle():INTERNAL: RET_CHECK failure (third_party/mediapipe/framework/scheduler.cc:283) state_ != STATE_NOT_STARTED (0 vs. 0) 
    === Source Location Trace: ===
    third_party/mediapipe/framework/scheduler.cc:283
    third_party/mediapipe/framework/calculator_graph.cc:847
2023-07-12 17:48:02.507 25659-28457/com.zzzz E/AndroidRuntime: FATAL EXCEPTION: GLThread 10475
    Process: com.zzzz, PID: 25659
    java.lang.NullPointerException: Attempt to invoke virtual method 'android.view.SurfaceHolder android.opengl.GLSurfaceView.getHolder()' on a null object reference
        at com.viro.core.ViroViewARCore$ViroARRenderer.onSurfaceChanged(ViroViewARCore.java:300)
        at android.opengl.GLSurfaceView$GLThread.guardedRun(GLSurfaceView.java:1575)
        at android.opengl.GLSurfaceView$GLThread.run(GLSurfaceView.java:1286)