Login flow

reactxp_login_flow.tsx

import React from "react";
import RX, { Text, Component, View, Modal } from "reactxp";
// import { App } from './App';
import { DEBUG, DEV } from "./config";

import Navigator, {
  NavigatorDelegateSelector as DelegateSelector,
  Types
} from "reactxp-navigation";

const Login = ({ onPressNavigate }) => (
  <Text
    onPress={onPressNavigate}
    style={{ flex: 1, backgroundColor: "#d3d3d3" }}
  >
    Login
  </Text>
);

const Main = ({ onPressNavigate }) => {
  return <Text onPress={onPressNavigate}>Main</Text>;
};

const Detail = ({ onNavigateBack }) => (
  <Text onPress={onNavigateBack}>Detail</Text>
);

enum NavigationRouteId {
  Main,
  Detail
}

class Container extends Component {
  private navigator: Navigator | undefined;
  componentDidMount() {
    this.navigator.immediatelyResetRouteStack([
      {
        routeId: NavigationRouteId.Main,
        sceneConfigType: Types.NavigatorSceneConfigType.Fade
      }
    ]);
  }

  navigateToDetail = () => {
    this.navigator.push({
      routeId: NavigationRouteId.Detail,
      sceneConfigType: Types.NavigatorSceneConfigType.FloatFromRight
    });
  };

  // // // Called when the user presses a back button on the
  // // // SecondPanel to navigate back to the MainPanel.
  private _onPressBack = () => {
    this.navigator.pop();
  };

  private onNavigatorRef = (navigator: Navigator) => {
    // Stash away a reference to the mounted navigator
    this.navigator = navigator;
  };

  public renderScene = (navigatorRoute: NavigatorRoute) => {
    switch (navigatorRoute.routeId) {
      case NavigationRouteId.Main:
        return <Main onPressNavigate={this.navigateToDetail} />;
      case NavigationRouteId.Detail:
        return <Detail onNavigateBack={this._onPressBack} />;
    }
    return null;
  };

  render() {
    return (
      <Navigator ref={this.onNavigatorRef} renderScene={this.renderScene} />
    );
  }
}

enum AppNavigationRouteId {
  MainContainer,
  Login
}

interface AppContainerProps {}

interface AppContainerState {
  isLoggedIn: boolean;
}

const MainContainer = () => (
  <View>
    <Text>Container</Text>
    <Container />
  </View>
);

class AppContainer extends Component<AppContainerProps, AppContainerState> {
  private navigator2: Navigator | undefined;

  public constructor(props: AppContainerProps) {
    super(props);
    this.state = {
      isLoggedIn: false
    };
  }

  componentDidMount() {
    this.navigator2.immediatelyResetRouteStack([
      {
        routeId: AppNavigationRouteId.MainContainer,
        sceneConfigType: Types.NavigatorSceneConfigType.Fade
      }
    ]);
  }

  navigateToAppContainer = () => {
    this.navigator2.replace({
      routeId: AppNavigationRouteId.MainContainer,
      sceneConfigType: Types.NavigatorSceneConfigType.FloatFromRight
    });
  };

  private onNavigatorRef = (navigator: Navigator) => {
    // Stash away a reference to the mounted navigator
    this.navigator2 = navigator;
  };

  public renderScene = (navigatorRoute: NavigatorRoute) => {
    if (!this.state.isLoggedIn) {
      return (
        <Login
          onPressNavigate={() =>
            this.setState({ isLoggedIn: !this.state.isLoggedIn })
          }
        />
      );
    }
    return <MainContainer />;
  };

  render() {
    return (
      <Navigator ref={this.onNavigatorRef} renderScene={this.renderScene} />
      // <Text>Test</Text>
    );
  }
}

class App extends Component {
  render() {
    return <AppContainer />;
  }
}

RX.App.initialize(DEBUG, DEV);
RX.UserInterface.setMainView(<App />);