main.js

import { Platform } from 'react-native';
import { Provider } from 'react-redux';
import { Navigation, NativeEventsReceiver } from 'react-native-navigation';
import I18n from 'react-native-i18n';
import EStyleSheet from 'react-native-extended-stylesheet';
import createReduxStore from './ducks/store/store';
import { registerScreens } from './presentation/navigation/screens';
import deI18N from './i18n/de.json';
import enI18N from './i18n/en.json';
import showNavMainTabs from './presentation/navigation/tabs';
import * as containerNames from './constants/containerNames';
import dongleListener from './ducks/dongle-listener';
import initialState from './ducks/initialState';

const store = createReduxStore();

export default class App {

    appStarted = false;
    // tabStarted = false;
    // containerId; // todo use state.settings.containerId
    currentState = initialState;

    constructor() {
        EStyleSheet.build({
            $textColor: 'green' // variable
        });

        I18n.fallbacks = true;
        I18n.translations = {
            en: enI18N,
            de: deI18N
        };

        registerScreens(store, Provider);

        // https://github.com/wix/react-native-navigation/pull/1838
        if (Platform.OS === 'ios') {
            this.registerSubscriber();
        } else {
            Navigation.isAppLaunched()
                .then((appLaunched) => {
                    if (appLaunched) {
                        this.registerSubscriber();
                    }
                    new NativeEventsReceiver().appLaunched(() => {
                        this.registerSubscriber();
                    });
                    return appLaunched;
                }).catch((error) => {
                    console.log('Error while starting App:' + error);
                });
        }
       /* Promise.resolve(Navigation.isAppLaunched())
            .then(appLaunched => {
                if (appLaunched) {
                    this.unsubscribe = store.subscribe(this.onStoreUpdate.bind(this));
                } else {
                    // App hasn't been launched yet -> show the UI only when needed.
                    new NativeEventsReceiver().appLaunched(this.unsubscribe = store.subscribe(this.onStoreUpdate.bind(this)));
                }
                return appLaunched;
            }).catch((error) => {
                console.log('Error while starting App:' + error);
            }); */
    }

    registerSubscriber() {
        if (!this.appStarted) {
            this.appStarted = true;
            store.subscribe(this.onStoreUpdate.bind(this));
        } else console.debug('Error: appStarted=' + this.appStarted);
    }

    /**
     * https://github.com/reactjs/redux/issues/303#issuecomment-125184409
     */
    onStoreUpdate() {
        const state = store.getState();
        if (state !== this.currentState) {
            // Wait for the redux store to load before starting the app
            if (state.appReducer.storeLoaded !== this.currentState.appReducer.storeLoaded) {
                console.debug('storeLoaded oldState:' + this.currentState.appReducer.storeLoaded + ' newState:' + state.appReducer.storeLoaded);
                // we needs to start dongleListener in case that useDongle is allready set in persist store
                if (state.settings.useDongle) dongleListener(store.dispatch);
                this.initStates(state);
                this.startApp(state);
            } else if (state.settings.isFirstRun !== this.currentState.settings.isFirstRun) {
                console.debug('isFirstRun oldState:' + this.currentState.settings.isFirstRun + ' newState:' + state.settings.isFirstRun);
                this.startApp(state);
            } else if (state.settings.useDongle !== this.currentState.settings.useDongle) {
                console.debug('useDongle oldState:' + this.currentState.settings.useDongle + ' newState:' + state.settings.useDongle);
                this.startApp(state);
                if (state.settings.useDongle) {
                    dongleListener(store.dispatch);
                } else {
                    dongleListener(); // unsubscribe
                }
            } else if (state.settings.loggedInDriveLog !== this.currentState.settings.loggedInDriveLog) {
                console.debug('loggedInDriveLog');
                this.startApp(state);
            } else if (state.settings.donglePin !== this.currentState.settings.donglePin) {
                console.debug('donglePin');
                this.startApp(state);
            } else if (state.dongleReducer.connectedDongle !== this.currentState.dongleReducer.connectedDongle) {
                console.debug('connectedDongle');
                this.startApp(state);
            }

            this.currentState = state;
        } else console.debug('state == this.currentState');
    }

