@babylonjs/react-native 0.4.0-alpha.4 → 0.4.0-alpha.43

package/EngineHook.ts

@@ -1,97 +0,0 @@
-import { useEffect, useState } from 'react';
-import { Platform } from 'react-native';
-import { PERMISSIONS, check, request } from 'react-native-permissions';
-import { Engine, NativeEngine, WebXRSessionManager } from '@babylonjs/core';
-import { BabylonModule } from './BabylonModule';
-import { DisposeEngine } from './EngineHelpers';
-import * as base64 from 'base-64';
-
-// These are errors that are normally thrown by WebXR's requestSession, so we should throw the same errors under similar circumstances so app code can be written the same for browser or native.
-// https://developer.mozilla.org/en-US/docs/Web/API/XRSystem/requestSession
-// https://developer.mozilla.org/en-US/docs/Web/API/DOMException#Error_names
-enum DOMError {
-    NotSupportedError = 9,
-    InvalidStateError = 11,
-    SecurityError = 18,
-}
-
-class DOMException {
-    public constructor(private readonly error: DOMError) { }
-    get code(): number { return this.error; }
-    get name(): string { return DOMError[this.error]; }
-}
-
-// Override the WebXRSessionManager.initializeSessionAsync to insert a camera permissions request. It would be cleaner to do this directly in the native XR implementation, but there are a couple problems with that:
-// 1. React Native does not provide a way to hook into the permissions request result (at least on Android).
-// 2. If it is done on the native side, then we need one implementation per platform.
-{
-    const originalInitializeSessionAsync: (...args: any[]) => Promise<any> = WebXRSessionManager.prototype.initializeSessionAsync;
-    WebXRSessionManager.prototype.initializeSessionAsync = async function (...args: any[]): Promise<any> {
-        const cameraPermission = Platform.select({
-            android: PERMISSIONS.ANDROID.CAMERA,
-            ios: PERMISSIONS.IOS.CAMERA,
-        });
-
-        // Only Android and iOS are supported.
-        if (cameraPermission === undefined) {
-            throw new DOMException(DOMError.NotSupportedError);
-        }
-
-        // If the permission has not been granted yet, but also not been blocked, then request permission.
-        let permissionStatus = await check(cameraPermission);
-        if (permissionStatus == "denied")
-        {
-            permissionStatus = await request(cameraPermission);
-        }
-
-        // If the permission has still not been granted, then throw an appropriate exception, otherwise continue with the actual XR session initialization.
-        switch(permissionStatus) {
-            case "unavailable":
-                throw new DOMException(DOMError.NotSupportedError);
-            case "denied":
-            case "blocked":
-                throw new DOMException(DOMError.SecurityError);
-            case "granted":
-                return originalInitializeSessionAsync.apply(this, args);
-        }
-    }
-}
-
-// Babylon Native includes a native atob polyfill, but it relies JSI to deal with the strings, and JSI has a bug where it assumes strings are null terminated, and a base 64 string can contain one of these.
-// So for now, provide a JavaScript based atob polyfill.
-declare const global: any;
-global.atob = base64.decode;
-
-export function useEngine(): Engine | undefined {
-    const [engine, setEngine] = useState<Engine>();
-
-    useEffect(() => {
-        let disposed = false;
-        let engine: Engine | undefined = undefined;
-
-        (async () => {
-            if (await BabylonModule.initialize() && !disposed)
-            {
-                engine = BabylonModule.createEngine();
-                setEngine(engine);
-            }
-        })();
-
-        return () => {
-            disposed = true;
-            // NOTE: Do not use setEngine with a callback to dispose the engine instance as that callback does not get called during component unmount when compiled in release.
-            if (engine) {
-                DisposeEngine(engine);
-            }
-            // Ideally we would always do a reset here as we don't want different behavior between debug and release. Unfortunately, fast refresh has some strange behavior that
-            // makes it quite difficult to get this to work correctly (e.g. it re-runs previous useEffect instances, which means it can try to use Babylon Native in a de-initialized state).
-            // TODO: https://github.com/BabylonJS/BabylonReactNative/issues/125
-            if (!__DEV__) {
-                BabylonModule.reset();
-            }
-            setEngine(undefined);
-        };
-    }, []);
-
-    return engine;
-}

package/EngineView.tsx

