"native-base": "^2.12.1",
"react": "16.8.3",
"react-native": "0.59.0",
"react-native-router-flux": "^4.0.6",

const RouterWithRedux = connect()(Router);

class AppNavigator extends Component<{}> {
    static propTypes = {
        drawerState: PropTypes.string
    };

    componentDidUpdate() {
        if (this.props.drawerState === "opened") {
            this.drawer._root.open();
        }

        if (this.props.drawerState === "closed") {
            this.drawer._root.close();
        }
    }
    openDrawer() {
        this.drawer._root.open();
    }

    closeDrawer() {
         if (this.props.drawerState === "opened") {
            this.props.closeDrawer();
        }
        //this.drawer._root.close();
    }

    render() {
        // eslint-disable-line class-methods-use-thisy
        return (
            <Drawer ref={(ref) => { this.drawer = ref; }}
                content={<SideBar navigator={this.navigator} />}
                onClose={() => this.closeDrawer()}
                type="overlay"
                tapToClose
                tweenHandler={ratio => {
                    //eslint-disable-line
                    return {
                        drawer: { shadowRadius: ratio < 0.2 ? ratio * 5 * 5 : 5 },
                        main: {
                            opacity: (2 - ratio) / 2
                        }
                    };
                }}

            >
                <StatusBar
                    backgroundColor={variables.brandPrimary}
                    barStyle="light-content"
                />
                <RouterWithRedux>
                        <Scene key="root" hideNavBar>
                            <Scene key="login" component={Login} hideNavBar initial={true} />
                            <Scene key="signIn" component={SignIn} />
                            <Scene key="home" component={Home} />
                            <Scene key="register" component={Register} />
                            <Scene key="sideBar" component={SideBar} />
                        </Scene>
                </RouterWithRedux>
            </Drawer >
        );
    }
}

const bindAction = (dispatch) => {
    return {
        closeDrawer: () => dispatch(closeDrawer())


      };
    };

    const mapStateToProps = state => ({
        drawerState: state.drawer.drawerState
    });

    export default connect(
        mapStateToProps,
        bindAction
    )(AppNavigator);

class Login extends Component {
  render() {
    return (
      <View style={{ flex: 1 }}>
        <View style={{ padding: 10, marginBottom: 60 }}>
          <Grid>
            <Col style={{ padding: 10 }}>
              <Button
                onPress={() => Actions.signIn()}
                transparent
                block
                style={styles.loginBtn}
              >
                <Text style={{ color: commonColor.brandPrimary, fontWeight: "600" }}>
                  SIGN IN
                </Text>
              </Button>
            </Col>
            <Col style={{ padding: 10 }}>
              <Button
                onPress={() => Actions.register()}
                block
                style={styles.registerBtn}
              >
                <Text style={{ fontWeight: "600", color: "#fff" }}>
                  REGISTER
                </Text>
              </Button>
            </Col>
          </Grid>
        </View>
      </View>
    );
  }
}

export default connect()(Login);

class Home extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <View style={styles.container}>
        <Text>Page under construuction</Text>
        <View style={styles.headerContainer}>
          <Header
            iosStatusbar="default"
            style={Platform.OS === "ios" ? styles.iosHeader : styles.aHeader}
            androidStatusBarColor={commonColor.statusBarLight}
          >
            <Left>
              <Button transparent onPress={this.props.openDrawer}>
                <Icon
                  name="ios-menu"
                  style={{ color: commonColor.brandPrimary }}
                />
              </Button>
            </Left>
            <Body>
              <Title style={{ color: commonColor.brandPrimary, marginTop: -2 }}>
                Drawer Demo App
              </Title>
            </Body>
            <Right />
          </Header>
        </View>
      </View>
    );
  }
}
function bindActions(dispatch) {
  return {
    openDrawer: () => dispatch(openDrawer())
  };
}
const mapStateToProps = state => ({
  navigation: state.cardNavigation
});

export default connect(
  mapStateToProps,
  bindActions
)(Home);