Native modal wip

src/app.js

@@ -2,6 +2,7 @@
  * Standard Notes React Native App
  */
 
+import React, { Component } from 'react';
 import {AppState, Platform, StatusBar, BackHandler, DeviceEventEmitter, NativeModules} from 'react-native';
 
 import {Navigation, ScreenVisibilityListener} from 'react-native-navigation';
@@ -68,33 +69,6 @@ export default class App {
       }
     })
 
-    // Screen visibility listener
-    this.listener = new ScreenVisibilityListener({
-      willAppear: ({screen, startTime, endTime, commandType}) => {
-        // This handles authentication for the initial app launch. We wait for the Notes component to be ready
-        // (meaning the app UI is ready), then present the authentication modal
-        if(screen == "sn.Notes" && this.authenticationQueued) {
-          this.authenticationQueued = false;
-          this.handleAuthentication(this.queuedAuthenticationLaunchState);
-          this.queuedAuthenticationLaunchState = null;
-        }
-      },
-
-      didAppear: ({screen, startTime, endTime, commandType}) => {
-        if(screen == "sn.Authenticate") {
-          this.modalVisible = true;
-        }
-      },
-
-      didDisappear: ({screen, startTime, endTime, commandType}) => {
-        if(screen == "sn.Authenticate") {
-          this.modalVisible = false;
-        }
-      },
-    });
-
-    this.listener.register();
-
     // Listen to sign out event
     this.signoutObserver = Auth.getInstance().addEventObserver([Auth.DidSignOutEvent, Auth.WillSignInEvent], function(event){
       if(event == Auth.DidSignOutEvent) {
@@ -131,7 +105,7 @@ export default class App {
     "IS STARTING APP:", this.isStartingApp,
     "IS ENTERING BACKGROUND", isEnteringBackground,
     "IS ENTERING FOREGROUND", isEnteringForeground,
-    "WILL AUTHENTICATE", isEnteringForeground && !this.authenticationInProgress && !this.modalVisible
+    "WILL AUTHENTICATE", isEnteringForeground && !this.authenticationInProgress
     );
 
     // Hide screen content as we go to the background
@@ -141,13 +115,6 @@ export default class App {
       }
     }
 
-    // Handle authentication as we come back from the background
-    if (isEnteringForeground && !this.authenticationInProgress && !this.modalVisible) {
-      setTimeout(() => {
-        this.handleAuthentication(WARM_LAUNCH_STATE);
-      }, 500);
-    }
-
     this.previousAppState = nextAppState;
   }
 
@@ -270,10 +237,6 @@ export default class App {
         this.loading = false;
         var run = () => {
           this.startApp();
-          var handled = this.handleAuthentication(COLD_LAUNCH_STATE, true);
-          if(!handled) {
-            this.onAuthenticationSuccess();
-          }
         }
         if(KeysManager.get().isFirstRun()) {
           KeysManager.get().handleFirstRun().then(run);
@@ -300,61 +263,30 @@ export default class App {
     this.applicationIsReady();
   }
 
-  handleAuthentication(fromState, queue = false) {
+  setAuthenticationComponentProps(title, passcode, fingerprint, onAuthenticate) {
+    this.authProps = {
+      title: title,
+      passcode: passcode,
+      fingerprint: fingerprint,
+      onAuthenticate: onAuthenticate
+    }
+  }
+
+  getAuthenticationProps() {
     var hasPasscode = KeysManager.get().hasOfflinePasscode();
     var hasFingerprint = KeysManager.get().hasFingerprint();
 
-    var showPasscode, showFingerprint;
-
-    if(fromState == COLD_LAUNCH_STATE) {
-      showPasscode = hasPasscode;
-      showFingerprint = hasFingerprint;
-    } else if(fromState == WARM_LAUNCH_STATE) {
-      showPasscode = hasPasscode && KeysManager.get().passcodeTiming == "immediately";
-      showFingerprint = hasFingerprint && KeysManager.get().fingerprintTiming == "immediately";
-    }
-
-    if(!showPasscode && !showFingerprint) {
-      return false;
-    }
-
     this.isAuthenticated = false;
-
-    if(queue) {
-      this.authenticationQueued = true;
-      this.queuedAuthenticationLaunchState = fromState;
-      return true;
-    }
-
-    if(this.modalVisible) {
-      console.log("MODAL IS VISIBLE. NOT SUPPOSED TO BE.");
-    }
-
     this.authenticationInProgress = true;
 
-    this.showAuthenticate(showPasscode, showFingerprint, this.onAuthenticationSuccess.bind(this));
+    var title = hasPasscode && hasFingerprint ? "Authentication Required" : (hasPasscode ? "Passcode Required" : "Fingerprint Required");
 
-    return true;
-  }
-
-  showAuthenticate(passcode, fingerprint, onAuthenticate) {
-    var title = passcode && fingerprint ? "Authentication Required" : (passcode ? "Passcode Required" : "Fingerprint Required");
-
-    Navigation.showModal({
-      screen: 'sn.Authenticate',
+    return {
       title: title,
-      backButtonHidden: true,
-      overrideBackPress: true,
-      passProps: {
-        mode: "authenticate",
-        onAuthenticateSuccess: onAuthenticate,
-        requirePasscode: passcode,
-        requireFingerprint: fingerprint
-      },
-      animationType: 'slide-up',
-      tabsStyle: _.clone(this.tabStyles), // for iOS
-      appStyle: _.clone(this.tabStyles) // for Android
-    })
+      passcode: hasPasscode,
+      fingerprint: hasFingerprint,
+      onAuthenticate: this.onAuthenticationSuccess.bind(this)
+    }
   }
 
   startApp() {

src/screens/Abstract.js

@@ -1,8 +1,9 @@
 import React, { Component } from 'react';
-import {DeviceEventEmitter} from 'react-native';
+import {DeviceEventEmitter, Modal} from 'react-native';
 var _ = require('lodash')
 import GlobalStyles from "../Styles"
 import App from "../app"
+import Authenticate from "./Authenticate"
 
 export default class Abstract extends Component {
 
@@ -129,4 +130,33 @@ export default class Abstract extends Component {
       }
   }
 
+  // render() {
+    // if(!this.rendersLockscreen) {
+      // return (<View></View>);
+    // }
+    //
+    // var props = App.get().getAuthenticationProps();
+    //
+    // return (
+    //   <Modal
+    //     animationType="slide"
+    //     transparent={false}
+    //     key={Math.random}
+    //     visible={this.state.lockContent}
+    //     onRequestClose={() => {alert("Modal has been closed.")}}>
+    //
+    //     <Authenticate
+    //       title={props.title}
+    //       onAuthenticateSuccess={props.onAuthenticate}
+    //       mode={"authenticate"}
+    //       requirePasscode={props.passcode}
+    //       requireFingerprint={props.fingerprint}
+    //       pseudoModal={true}
+    //       key={Math.random}
+    //     />
+    //
+    //   </Modal>
+    // )
+  // }
+
 }

src/screens/Account.js

@@ -37,6 +37,8 @@ export default class Account extends Abstract {
 
     this.state = {ready: false, params: {}};
 
+    this.rendersLockscreen = true;
+
     this.readyObserver = App.get().addApplicationReadyObserver(() => {
       this.applicationIsReady = true;
 
@@ -365,10 +367,10 @@ export default class Account extends Abstract {
   }
 
   render() {
-    if(this.state.lockContent) {
-      return (<View></View>);
+    if(!this.state.ready || this.state.lockContent) {
+      return super.render();
     }
-
+    
     let signedIn = !Auth.getInstance().offline();
     var themes = GlobalStyles.get().themes();
 

src/screens/Authenticate.js

@@ -34,10 +34,13 @@ export default class Authenticate extends Abstract {
 
   constructor(props) {
     super(props);
+    console.log("Constructing Authentication Component");
   }
 
   dismiss() {
-    this.dismissModal();
+    if(!this.props.pseudoModal) {
+      this.dismissModal();
+    }
   }
 
   onNavigatorEvent(event) {

src/screens/Notes.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { StyleSheet, View, Platform, Text, AppState, StatusBar } from 'react-native';
+import { StyleSheet, View, Platform, Text, AppState, StatusBar, Modal } from 'react-native';
 import ModelManager from '../lib/modelManager'
 import Storage from '../lib/storage'
 import Sync from '../lib/sync'
@@ -11,7 +11,6 @@ import Keychain from "../lib/keychain"
 import Icons from '../Icons';
 import NoteList from "../containers/NoteList"
 import Abstract from "./Abstract"
-import Authenticate from "./Authenticate"
 import OptionsState from "../OptionsState"
 import App from "../app"
 var _ = require('lodash')
@@ -21,6 +20,8 @@ export default class Notes extends Abstract {
   constructor(props) {
     super(props);
 
+    this.rendersLockscreen = true;
+
     this.state = {ready: false};
 
     this.readyObserver = App.get().addApplicationReadyObserver(() => {
@@ -340,9 +341,7 @@ export default class Notes extends Abstract {
 
   render() {
     if(!this.state.ready || this.state.lockContent) {
-      return (
-        <View></View>
-      );
+      return super.render();
     }
 
     var result = ModelManager.getInstance().getNotes(this.options);