Multi transitions

examples/NavigationPlayground/js/App.js

@@ -19,6 +19,7 @@ import ModalStack from './ModalStack';
 import StacksInTabs from './StacksInTabs';
 import SimpleStack from './SimpleStack';
 import SimpleTabs from './SimpleTabs';
+import Transitions from './Transitions';
 
 const ExampleRoutes = {
   SimpleStack: {
@@ -63,6 +64,12 @@ const ExampleRoutes = {
     screen: SimpleTabs,
     path: 'settings',
   },
+  Transitions: {
+    name: 'Custom Transitions',
+    description: 'Custom, complex transitions',
+    screen: Transitions,
+    path: 'transitions',
+  },
 };
 
 const MainScreen = ({ navigation }) => (
@@ -103,7 +110,8 @@ const AppNavigator = StackNavigator({
   mode: Platform.OS === 'ios' ? 'modal' : 'card',
 });
 
-export default () => <AppNavigator />;
+// export default () => <AppNavigator />;
+export default Transitions; // TODO change it back
 
 const styles = StyleSheet.create({
   item: {

examples/NavigationPlayground/js/Transitions/SharedElements/PhotoDetail.js

@@ -0,0 +1,98 @@
+// @flow
+import React, { Component } from 'react';
+import {
+  View,
+  ScrollView,
+  Image,
+  StyleSheet,
+  Animated,
+  Dimensions,
+  Text,
+  Easing,
+  ListView,
+} from 'react-native';
+
+import { Transition } from 'react-navigation';
+
+import Touchable from './Touchable';
+
+const { width: windowWidth } = Dimensions.get("window");
+
+const PhotoDetail = (props) => {
+  const { photo } = props.navigation.state.params;
+  const { url, title, description, image, comments } = photo;
+  const openMoreDetails = photo => props.navigation.navigate('PhotoMoreDetail', { photo });
+  const renderHeader = () => (
+    <View>
+      <Transition.Image id={`image-${url}`} source={image} style={styles.image} />
+      <View style={styles.titleContainer} onLayout={this._onLayout}>
+        <Text style={[styles.text, styles.title]}>{title}</Text>
+      </View>
+      <Text style={[styles.text]}>{description}</Text>
+    </View>
+  );
+  return (
+    <View>
+      <ListView dataSource={dsComments.cloneWithRows(comments)}
+        renderRow={renderComment}
+        renderHeader={renderHeader}
+      />
+    </View>
+  )
+};
+
+PhotoDetail.navigationOptions = {
+  title: 'Photo Detail'
+}
+
+const renderComment = ({ author, comment, avatar, time }) => (
+  <View style={commentStyles.container}>
+    <View style={commentStyles.textContainer}>
+      <View style={commentStyles.authorContainer}>
+        <Text>{author}</Text>
+        <Text>{time}</Text>
+      </View>
+      <Text style={commentStyles.text}>{comment}</Text>
+    </View>
+  </View>
+);
+
+const dsComments = new ListView.DataSource({
+  rowHasChanged: (r1, r2) => r1 !== r2,
+});
+
+
+const styles = StyleSheet.create({
+  image: {
+    width: windowWidth,
+    height: windowWidth / 2,
+  },
+  title: {
+    fontSize: 35,
+    fontWeight: 'bold',
+  },
+  text: {
+    margin: 15,
+  }
+});
+
+const commentStyles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginLeft: 16,
+    marginRight: 16,
+    height: 72,
+  },
+  textContainer: {
+    flex: 1,
+  },
+  text: {
+  },
+  authorContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  }
+});
+
+export default PhotoDetail;

examples/NavigationPlayground/js/Transitions/SharedElements/PhotoGrid.js

@@ -0,0 +1,103 @@
+// @flow
+import React, { Component } from 'react';
+import {
+  ListView,
+  Image,
+  View,
+  Text,
+  Dimensions,
+  StyleSheet,
+} from 'react-native';
+import faker from 'faker';
+import _ from 'lodash';
+
+import { Transition } from 'react-navigation';
+import Touchable from './Touchable';
+
+const ds = new ListView.DataSource({
+  rowHasChanged: (r1, r2) => r1 !== r2,
+});
+
+const images = [
+  require('./images/img1.jpg'),
+  require('./images/img2.jpg'),
+  require('./images/img3.jpg'),
+  require('./images/img4.jpg'),
+  require('./images/img5.jpg'),
+  require('./images/img6.jpg'),
+  require('./images/img7.jpg'),
+  require('./images/img8.jpg'),
+  require('./images/img9.jpg'),
+  require('./images/img10.jpg'),
+  require('./images/img11.jpg'),
+  require('./images/img12.jpg'),
+]
+
+const photos = Array(50).fill(0).map(_ => ({
+  url: faker.image.animals(500, 500, true),
+  image: images[faker.random.number(images.length - 1)],
+  title: faker.name.findName(),
+  description: faker.lorem.paragraphs(10),
+  comments: Array(20).fill(0).map(_ => (
+    {
+      author: faker.name.findName(),
+      // avatar: avatars[faker.random.number(4)],
+      comment: faker.lorem.sentence(),
+      time: '12/21/2017',
+    }
+  ))
+}));
+
+const colCount = 3;
+
+const { width: windowWidth } = Dimensions.get("window");
+const margin = 2;
+const photoWidth = (windowWidth - margin * colCount * 2) / colCount;
+
+const photoRows = _.chunk(photos, colCount);
+
+class PhotoGrid extends Component {
+  static navigationOptions = {
+    title: 'Photo Grid'
+  }
+  render() {
+    return (
+      <ListView
+        dataSource={ds.cloneWithRows(photoRows)}
+        renderRow={this.renderRow.bind(this)}
+      />);
+  }
+  renderRow(photos) {
+    return (
+      <View style={styles.row}>
+        {photos.map(this.renderCell.bind(this))}
+      </View>
+    )
+  }
+  renderCell(photo) {
+    const onPhotoPressed = photo => this.props.navigation.navigate('PhotoDetail', { photo });
+    return (
+      <Touchable onPress={() => onPhotoPressed(photo)} key={photo.url}>
+        <View style={styles.cell}>
+          <Transition.Image id={`image-${photo.url}`}
+            source={photo.image} style={styles.image} />
+        </View>
+      </Touchable>
+    )
+  }
+}
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+  },
+  cell: {
+    margin: 2,
+  },
+  image: {
+    width: photoWidth,
+    height: photoWidth,
+  }
+})
+
+export default PhotoGrid;