@@ -1,168 +0,0 @@
-import React, { Component, FunctionComponent, SyntheticEvent, useCallback, useEffect, useState, useRef } from 'react';
-import { requireNativeComponent, NativeModules, ViewProps, AppState, AppStateStatus, View, Text, findNodeHandle, UIManager } from 'react-native';
-import { Camera } from '@babylonjs/core';
-import { IsEngineDisposed } from './EngineHelpers';
-import { BabylonModule } from './BabylonModule';
-
-declare const global: any;
-const isRemoteDebuggingEnabled = !global['nativeCallSyncHook'];
-
-const EngineViewManager: {
-    setJSThread(): void;
-} = NativeModules.EngineViewManager;
-
-// Not all platforms need this, but for those that do, this is intended to be a synchronous call to boostrap the ability to run native code on the JavaScript thread.
-if (EngineViewManager && EngineViewManager.setJSThread && !isRemoteDebuggingEnabled) {
-    EngineViewManager.setJSThread();
-}
-
-interface NativeEngineViewProps extends ViewProps {
-    onSnapshotDataReturned: (event: SyntheticEvent) => void;
-}
-
-const NativeEngineView: {
-    prototype: Component<NativeEngineViewProps>;
-    new(props: Readonly<NativeEngineViewProps>): Component<NativeEngineViewProps>;
-} = requireNativeComponent('EngineView');
-
-export interface EngineViewProps extends ViewProps {
-    camera?: Camera;
-    displayFrameRate?: boolean;
-    onInitialized?: (view: EngineViewCallbacks) => void;
-}
-
-export interface EngineViewCallbacks {
-    takeSnapshot: () => Promise<string>;
-}
-
-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 }>();
-
-    useEffect(() => {
-        (async () => {
-            if (!await BabylonModule.whenInitialized()) {
-                setFailedInitialization(true);
-            }
-        })();
-    }, []);
-
-    useEffect(() => {
-        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)) {
-                engine.runRenderLoop(() => {
-                    for (let scene of engine.scenes) {
-                        scene.render();
-                    }
-                });
-
-                return () => {
-                    if (!IsEngineDisposed(engine)) {
-                        engine.stopRenderLoop();
-                    }
-                };
-            }
-        }
-
-        return undefined;
-    }, [props.camera, appState]);
-
-    useEffect(() => {
-        if (props.camera && (props.displayFrameRate ?? __DEV__)) {
-            const engine = props.camera.getScene().getEngine();
-
-            if (!IsEngineDisposed(engine)) {
-                setFps(engine.getFps());
-                const timerHandle = setInterval(() => {
-                    setFps(engine.getFps());
-                }, 1000);
-
-                return () => {
-                    clearInterval(timerHandle);
-                };
-            }
-        }
-
-        setFps(undefined);
-        return undefined;
-    }, [props.camera, props.displayFrameRate]);
-
-    // Call onInitialized if provided, and include the callback for takeSnapshot.
-    useEffect(() => {
-        if (props.onInitialized) {
-            props.onInitialized({
-                takeSnapshot: (): Promise<string> => {
-                    if (!snapshotPromise.current) {
-                        let resolveFunction: ((data: string) => void) | undefined;
-                        const promise = new Promise<string>((resolutionFunc) => {
-                            resolveFunction = resolutionFunc;
-                        });
-
-                        // Resolution functions should always be initialized.
-                        if (resolveFunction) {
-                            snapshotPromise.current = { promise: promise, resolve: resolveFunction };
-                        }
-                        else {
-                            throw new Error("Resolution functions not initialized after snapshot promise creation.");
-                        }
-
-                        UIManager.dispatchViewManagerCommand(
-                            findNodeHandle(engineViewRef.current),
-                            "takeSnapshot",
-                            []);
-                    }
-
-                    return snapshotPromise.current.promise;
-                }
-            });
-        }
-    }, [props.onInitialized]);
-
-    // Handle snapshot data returned.
-    const snapshotDataReturnedHandler = useCallback((event: SyntheticEvent) => {
-        // The nativeEvent is a DOMEvent which doesn't have a typescript definition. Cast it to an Event object with a data property.
-        const { data } = event.nativeEvent as Event & { data: string };
-        if (snapshotPromise.current) {
-            snapshotPromise.current.resolve(data);
-            snapshotPromise.current = undefined;
-        }
-    }, []);
-
-    if (!failedInitialization) {
-        return (
-            <View style={[props.style, { overflow: "hidden" }]}>
-                <NativeEngineView ref={engineViewRef} style={{ flex: 1 }} onSnapshotDataReturned={snapshotDataReturnedHandler} />
-                { fps && <Text style={{ color: 'yellow', position: 'absolute', margin: 10, right: 0, top: 0 }}>FPS: {Math.round(fps)}</Text>}
-            </View>
-        );
-    } else {
-        const message = "Could not initialize Babylon Native.";
-        if (!__DEV__) {
-            throw new Error(message);
-        }
-
-        return (
-            <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
-                <Text style={{ fontSize: 24 }}>{message}</Text>
-                { isRemoteDebuggingEnabled && <Text style={{ fontSize: 12 }}>React Native remote debugging does not work with Babylon Native.</Text>}
-            </View>
-        );
-    }
-}

package/index.ts

@@ -1,2 +0,0 @@
-export * from './EngineView';
-export * from './EngineHook';

package/ios/BabylonNative.h

@@ -1,24 +0,0 @@
-#pragma once
-
-#include <jsi/jsi.h>
-#include <ReactCommon/CallInvoker.h>
-
-namespace Babylon
-{
-    class Native final
-    {
-    public:
-        // This class must be constructed from the JavaScript thread
-        Native(facebook::jsi::Runtime& jsiRuntime, std::shared_ptr<facebook::react::CallInvoker> callInvoker, void* windowPtr, size_t width, size_t height);
-        ~Native();
-        void Refresh(void* windowPtr, size_t width, size_t height);
-        void Resize(size_t width, size_t height);
-        void Reset();
-        void SetPointerButtonState(uint32_t pointerId, uint32_t buttonId, bool isDown, uint32_t x, uint32_t y);
-        void SetPointerPosition(uint32_t pointerId, uint32_t x, uint32_t y);
-
-    private:
-        class Impl;
-        std::unique_ptr<Impl> m_impl{};
-    };
-}