AppLayout.js

import React, { Component } from "react";
import PropTypes from "prop-types";
import { createSwitchNavigator } from "react-navigation";
import { StyleSheet, View } from "react-native";
import SwitchCustom from "../components/SwitchCustom/SwitchCustom";
import MainHeader from "../components/MainHeader/MainHeader";
import Main from "../routes/Main";
import DriverAnalytics from "../routes/DriverAnalytics";
import DeliveryStart from "../routes/DeliveryStart";
import AppContainer from "../containers/AppContainer";
import MapContainer from "../containers/MapContainer";
import ButtonsLayout from "./ButtonsLayout";
import Timer from "../components/Timer/Timer";
import NotificationsPanel from "../components/NotificationsPanel/NotificationsPanel";

const AppStack = createSwitchNavigator(
  {
    Main: {
      screen: AppContainer(Main),
      navigationOptions: {
        headerStyle: {
          display: "none"
        }
      }
    },
    DeliveryStart: {
      screen: AppContainer(DeliveryStart),
      navigationOptions: {
        headerStyle: {
          display: "none"
        }
      }
    },
    DriverAnalytics: {
      screen: AppContainer(DriverAnalytics),
      navigationOptions: {
        headerStyle: {
          display: "none"
        }
      }
    }
  },
  {
    initialRouteName: "Main",
    navigationOptions: {
      headerStyle: {
        backgroundColor: "#ffffff"
      }
    }
  }
);

class AppLayout extends Component {
  static router = AppStack.router;

  static propTypes = {
    navigation: PropTypes.object.isRequired,
    gpsLogsStart: PropTypes.func.isRequired,
    gpsLogsStop: PropTypes.func.isRequired,
    gpsLogsState: PropTypes.bool.isRequired,
    startNavigationMode: PropTypes.func.isRequired,
    stopNavigationMode: PropTypes.func.isRequired,
    startTrip: PropTypes.func.isRequired,
    pauseTrip: PropTypes.func.isRequired,
    continueTrip: PropTypes.func.isRequired,
    arrivedTrip: PropTypes.func.isRequired,
    completeTrip: PropTypes.func.isRequired,
    cancelTrip: PropTypes.func.isRequired,
    logout: PropTypes.func.isRequired,
    navigationMode: PropTypes.bool.isRequired,
    getTripById: PropTypes.func.isRequired,
    trip: PropTypes.object.isRequired,
    setTrips: PropTypes.func.isRequired,
    startTimer: PropTypes.oneOfType([null, PropTypes.integer]).isRequired,
    stopTimer: PropTypes.oneOfType([null, PropTypes.integer]).isRequired,
    enableNotificationPanel: PropTypes.bool.isRequired,
    switchNotificationPanel: PropTypes.func.isRequired
  };

  componentWillMount() {
    this.props.setTrips();
  }

  handleStartWork = () => {
    if (this.props.gpsLogsState === true) {
      this.props.gpsLogsStop();
    } else {
      this.props.gpsLogsStart();
    }
  };

  handleNotificationsPress = () => {
    this.props.switchNotificationPanel();
  };

  render() {
    return (
      <View style={{ flex: 1, flexDirection: "column" }}>
        <MainHeader
          navigation={this.props.navigation}
          logout={this.props.logout}
          navigationMode={this.props.navigationMode}
          activeTrip={this.props.trip}
          onNotificationsPress={this.handleNotificationsPress}
        />
        <View style={{ flex: 1, flexDirection: "column" }}>
          <View style={styles.layout}>
            <AppStack navigation={this.props.navigation} />
          </View>
          {this.props.navigation.state.index === 0 && (
            <View style={styles.switch}>
              <SwitchCustom
                swithState={this.props.gpsLogsState}
                onOnDuty={this.handleStartWork}
              />
            </View>
          )}
          <View style={styles.map}>
            <MapContainer />
          </View>
          <View style={styles.notifications}>
            <NotificationsPanel
              showPanel={this.props.enableNotificationPanel}
              navigation={this.props.navigation}
              onNotificationsClose={this.handleNotificationsPress}
            />
          </View>
          {this.props.navigation.state.index === 1 && (
            <View style={styles.timer}>
              <Timer
                startTimer={this.props.startTimer}
                stopTimer={this.props.stopTimer}
              />
            </View>
          )}
          {this.props.navigation.state.index === 1 && (
            <ButtonsLayout {...this.props} />
          )}
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  map: {
    flex: 1,
    alignSelf: "stretch"
  },
  layout: {
    position: "absolute",
    left: 0,
    top: 0,
    bottom: 0,
    width: 287,
    zIndex: 1
  },
  switch: {
    position: "absolute",
    right: 86,
    bottom: 145,
    zIndex: 999,
    borderWidth: 5,
    borderColor: "#ffffff",
    borderRadius: 43
  },
  timer: {
    position: "absolute",
    right: 20,
    top: 38
  },
  notifications: {
    position: "absolute",
    right: 0,
    top: 0,
    bottom: 0,
    zIndex: 1000
  }
});

export default AppLayout;