Fix an issue where Android can fire extra app state change events when the state didn't actually change (#80)

Author: ryantrem

Apps/PackageTest/package-lock.json

@@ -10,7 +10,7 @@
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
   },
   "dependencies": {
-    "@babylonjs/core": "^4.2.0-beta.1",
+    "@babylonjs/core": "^4.2.0-beta.2",
     "@babylonjs/react-native": "file:../../Package/Assembled/babylonjs-react-native-0.0.1.tgz",
     "react": "16.13.1",
     "react-native": "0.63.1",

Apps/PackageTest/package.json

@@ -10,8 +10,8 @@
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
   },
   "dependencies": {
-    "@babylonjs/core": "^4.2.0-beta.1",
-    "@babylonjs/loaders": "^4.2.0-beta.1",
+    "@babylonjs/core": "^4.2.0-beta.2",
+    "@babylonjs/loaders": "^4.2.0-beta.2",
     "@babylonjs/react-native": "file:../../Modules/@babylonjs/react-native",
     "@react-native-community/slider": "^2.0.9",
     "logkitty": "^0.7.1",

Apps/Playground/package-lock.json

@@ -66,13 +66,12 @@ export function useEngine(): Engine | undefined {
     const [engine, setEngine] = useState<Engine>();
 
     useEffect(() => {
-        let engine: Engine | undefined;
         let disposed = false;
 
         (async () => {
             if (await BabylonModule.initialize() && !disposed)
             {
-                engine = new NativeEngine();
+                const engine = new NativeEngine();
 
                 // NOTE: This is a workaround for https://github.com/BabylonJS/BabylonReactNative/issues/60
                 let heartbeat: NodeJS.Timeout | null;
@@ -119,9 +118,12 @@ export function useEngine(): Engine | undefined {
 
         return () => {
             disposed = true;
-            if (engine) {
-                DisposeEngine(engine);
-            }
+            setEngine(engine => {
+                if (engine) {
+                    DisposeEngine(engine);
+                }
+                return undefined;
+            })
         };
     }, []);
 

Apps/Playground/package.json

@@ -37,6 +37,7 @@ export interface EngineViewCallbacks {
 
 export const EngineView: FunctionComponent<EngineViewProps> = (props: EngineViewProps) => {
     const [failedInitialization, setFailedInitialization] = useState(false);
+    const [appState, setAppState] = useState(AppState.currentState);
     const [fps, setFps] = useState<number>();
     const engineViewRef = useRef<Component<NativeEngineViewProps>>(null);
     const snapshotPromise = useRef<{promise: Promise<string>, resolve: (data: string) => void}>();
@@ -50,34 +51,36 @@ export const EngineView: FunctionComponent<EngineViewProps> = (props: EngineView
     }, []);
 
     useEffect(() => {
-        if (props.camera) {
+        const onAppStateChanged = (appState: AppStateStatus) => {
+            setAppState(appState);
+        };
+
+        AppState.addEventListener("change", onAppStateChanged);
+
+        return () => {
+            AppState.removeEventListener("change", onAppStateChanged);
+        }
+    }, []);
+
+    useEffect(() => {
+        if (props.camera && appState === "active") {
             const engine = props.camera.getScene().getEngine();
 
             if (!IsEngineDisposed(engine)) {
-                const onAppStateChanged = (appState: AppStateStatus) => {
-                    if (appState === "active") {
-                        engine.runRenderLoop(() => {
-                            for (let scene of engine.scenes) {
-                                scene.render();
-                            }
-                        });
-                    } else {
-                        engine.stopRenderLoop();
+                engine.runRenderLoop(() => {
+                    for (let scene of engine.scenes) {
+                        scene.render();
                     }
-                };
-
-                onAppStateChanged(AppState.currentState);
-                AppState.addEventListener("change", onAppStateChanged);
+                });
 
                 return () => {
                     if (!IsEngineDisposed(engine)) {
                         engine.stopRenderLoop();
                     }
-                    AppState.removeEventListener("change", onAppStateChanged);
                 };
             }
         }
-    }, [props.camera]);
+    }, [props.camera, appState]);
 
     useEffect(() => {
         if (props.camera && (props.displayFrameRate ?? __DEV__)) {