The stack navigator and its transitioner for Tour's authentication stack.

authStack.js

// @flow
import React, { Component } from 'react';
import { createStackNavigator, NavigationActions, StackActions } from 'react-navigation';
import styled from 'styled-components';
import { connect } from 'react-redux';

import type { NavigationScreenProp, DeviceProps } from '../../../flow/general';

import Main from './screens/main';
import EmailLogin from './screens/emailLogin';
import LoginLoader from './screens/loader';
import Forgot from './screens/forgot';

import TourLogo from '../../assets/logo';

import { hideStatusBacking } from '../../redux/actions/config';

function verticalSlide(props) {
    const { layout, position, scene } = props;

    const { index } = scene;

    const opacity = position.interpolate({
        inputRange: [index - 1, index, index + 1],
        outputRange: [0.7, 1, 0]
    });

    const translateY = position.interpolate({
        inputRange: [index - 1, index, index + 1],
        outputRange: [layout.initHeight, 0, -layout.initHeight * 0.35]
    });
    // layout.initHeight is height of the device

    return {
        opacity,
        transform: [{ translateY }]
    };
}

const StackNavigator = createStackNavigator(
    {
        Main: {
            screen: Main
        },
        EmailLogin: {
            screen: EmailLogin
        },
        LoginLoader: {
            screen: LoginLoader
        },
        Forgot: {
            screen: Forgot
        }
    },
    {
        initialRouteName: 'Main',
        headerMode: 'none',
        /* The header config from HomeScreen is now here */
        navigationOptions: {},
        cardStyle: {
            backgroundColor: '#fff',
            shadowOpacity: 0
        },

        transitionConfig: () => ({
            screenInterpolator: verticalSlide,
            containerStyle: {
                backgroundColor: '#fff'
            }
        })
    }
);

class AuthStack extends Component<{
    authenticated: boolean,
    listenToAuth: Function,
    navigation: NavigationScreenProp,
    hideStatusBacking: Function,
    deviceProps: DeviceProps
}> {
    static router = StackNavigator.router;
    componentWillMount() {
        this.props.hideStatusBacking();
        if (this.props.authenticated) {
            this.goToDashboard();
        }
    }
    componentDidUpdate() {
        if (this.props.authenticated) {
            this.goToDashboard();
        }
    }
    goToDashboard = () => {
        const action = StackActions.reset({
            index: 0,
            actions: [NavigationActions.navigate({ routeName: 'Dashboard' })],
            key: null
        });
        this.props.navigation.dispatch(action);
    };
    render() {
        const { deviceProps, navigation } = this.props;
        return (
            <Container>
                <StackNavigator navigation={navigation} />
                <LogoContainer deviceProps={deviceProps} pointerEvents="none">
                    {deviceProps.profile === 4 ? (
                        <TourLogo width={72} height={61} shadow />
                    ) : (
                        <TourLogo width={85} height={72} shadow />
                    )}
                </LogoContainer>
            </Container>
        );
    }
}

const mapStateToProps = state => ({
    authenticated: state.auth.authenticated,
    deviceProps: state.deviceProps
});

const actionCreators = {
    hideStatusBacking
};

export default connect(
    mapStateToProps,
    actionCreators
)(AuthStack);

const Container = styled.View`
    flex: 1;
    background-color: #fff;
`;

const LogoContainer = styled.View`
    position: absolute;
    top: ${({ deviceProps: { statusBarHeight, profile } }) =>
        (profile === 4 ? statusBarHeight + 20 : statusBarHeight + 40)};
    width: 100%;
    align-items: center;
`;