Add custom transitioner example to NavigationPlayground (#2412)

packages/react-navigation/examples/NavigationPlayground/js/App.js

@@ -14,6 +14,7 @@ import { StackNavigator } from 'react-navigation';
 
 import Banner from './Banner';
 import CustomTabs from './CustomTabs';
+import CustomTransitioner from './CustomTransitioner';
 import Drawer from './Drawer';
 import TabsInDrawer from './TabsInDrawer';
 import ModalStack from './ModalStack';
@@ -48,6 +49,11 @@ const ExampleRoutes = {
     description: 'Custom tabs with tab router',
     screen: CustomTabs,
   },
+  CustomTransitioner: {
+    name: 'Custom Transitioner',
+    description: 'Custom transitioner with stack router',
+    screen: CustomTransitioner,
+  },
   ModalStack: {
     name: Platform.OS === 'ios'
       ? 'Modal Stack Example'

packages/react-navigation/examples/NavigationPlayground/js/CustomTransitioner.js

@@ -0,0 +1,129 @@
+import React, { Component, PropTypes } from 'react';
+import {
+  StyleSheet,
+  Platform,
+  Easing,
+  View,
+  Animated,
+  Image,
+  Button,
+} from 'react-native';
+import {
+  Transitioner,
+  StackRouter,
+  createNavigationContainer,
+  addNavigationHelpers,
+  createNavigator
+} from 'react-navigation';
+import SampleText from './SampleText';
+
+const MyNavScreen = ({ navigation, banner }) => (
+  <View>
+    <SampleText>{banner}</SampleText>
+    {navigation.state && navigation.state.routeName !== 'Settings' &&
+      <Button
+        onPress={() => navigation.navigate('Settings')}
+        title="Go to a settings screen"
+      />
+    }
+    
+    <Button
+      onPress={() => navigation.goBack(null)}
+      title="Go back"
+    />
+  </View>
+);
+
+const MyHomeScreen = ({ navigation }) => (
+  <MyNavScreen banner="Home Screen" navigation={navigation} />
+);
+
+const MySettingsScreen = ({ navigation }) => (
+  <MyNavScreen banner="Settings Screen" navigation={navigation} />
+);
+
+class CustomNavigationView extends Component {
+  render() {
+    const { navigation, router } = this.props;
+
+    return (
+      <Transitioner
+        configureTransition={this._configureTransition}
+        navigation={navigation}
+        render={this._render}
+      />
+    );
+  }
+
+  _configureTransition(transitionProps, prevTransitionProps) {
+    return {
+      duration: 200,
+      easing: Easing.out(Easing.ease),
+    };
+  }
+
+  _render = (transitionProps, prevTransitionProps) => {
+    const scenes = transitionProps.scenes.map(scene => this._renderScene(transitionProps, scene));
+    return (
+      <View style={{ flex: 1 }}>
+        {scenes}
+      </View>
+    );
+  }
+
+  _renderScene = (transitionProps, scene) => {
+    const { navigation, router } = this.props;
+    const { routes } = navigation.state;
+    const { position } = transitionProps;
+    const { index } = scene;
+
+    const animatedValue = position.interpolate({
+      inputRange: [index - 1, index, index + 1],
+      outputRange: [0, 1, 0],
+    });
+
+    const animation = {
+      opacity: animatedValue,
+      transform: [
+        { scale: animatedValue },
+      ],
+    };
+
+    // The prop `router` is populated when we call `createNavigator`.
+    const Scene = router.getComponentForRouteName(scene.route.routeName);
+    return (
+      <Animated.View key={index} style={[styles.view, animation]}>
+        <Scene
+          navigation={addNavigationHelpers({
+            ...navigation,
+            state: routes[index],
+          })}
+        />
+      </Animated.View>
+    )
+  }
+}
+
+const CustomRouter = StackRouter({
+  Home: { screen: MyHomeScreen },
+  Settings: { screen: MySettingsScreen },
+});
+
+const CustomTransitioner = createNavigationContainer(
+  createNavigator(CustomRouter)(CustomNavigationView)
+);
+
+export default CustomTransitioner;
+
+const styles = StyleSheet.create({
+  container: {
+    marginTop: Platform.OS === 'ios' ? 20 : 0,
+  },
+  view: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
+  },
+});