examples/NavigationPlayground/js/Transitions/SharedElements/Touchable.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import {
+  TouchableNativeFeedback,
+  TouchableOpacity,
+  Platform,
+} from 'react-native';
+
+const Touchable = props => {
+  const Comp = (Platform.OS === 'android'
+    ? TouchableNativeFeedback
+    : TouchableOpacity);
+  return <Comp {...props} />
+}
+
+export default Touchable;

examples/NavigationPlayground/js/Transitions/SharedElements/index.js

@@ -0,0 +1,123 @@
+import {
+  StackNavigator,
+} from 'react-navigation';
+
+import PhotoGrid from './PhotoGrid';
+import PhotoDetail from './PhotoDetail';
+import { Transition } from 'react-navigation';
+import _ from 'lodash';
+import faker from 'faker';
+
+const {createTransition, initTransition, together, sq, Transitions} = Transition;
+
+const Slide = createTransition({
+  getStyleMap(
+    itemsOnFromRoute: Array<*>, 
+    itemsOnToRoute: Array<*>, 
+    transitionOptions,
+  ) {
+    // direction is 1 or -1
+    const { direction, layout: {initWidth} } = transitionOptions;
+    const routeToSlide = direction > 0 ? 'to' : 'from';
+    const itemsToSlide = direction > 0 ? itemsOnToRoute : itemsOnFromRoute;
+    const slide = (result, item) => {
+      result[item.id] = {
+        translateX: {
+          // inputRange: [0, 1] /// ===> [position, nextPosition]
+          outputRange: (direction > 0
+            ? [initWidth, 0]
+            : [0, initWidth]
+          )
+        }
+      }
+      return result;
+    }
+    return {
+      [routeToSlide]: itemsToSlide.reduce(slide, {}),
+    }
+  } 
+});
+
+const SharedImage = initTransition(Transitions.SharedElement, /image-.+/);
+const CrossFadeScene = initTransition(Transitions.CrossFade, /\$scene.+/);
+const SlideScene = initTransition(Slide, /\$scene.+/);
+
+const StaggeredAppear = (filter) => ({
+  filter,
+  getStyleMap(
+    itemsOnFromRoute: Array<*>, 
+    itemsOnToRoute: Array<*>, 
+    transitionProps) {
+    const createStyle = (startTime, axis, direction) => {
+      const {progress} = transitionProps;
+      const inputRange = [0, startTime, 1];
+      const opacity = progress.interpolate({
+        inputRange,
+        outputRange:  [0, 0, 1],
+      });
+      const translate = progress.interpolate({
+        inputRange,
+        outputRange: [ direction * 400, direction * 400, 0],
+      });
+      axis = axis === 'x' ? 'translateX' : 'translateY';
+      return {
+        opacity,
+        transform: [ { [axis]: translate } ],
+      };
+    }
+    const clamp = (x, min, max) => Math.max(min, Math.min(max, x));
+    const axes = ['x', 'y'];
+    const directions = [-1, 1];
+    return {
+      to: itemsOnToRoute.reduce((result, item) => {
+        const startTime = clamp(Math.random(), 0.1, 0.9);
+        const axis = faker.random.arrayElement(axes);
+        const direction = faker.random.arrayElement(directions);
+        result[item.id] = createStyle(startTime, axis, direction);
+        return result;
+      }, {}),
+    };
+  }
+})
+
+// const StaggeredAppearImages = createTransition(StaggeredAppear, /image-.+/);
+
+const NoOp = (filter) => ({
+  filter,
+  getStyleMap() {
+    console.log('NoOp transition called');
+  }
+});
+const NoOpImage = createTransition(NoOp, /image-.+/);
+
+const transitions = [
+  // { from: 'PhotoGrid', to: 'PhotoDetail', transition: CrossFadeScene(1) },
+  // { from: 'PhotoDetail', to: 'PhotoGrid', transition: CrossFadeScene(1) },
+  // { from: 'PhotoGrid', to: 'PhotoDetail', transition: NoOpImage},
+  // { from: 'PhotoDetail', to: 'PhotoGrid', transition: NoOpImage},
+  // { from: 'PhotoGrid', to: 'PhotoDetail', transition: together(SharedImage, DelayedFadeInDetail)},
+  // { from: 'PhotoDetail', to: 'PhotoGrid', transition: together(SharedImage, FastFadeOutDetail) },
+  // { from: 'PhotoGrid', to: 'PhotoDetail', transition: DelayedFadeInDetail},
+  // { from: 'PhotoDetail', to: 'PhotoGrid', transition: FastFadeOutDetail },
+  // { from: 'PhotoGrid', to: 'PhotoDetail', transition: SharedImage(1)},
+  // { from: 'PhotoDetail', to: 'PhotoGrid', transition: SharedImage(1)},
+  // { from: 'PhotoGrid', to: 'PhotoDetail', transition: CrossFadeScene },
+  // { from: 'PhotoDetail', to: 'PhotoGrid', transition: together(StaggeredAppearImages, SlideScenes) },
+  // { from: 'PhotoGrid', to: 'PhotoDetail', transition: together(SharedImage(), sq(Idle(0.9), CrossFadeScene()))},
+  // { from: 'PhotoDetail', to: 'PhotoGrid', transition: together(CrossFadeScene(0.1), SharedImage())},
+  { from: 'PhotoGrid', to: 'PhotoDetail', transition: sq(SharedImage(0.9), CrossFadeScene(0.1)), config: {duration: 650}},
+  { from: 'PhotoDetail', to: 'PhotoGrid', transition: sq(CrossFadeScene(0.1), SharedImage(0.9)), config: {duration: 650}},
+];
+
+const App = StackNavigator({
+  PhotoGrid: {
+    screen: PhotoGrid,
+  },
+  PhotoDetail: {
+    screen: PhotoDetail,
+  }
+}, {
+    transitions,
+  });
+
+export default App;

examples/NavigationPlayground/js/Transitions/index.js

@@ -0,0 +1,4 @@
+import SharedElements from './SharedElements';
+
+// TODO export a navigator
+export default SharedElements;

examples/NavigationPlayground/package.json

@@ -5,6 +5,7 @@
   "dependencies": {
     "@exponent/vector-icons": "~4.0.0",
     "exponent": "~13.1.0",
+    "faker": "^4.0.0",
     "react": "~15.4.2",
     "react-native": "github:exponent/react-native#sdk-13.0.0",
     "react-native-vector-icons": "^4.0.0"