Fix screenshot taking

Screenshot taking wasn't working due to a react "this" issue. In JavaScript,
class methods are not bound to the instance like an arrow function is.
So, when a user of ViroARSceneNavigator tries to use these functions,
the "this" instance didn't have all of the React properties that make
React Native's findNodeHandle work correctly.

Changing functions like:

async _takeScreenshot(fileName, saveToCameraRoll) {
  // ...
}

To

_takeScreenshot = (filename, saveToCameraRoll) => {
  // ...
}

Fixes the issue.

Also adds more documentation to the ViroARSceneNavigator.

Author: robertjcolley

components/AR/ViroARSceneNavigator.tsx

@@ -83,19 +83,6 @@ type State = {
 export class Viro3DSceneNavigator extends React.Component<Props, State> {
   _component: ViroNativeRef = null;
 
-  sceneNavigator = {
-    push: this.push,
-    pop: this.pop,
-    popN: this.popN,
-    jump: this.jump,
-    replace: this.replace,
-    // exitViro: this.exitViro, TODO: this was unused
-    recenterTracking: this._recenterTracking,
-    project: this._project,
-    unproject: this._unproject,
-    viroAppProps: {} as any,
-  };
-
   /**
    * Called from native when either the user physically decides to exit vr (hits
    * the "X" buton).
@@ -349,8 +336,7 @@ export class Viro3DSceneNavigator extends React.Component<Props, State> {
    * (counts equals 0), we then remove that scene from sceneDictionary.
    */
   decrementReferenceForLastNScenes(n: number) {
-    var sceneHistory = this.state.sceneHistory;
-    var sceneDictionary = this.state.sceneDictionary;
+    const { sceneHistory, sceneDictionary } = this.state;
 
     // Now update and release any reference counts
     for (var i = 1; i <= n; i++) {
@@ -473,6 +459,19 @@ export class Viro3DSceneNavigator extends React.Component<Props, State> {
     );
   }
 
+  sceneNavigator = {
+    push: this.push,
+    pop: this.pop,
+    popN: this.popN,
+    jump: this.jump,
+    replace: this.replace,
+    // exitViro: this.exitViro, TODO: this was unused
+    recenterTracking: this._recenterTracking,
+    project: this._project,
+    unproject: this._unproject,
+    viroAppProps: {} as any,
+  };
+
   render() {
     // Uncomment this line to check for misnamed props
     //checkMisnamedProps("Viro3DSceneNavigator", this.props);

components/Viro3DSceneNavigator.tsx

@@ -84,18 +84,6 @@ type Props = ViewProps & {
  * ViroVRSceneNavigator is used to transition between multiple scenes.
  */
 export class ViroVRSceneNavigator extends React.Component<Props, State> {
-  sceneNavigator = {
-    push: this.push,
-    pop: this.pop,
-    popN: this.popN,
-    jump: this.jump,
-    replace: this.replace,
-    // exitViro: this.exitViro, // not defined?
-    project: this._project,
-    unproject: this._unproject,
-    recenterTracking: this._recenterTracking,
-    viroAppProps: {} as any,
-  };
   _component: ViroNativeRef = null;
 
   /**
@@ -472,6 +460,19 @@ export class ViroVRSceneNavigator extends React.Component<Props, State> {
     return views;
   }
 
+  sceneNavigator = {
+    push: this.push,
+    pop: this.pop,
+    popN: this.popN,
+    jump: this.jump,
+    replace: this.replace,
+    // exitViro: this.exitViro, // not defined?
+    project: this._project,
+    unproject: this._unproject,
+    recenterTracking: this._recenterTracking,
+    viroAppProps: {} as any,
+  };
+
   render() {
     var items = this._renderSceneStackItems();
 

components/ViroVRSceneNavigator.tsx

@@ -53,38 +53,24 @@ type State = {
  */
 export declare class ViroARSceneNavigator extends React.Component<Props, State> {
     _component: ViroNativeRef;
-    arSceneNavigator: {
-        push: (param1?: ViroScene | string, param2?: ViroScene) => void;
-        pop: () => void;
-        popN: (n: number) => void;
-        jump: (param1?: ViroScene | string, param2?: ViroScene) => void;
-        replace: (param1?: ViroScene | string, param2?: ViroScene) => void;
-        startVideoRecording: (fileName: string, saveToCameraRoll: boolean, onError: (errorCode: number) => void) => void;
-        stopVideoRecording: () => Promise<any>;
-        takeScreenshot: (fileName: string, saveToCameraRoll: boolean) => Promise<any>;
-        resetARSession: (resetTracking: any, removeAnchors: any) => void;
-        setWorldOrigin: (worldOrigin: ViroWorldOrigin) => void;
-        project: (point: Viro3DPoint) => Promise<any>;
-        unproject: (point: Viro3DPoint) => Promise<any>;
-        viroAppProps: any;
-    };
-    sceneNavigator: {
-        push: (param1?: ViroScene | string, param2?: ViroScene) => void;
-        pop: () => void;
-        popN: (n: number) => void;
-        jump: (param1?: ViroScene | string, param2?: ViroScene) => void;
-        replace: (param1?: ViroScene | string, param2?: ViroScene) => void;
-        startVideoRecording: (fileName: string, saveToCameraRoll: boolean, onError: (errorCode: number) => void) => void;
-        stopVideoRecording: () => Promise<any>;
-        takeScreenshot: (fileName: string, saveToCameraRoll: boolean) => Promise<any>;
-        resetARSession: (resetTracking: any, removeAnchors: any) => void;
-        setWorldOrigin: (worldOrigin: ViroWorldOrigin) => void;
-        project: (point: Viro3DPoint) => Promise<any>;
-        unproject: (point: Viro3DPoint) => Promise<any>;
-        viroAppProps: any;
-    };
     constructor(props: Props);
-    getRandomTag(): string;
+    private _startVideoRecording;
+    /**
+     * Stops recording the video of the Viro Renderer.
+     *
+     * returns Object w/ success, url and errorCode keys.
+     * @returns Promise that resolves when the video has stopped recording.
+     */
+    private _stopVideoRecording;
+    /**
+     * Takes a screenshot of the Viro renderer
+     * @param fileName - name of the file (without extension)
+     * @param saveToCameraRoll - whether or not the file should also be saved to the camera roll
+     * returns Object w/ success, url and errorCode keys.
+     */
+    private _takeScreenshot;
+    _project(point: Viro3DPoint): Promise<any>;
+    getRandomTag: () => string;
     /**
      * Pushes a scene and reference it with the given key if provided.
      * If the scene has been previously pushed, we simply show the scene again.
@@ -99,7 +85,7 @@ export declare class ViroARSceneNavigator extends React.Component<Props, State>
      *
      * @todo: use Typescript function overloading rather than this inaccurate solution
      */
-    push(param1?: ViroScene | string, param2?: ViroScene): void;
+    push: (param1?: ViroScene | string, param2?: ViroScene) => void;
     /**
      * Replace the top scene in the stack with the given scene. The remainder of the back
      * history is kept in the same order as before.
@@ -111,7 +97,7 @@ export declare class ViroARSceneNavigator extends React.Component<Props, State>
      *
      * @todo: use Typescript function overloading rather than this inaccurate solution
      */
-    replace(param1?: ViroScene | string, param2?: ViroScene): void;
+    replace: (param1?: ViroScene | string, param2?: ViroScene) => void;
     /**
      * Jumps to a given scene that had been previously pushed. If the scene was not pushed, we
      * then push and jump to it. The back history is re-ordered such that jumped to scenes are
@@ -124,44 +110,70 @@ export declare class ViroARSceneNavigator extends React.Component<Props, State>
      *
      * @todo: use Typescript function overloading rather than this inaccurate solution
      */
-    jump(param1?: ViroScene | string, param2?: ViroScene): void;
-    pop(): void;
-    popN(n: number): void;
+    jump: (param1?: ViroScene | string, param2?: ViroScene) => void;
+    pop: () => void;
+    popN: (n: number) => void;
     /**
      * Increments the reference count for a scene within sceneDictionary that is
      * mapped to the given sceneKey. If no scenes are found / mapped, we create
      * one, initialize it with a reference count of 1, and store it within the
      * sceneDictionary for future reference.
      */
-    incrementSceneReference(scene: ViroScene, sceneKey: string, limitOne: boolean): void;
+    incrementSceneReference: (scene: ViroScene, sceneKey: string, limitOne: boolean) => void;
     /**
      * Decrements the reference count for the last N scenes within
      * the sceneHistory by 1. If nothing else references that given scene
      * (counts equals 0), we then remove that scene from sceneDictionary.
      */
-    decrementReferenceForLastNScenes(n: number): void;
+    decrementReferenceForLastNScenes: (n: number) => void;
     /**
      * Adds the given sceneKey to the sceneHistory and updates the currentSceneIndex to point
      * to the scene on the top of the history stack (the most recent scene).
      */
-    addToHistory(sceneKey: string): void;
+    addToHistory: (sceneKey: string) => void;
     /**
      * Instead of preserving history, we find the last pushed sceneKey within the history stack
      * matching the given sceneKey and re-order it to the front. We then update the
      * currentSceneIndex to point to the scene on the top of the history stack
      * (the most recent scene).
      */
-    reorderHistory(sceneKey: string): void;
+    reorderHistory: (sceneKey: string) => void;
     popHistoryByN(n: number): void;
-    getSceneIndex(sceneTag: string): number;
-    _startVideoRecording(fileName: string, saveToCameraRoll: boolean, onError: (errorCode: number) => void): void;
-    _stopVideoRecording(): Promise<any>;
-    _takeScreenshot(fileName: string, saveToCameraRoll: boolean): Promise<any>;
-    _project(point: Viro3DPoint): Promise<any>;
-    _unproject(point: Viro3DPoint): Promise<any>;
-    _resetARSession(resetTracking: any, removeAnchors: any): void;
-    _setWorldOrigin(worldOrigin: ViroWorldOrigin): void;
-    _renderSceneStackItems(): JSX.Element[];
+    getSceneIndex: (sceneTag: string) => number;
+    private _unproject;
+    private _resetARSession;
+    private _setWorldOrigin;
+    private _renderSceneStackItems;
+    arSceneNavigator: {
+        push: (param1?: ViroScene | string, param2?: ViroScene) => void;
+        pop: () => void;
+        popN: (n: number) => void;
+        jump: (param1?: ViroScene | string, param2?: ViroScene) => void;
+        replace: (param1?: ViroScene | string, param2?: ViroScene) => void;
+        startVideoRecording: (fileName: string, saveToCameraRoll: boolean, onError: (errorCode: number) => void) => void;
+        stopVideoRecording: () => Promise<any>;
+        takeScreenshot: (fileName: string, saveToCameraRoll: boolean) => Promise<any>;
+        resetARSession: (resetTracking: any, removeAnchors: any) => void;
+        setWorldOrigin: (worldOrigin: ViroWorldOrigin) => void;
+        project: (point: Viro3DPoint) => Promise<any>;
+        unproject: (point: Viro3DPoint) => Promise<any>;
+        viroAppProps: any;
+    };
+    sceneNavigator: {
+        push: (param1?: ViroScene | string, param2?: ViroScene) => void;
+        pop: () => void;
+        popN: (n: number) => void;
+        jump: (param1?: ViroScene | string, param2?: ViroScene) => void;
+        replace: (param1?: ViroScene | string, param2?: ViroScene) => void;
+        startVideoRecording: (fileName: string, saveToCameraRoll: boolean, onError: (errorCode: number) => void) => void;
+        stopVideoRecording: () => Promise<any>;
+        takeScreenshot: (fileName: string, saveToCameraRoll: boolean) => Promise<any>;
+        resetARSession: (resetTracking: any, removeAnchors: any) => void;
+        setWorldOrigin: (worldOrigin: ViroWorldOrigin) => void;
+        project: (point: Viro3DPoint) => Promise<any>;
+        unproject: (point: Viro3DPoint) => Promise<any>;
+        viroAppProps: any;
+    };
     render(): JSX.Element;
 }
 export {};