RN_NavigationExperimental_CardStack_example.js

// NavigationExperimental CardStack example
// Usage: this.props.dispatch(pushRoute({ key: 'registration' }))

/* ****** */
/* App.js */
/* ****** */

import React, { Component, View } from 'react';
import {
  NavigationExperimental,
} from 'react-native';

const { CardStack } = NavigationExperimental;

// Start scene rendering. (you would want to put this somewhere else)
const scenes = {
  loading: () => null,
  registration: () => (<View />),
  something_else: scene => (
    <View { ...scene.route } />
  ),
};

function renderScene({ scene }, defaultKey) {
  // NavigatorExperimental likes to prepend keys with 'scene_'
  if (scene && scene.key) {
    const normalizedSceneKey = scene.key.replace('scene_', '');
    if (normalizedSceneKey in scenes) {
      return scenes[normalizedSceneKey](scene);
    }
  }

  if (defaultKey in scenes) {
    return scenes[defaultKey](scene);
  }

  return null;
}
// End scene rendering

class App extends Component {
  render() {
    const { navigationTree } = props;
    return (
      // Wrap cardstack in <View> to prevent white background from leaking
      <View style={{ flex: 1, backgroundColor: 'black' }}> 
        <CardStack
          navigationState={ navigationTree.root }
          renderScene={ scene => renderScene(scene, 'loading') }
          // cardStyle={ my_cool_style } // <- useful prop
        />
      </View>
    );
  }
}

export default connect(state => ({
  navigationTree: state.navigation.tree,
}))(App);


/* ********** */
/* actions.js */
/* ********** */
export const PUSH_ROUTE = 'PUSH_ROUTE';
export const POP_ROUTE = 'POP_ROUTE';

export function pushRoute(route) {
  return {
    type: PUSH_ROUTE,
    route
  };
}

// Route is an optional parameter to specify which route you want to pop
export function popRoute(route) {
  return {
    type: POP_ROUTE,
    route
  };
}


/* ********** */
/* reducer.js */
/* ********** */
import { NavigationExperimental } from 'react-native';
const NavUtils = NavigationExperimental.StateUtils;

const rootInitialState = {
  key: 'root',
  index: 0,
  routes: [{ key: 'loading' }]
};

export default function navigationReducer(state = rootInitialState, action) {
  switch (action.type) {
    case PUSH_ROUTE:
      if (state.routes[state.index].key !== action.route) {
        return Object.assign({}, state, NavUtils.push(state, action.route));
      }
      break;

    case POP_ROUTE:
      if (state.index > 0 && state.routes.length > 1) {
        if (!action.route || state.routes[state.index].key === action.route) {
          return Object.assign({}, state, NavUtils.pop(state));
        }
      }
      break;
  }
  return state;
}