login-nav.js

import React, { Component } from 'react'
import { NavigationExperimental } from 'react-native'
const {
  Card: NavigationCard,
  Transitioner: NavigationTransitioner,
} = NavigationExperimental

import Registration from '../login/registration'
import Confirmation from '../login/confirmation'
import Profile from '../login/profile'
import OrgPicker from '../login/org-picker'

class LoginNav extends Component {

  constructor(props) {
    super(props);
    this._renderScene = this._renderScene.bind(this);
  }

  _renderScene({ scene }) {
    const { route } = scene;
    switch (route.key) {
      case 'registration':
        return <Registration />
      
      case 'confirmation':
        return <Confirmation />

      case 'profile':
        return <Profile />
      
      case 'orgPicker':
        return <OrgPicker />
    }
  }
  
  render () {
    return (
      <NavigationTransitioner
        style={{flex: 1}}
        navigationState={this.props.nav}
        render={props => (
          <NavigationCard
            {...props}
            renderScene={this._renderScene}
            key={props.scene.route.key}
          />
        )}
      />
    );
  }
}


// CONTAINER
import { connect } from 'react-redux'
import { push, pop } from './nav-actions'

const mapStateToProps = (state) => {
    return {
        nav: state.nav.loginNav
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        pushRoute: (navKey, route) => dispatch(push(navKey, route)),
        popRoute: (navKey) => dispatch(pop(navKey))
    }
}

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(LoginNav)

/**
 * Here is my state.nav.loginNav
 * after calling push('login', { key: 'confirmation' })
 * 
 loginNav: {
	index: 1,
	navKey: "login",
	routes: [
		{ key: "registration" },
		{ key: "confirmation" }
	]
}
*/