Sphere/app/components/app.js

import React from 'react-native';

import RouteMaster from './routes/RouteMaster';
import RouteMapper from './navigation/RouteMapper';
import GlobalStyles from '../settings/styles';
import BusyIndicator from 'react-native-busy-indicator';
import token from '../api/token';
import { checkToken } from '../api/CircleCI';

require('moment-duration-format');

const {
  Navigator,
  StyleSheet,
  Platform,
  View
} = React;

const styles = StyleSheet.create({
  navbar: {
    backgroundColor: GlobalStyles.get('CIRCLE_NAVBAR_BG'),
    flexDirection:'row',
    justifyContent: 'center',
  },
  container: {
    flex: 1,
    marginTop: (Platform.OS === 'ios' ? 64 : 56)
  }
});

export default class extends React.Component {
  constructor() {
    super();
    this.state = {
      initialRoute: false
    };
  }

  renderScene(route, nav) {
    const Component = route.component;
    const props = route.props || {};
    return (
      <View style={styles.container}>
        <Component
          nav={nav}
          currentRoute={route}
          {...props} />
      </View>
    );
  }

  componentWillMount() {
    token.get().then(function (CIToken) {
      if (!CIToken) {
        this.setState({
          initialRoute: RouteMaster.get('HOME')
        });
        return;
      }
      checkToken(CIToken).then(function (isValid) {
        this.setState({
          initialRoute: isValid ? RouteMaster.get('HOME') : RouteMaster.get('LOGIN')
        });
      }.bind(this));
    }.bind(this));
  }

  render() {
    if (!this.state.initialRoute) {
      return null;  // Replace with a splash screen?
    }
    return (
      <View style={{ flex: 1 }}>
        <Navigator
          renderScene={this.renderScene}
          initialRoute={this.state.initialRoute}
          navigationBar={
            <Navigator.NavigationBar
              style={styles.navbar}
              routeMapper={RouteMapper} />
          }
          configureScene={(route) => {
            if (route.sceneConfig) {
              return route.sceneConfig;
            }
            return Navigator.SceneConfigs.PushFromRight;
          }}
        />
        <BusyIndicator />
      </View>
    );
  }
};