    // redux called setState for every stored property different from initial state
    initStates(state) {
        this.currentState.settings.isFirstRun = state.settings.isFirstRun;
        this.currentState.settings.useDongle = state.settings.useDongle;
        this.currentState.settings.loggedInDriveLog = state.settings.loggedInDriveLog;
        this.currentState.settings.donglePin = state.settings.donglePin;
        this.currentState.dongleReducer.connectedDongle = state.dongleReducer.connectedDongle;
    }

    startApp(state) {
        if (state.appReducer.storeLoaded) {
            console.debug('settings changed state.settings:' + JSON.stringify(state.settings) + JSON.stringify(state.appReducer));
            I18n.locale = state.settings.language;
            // Do something with state
            // i.e. determine if the user has logged in and start a different app
            if (!state.settings.isFirstRun) {
                if (state.settings.useDongle) {
                    if (!state.settings.loggedInDriveLog) {
                        if (state.appReducer.containerId !== containerNames.LOGIN_SCREEN) { // skip screen if its already visible
                            this.navigate(containerNames.LOGIN_SCREEN);
                        }
                        return;
                    } else if (!state.settings.donglePin) {
                        if (state.appReducer.containerId !== containerNames.DONGLE_PIN_SCREEN) { // skip screen if its already visible
                            this.navigate(containerNames.DONGLE_PIN_SCREEN);
                        }
                        return;
                    } else if (!state.dongleReducer.connectedDongle) {
                        if (state.appReducer.containerId !== containerNames.DONGLE_CONNECT_SCREEN) { // skip screen if its already visible
                            this.navigate(containerNames.DONGLE_CONNECT_SCREEN);
                        }
                        return;
                    }
                }

                /* Promise.resolve(Navigation.getCurrentlyVisibleScreenId())
                    .then(containerId => {
                        console.debug('CurrentlyVisibleScreenId:' + JSON.stringify(containerId));
                        if (containerId === undefined || containerId.indexOf('tabs.') !== 0) {
                            if (this.containerId !== containerId) {
                                this.containerId = containerId;
                                showNavMainTabs(state.settings.theme);
                            }
                        }
                        return containerId;
                    }).catch((error) => {
                        console.log('Error getCurrentlyVisibleScreenId:' + error);
                    }); */

                if (!state.appReducer.containerId || state.appReducer.containerId.indexOf('tabs.') !== 0) {
                    // this.tabStarted = true;
                    // this.containerId = undefined;
                    showNavMainTabs(state.settings.theme);
                } else console.debug('tabStarted=true');
            } else if (state.appReducer.containerId !== containerNames.APPMODECHOOSER_SCREEN) { // skip screen if its already visible
                this.navigate(containerNames.APPMODECHOOSER_SCREEN);
            } else console.debug('isFirstRun=' + state.settings.isFirstRun + ' containerId=' + state.appReducer.containerId);
        } else console.debug('App is started before storeLoaded');
    }

    /**
     * Android: this method will start new Activity
     * @param screen
     */
    navigate(screen: string) {
        // Navigation.pop();
        // if (this.tabStarted || this.containerId !== screen) {
            // this.containerId = screen;
            // this.tabStarted = false;
        Navigation.startSingleScreenApp({
            screen: {
                screen, // unique ID registered with Navigation.registerScreen
                    // title: I18n.t('appModeScreenTitle'), // title of the screen as appears in the nav bar (optional)
                    // navigatorStyle: {navBarHidden: true}, // override the navigator style for the screen, (optional)
                navigatorButtons: {} // override the nav buttons for the screen, see "Adding buttons to the navigator" below (optional)
            },
                // passProps: {}, // simple serializable object that will pass as props to all top screens (optional)
                // animationType: 'slide-down' // optional, add transition animation to root change: 'none', 'slide-down', 'fade'
        });
        // } else console.debug('Screen is already started containerId:' + this.containerId + ' tabStarted:' + this.tabStarted);
        // store.dispatch({ type: types.SET_CONTAINER_ID, screen });
    }
}