Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
// 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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment