Shared element transition

examples/NavigationPlayground/js/App.js

@@ -21,6 +21,7 @@ import StacksInTabs from './StacksInTabs';
 import StacksOverTabs from './StacksOverTabs';
 import SimpleStack from './SimpleStack';
 import SimpleTabs from './SimpleTabs';
+import Transitions from './Transitions';
 
 const ExampleRoutes = {
   SimpleStack: {
@@ -75,6 +76,12 @@ const ExampleRoutes = {
     screen: SimpleTabs,
     path: 'settings',
   },
+  Transitions: {
+    name: 'Shared Element Transition',
+    description: 'Shared element transition',
+    screen: Transitions,
+    path: 'transitions',
+  },
 };
 
 const MainScreen = ({ navigation }) => (

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

@@ -0,0 +1,101 @@
+// @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>
+      <Touchable onPress={() => openMoreDetails(photo)}>
+        <Transition.SharedElement.Image id={`image-${url}`} source={image} style={styles.image} />
+      </Touchable>
+      <View style={styles.titleContainer} onLayout={this._onLayout}>
+        <Transition.SharedElement.Text id={`title-${url}`}
+          style={[styles.text, styles.title]}>{title}</Transition.SharedElement.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,114 @@
+// @flow
+import React, { Component } from 'react';
+import {
+  ListView,
+  Image,
+  View,
+  Text,
+  Dimensions,
+  StyleSheet,
+  Button,
+} 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 (
+      <View>
+        <ListView
+          dataSource={ds.cloneWithRows(photoRows)}
+          renderRow={this.renderRow.bind(this)}
+        />
+        <Button title="Go back" onPress={() => this.props.navigation.goBack(null)} style={styles.goBack} />
+      </View>
+    );
+  }
+  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.SharedElement.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,
+  },
+  goBack: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+  }
+})
+
+export default PhotoGrid;

examples/NavigationPlayground/js/Transitions/SharedElements/PhotoMoreDetail.js

@@ -0,0 +1,57 @@
+// @flow
+import React, { Component } from 'react';
+import {
+  View,
+  ScrollView,
+  Image,
+  StyleSheet,
+  Animated,
+  Dimensions,
+  Text,
+  Easing,
+  TouchableNativeFeedback,
+} from 'react-native';
+
+import { Transition } from 'react-navigation';
+
+const { width: windowWidth } = Dimensions.get("window");
+
+const PhotoMoreDetail = (props) => {
+  const { photo: { url, title, description, image } } = props.navigation.state.params;
+  return (
+    <View>
+      <ScrollView>
+        <View>
+          <View style={styles.container}>
+            <Transition.SharedElement.Text id={`title-${url}`} style={[styles.text, styles.title]}>{title}</Transition.SharedElement.Text>
+            <Transition.SharedElement.Image id={`image-${url}`} source={image} style={styles.image} />
+          </View>
+          <Text style={[styles.text]}>{description}</Text>
+        </View>
+      </ScrollView>
+    </View>
+  )
+};
+
+PhotoMoreDetail.navigationOptions = {
+  title: 'Photo More Detail',
+}
+
+const styles = StyleSheet.create({
+  image: {
+    width: 160,
+    height: 160,
+  },
+  title: {
+    fontSize: 25,
+    fontWeight: 'bold',
+  },
+  text: {
+    margin: 15,
+  },
+  container: {
+    flexDirection: 'row',
+  }
+})
+
+export default PhotoMoreDetail;

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,24 @@
+import {
+  StackNavigator,
+} from 'react-navigation';
+
+import PhotoGrid from './PhotoGrid';
+import PhotoDetail from './PhotoDetail';
+import PhotoMoreDetail from './PhotoMoreDetail';
+import { Transition } from 'react-navigation';
+import _ from 'lodash';
+import faker from 'faker';
+
+const App = StackNavigator({
+  PhotoGrid: {
+    screen: PhotoGrid,
+  },
+  PhotoDetail: {
+    screen: PhotoDetail,
+  },
+  PhotoMoreDetail: {
+    screen: PhotoMoreDetail,
+  }
+});
+
+export default App;

examples/NavigationPlayground/js/Transitions/index.js

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